Ir para conteúdo
Fórum Script Brasil
  • 0

Clonar div com javascript

kjefersonf

Perguntado por kjefersonf,

 Share

Pergunta

kjefersonf

kjefersonf

Postado
Postado

Olá, eu consegui criar o codigo para clonar as div, para gerar um questionário baseado no google forms. Só que o problema é que quando crio a nova div, ele apaga a pergunta e a resposta anterior. 

Alguém pode me ajudar.

<!DOCTYPE html>
<html lang="pt">

<head>


    <script src="../jquey/jquery-3.3.1.min.js" type="text/javascript"></script>
    <a href="../jquey/gulpfile.js"></a>
    <script src="../jquey/jquery.fullPage.js" type="text/javascript"></script>


    <link href="../boot/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../boot/css/bootstrap-theme_1.css" rel="stylesheet" type="text/css" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />

    <!-- Website CSS style -->


    <!-- Website Font style -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <!-- Google Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>


    <!--INPUTS OUTROS -->
    <base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-input/v2.1.1/paper-input/">
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="paper-input.html">
    <link rel="import" href="../iron-icons/iron-icons.html">
</head>
<style>
    paper-input {
        max-width: 400px;
        margin: auto;
    }

    iron-icon,
    div[suffix] {
        color: hsl(0, 0%, 50%);
        margin-right: 12px;
    }

</style>

<body>

    <div class="minha">
        <div class="container">
            <div class="row main">
                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
                <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                    <div class="panel-heading">
                        <div class="main-login main-center">
                            <div id="s" align="center">

                                <strong>Questionario</strong>
                            </div>
                            <form class="form-horizontal" method="post" action="Recebeform.php">

                                <div class="form-group">
                                    <label for="name" class="cols-sm-2 control-label">Digite o nome do questionario</label>
                                    <div class="cols-sm-10">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                            <input type="text" class="form-control" name="quest" id="name" placeholder="Entrevista de emprego " />
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="name" class="cols-sm-2 control-label">Descrição questionario.</label>
                                    <div class="cols-sm-10">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                            <input type="text" class="form-control" name="descr" id="name" placeholder="Avaliar pessoas" />
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="name" class="cols-sm-2 control-label">Setor</label>
                                    <div class="cols-sm-10">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                            <input type="text" class="form-control" name="categ" id="name" placeholder="Recursos Humanos" />
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="name" class="cols-sm-2 control-label">Autor</label>
                                    <div class="cols-sm-10">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                            <input type="text" class="form-control" name="autor" id="autor" placeholder="Mario Quintana" />
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group ">


                                </div>
                                <input type="hidden" name="total" id="total" value="0">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="perguntas" style="display: block">
        <div class="container">
            <div class="row main">
                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
                <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                    <div class="panel-heading">
                        <div class="main-login main-center">
                            <form class="form-horizontal" method="post" action="#">
                                <div class="form-group">
                                    <label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>
                                    <div class="cols-sm-10">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                            <input type="text" class="form-control" name="pergunta" id="name" placeholder="Qual seu nome?" />
                                        </div>
                                    </div>
                                </div>
                                <div id="multiplaescolha">
                                    <div class="form-group">
                                        <label for="name" class="cols-sm-2 control-label">Digite sua pergunta de multipla escolha.</label>
                                        <div class="cols-sm-10">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                                <input type="text" class="form-control" name="pergunta" id="name" placeholder="Qual a sua idade?" />
                                                <br>
                                            </div>
                                        </div>


                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <input type="radio" name="optradio">

                                                    </span>
                                                    <input type="text" class="form-control" aria-label="...">
                                                </div>
                                                <!-- /input-group -->
                                            </div>
                                            <!-- /.col-lg-6 -->
                                            <div class="col-lg-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <input type="radio" name="optradio">
                                                    </span>
                                                    <input type="text" class="form-control" aria-label="...">
                                                </div>
                                                <!-- /input-group -->
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <input type="radio" name="optradio">
                                                    </span>
                                                    <input type="text" class="form-control" aria-label="...">
                                                </div>
                                                <!-- /input-group -->
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <input type="radio" name="optradio">
                                                    </span>
                                                    <input type="text" class="form-control" aria-label="...">
                                                </div>
                                                <!-- /input-group -->
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <input type="radio" name="optradio">
                                                    </span>
                                                    <input type="text" class="form-control" aria-label="...">
                                                </div>
                                                <!-- /input-group -->
                                            </div>
                                            <div id="maisresposta">

                                            </div>

                                            <!-- mais resposta -->
                                        </div>
                                        <button onclick="MaisRespostas()" class="btn btn-default btn-disable" type="button">ADD MAIS RESPOSTAS</button>
                                    </div>


                                </div>
                                <!-- /.multipla escolha -->

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="container">
        <div class="row main">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">

            </div>
            <br><br>
            <div class="form-group ">

                <button type="button" class="btn btn-success">Gravar</button>
                <button type="button" class="btn btn-info">Salvar rascunho</button>

                <button onclick="addPergunta()" class="btn btn-warning  btnPrincipal" name="2">ABERTA <i class="glyphicon glyphicon-plus-sign"></i> </button>

                <button onclick="PME()" class="btn btn-danger  btnPrincipal" name="3">Fechada <i class="glyphicon glyphicon-plus-sign"></i> </button>

            </div>
        </div>
    </div>


    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">

    </div>


