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.
Utilizamos cookies e tecnologias semelhantes de acordo com a nossa Política de Privacidade, e ao continuar navegando, você concorda com estas condições.
Pergunta
kjefersonf
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
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.