</body>
<script>
    function Mudarestado(el) {
        //var display = document.getElementById(el).style.display;
        //if (display == "none")
        document.getElementById(el).style.display = 'block';
        //else
        //document.getElementById(el).style.display = 'none';
    }

    var conti = 0;

    function addPergunta() {
        conti++;
        var htmlNovo = "";
        htmlNovo += '<div class="container">' +
            '<div class="row main">' +
            '<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>' +
            '<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">' +
            '<div class="panel-heading">' +
            '<div class="main-login main-center">' +
            '<form class="form-horizontal" method="post" action="#">' +
            '<div class="form-group">' +
            '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>' +
            '<div class="cols-sm-10">' +
            '<div class="input-group">' +
            '<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>' +
            '<input type="text" class="form-control" name="pergunt' + conti + ' " id="name" placeholder="Qual seu nome?" />' +
            '</div></div></div></form></div></div></div></div></div>' + '';
        document.getElementById("perguntas").innerHTML += htmlNovo;
    }
    var contador = 0;

    function MaisRespostas() {
        contador++;
        var htmlpergunta = "";
        htmlpergunta += '<div class="col-lg-6">' + '<div class="input-group">' + '<span class="input-group-addon">' +
            '<input type="radio" name="optradio">' + '</span>' + '<input type="text" class="form-control" aria-label="...">' + '</div>' + '</div>' + '';
        document.getElementById("maisresposta").innerHTML += htmlpergunta;
    }
    var mudadiv = 1;
    var novasperguntas = 0;

    function PME() {
        novasperguntas++;
        mudadiv++;
        var html = "";
        html += '<div class="main-login main-center">' +
            '<div class="form-group">' + '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta de multipla escolha.</label>' +
            '<div class="cols-sm-10">' + '<div class="input-group">' + '<span class="input-group-addon">' +
            '<i class="fa fa-user fa" aria-hidden="true">' + '</i></span>' +
            '<input type="text" class="form-control" name="pergunta" id="name" placeholder="Qual a sua idade?" />' + '<br>' +
            '</div>' + '</div>' + '<div class="row">' +
            '<div class="col-lg-6">' + '<div class="input-group">' + '<span class="input-group-addon">' +
            '<input type="radio" name="optradio">' + '</span>' + '<input type="text" class="form-control" aria-label="...">' +
            '</div>' + '</div>' + '<div id="maisresposta2' + mudadiv + '">' + '</div>' + '</div>' +
            '<button onclick="MaisRespostas2(' + mudadiv + ')" class="btn btn-default btn-disable" type="button">ADD MAIS RESPOSTAS</button>' +
            '<div id="NPME">' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '';
        document.getElementById("multiplaescolha").innerHTML += html;

    }


    var con = 0;

    function MaisRespostas2(mudaduv) {
        con++;
        var htmlresposta = "";
        htmlresposta += '<div class="col-lg-6">' + '<div class="input-group">' + '<span class="input-group-addon">' +
            '<input type="radio" name="optradio">' + '</span>' +
            '<input type="text" class="form-control" aria-label="...">' + '</div>' + '</div>' + '';
        document.getElementById("maisresposta2" + mudaduv + "").innerHTML += htmlresposta;
    }

</script>
<link href="../css/botoes.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


</html>

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...