Buen día espero y me puedan ayudar a resolver esta duda ya que soy nueva en esto. Estoy desarrollando un formulario para generar encuestas dinámicamente, en el formulario se pueden agregar preguntas, cada pregunta se le puede agregar una cantidad indefinida de opciones como muestra la siguiente imagen.
Cada input
padre (pregunta), tiene campos hijo (opciones) que también se agregan dinámicamente, así que tuve que agregar una variable para asignarme numeración a los campos padre (preguntas), ya que de esa manera puedo indicarle a cada hijo a que grupo de preguntas pertenece, sino al momento de agregar una opción a una segunda pregunta siempre la agregaba en la primera de la misma forma la momento de eliminar preguntas o una opción específica.
Mi pregunta es: como imprimir los datos de ese formulario dinámico en otra hoja.php
La intente con foreach
y for
y no me da resultado, ya que necesito guardar en una BD la información.
El código la tengo de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calendario</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="nuevo.js"></script>
</head>
<style type="text/css">
.col-md-12.fieldwrapper {
margin-bottom: 2%;
}
.valor {
width: 20%;
float: left;
}
.opcion {
width: 50%;
float: left;
}
.fieldname {
width: 85%;
display: inline;
}
.cuerpo {
background: #fff;
padding: 5%;
box-shadow: 10px 0px 5px 0px rgba(0, 0, 0, 0.47);
}
/* .new{
margin-left: 1.5%;
}*/
.remove {
margin-left: 1%;
}
.subfield .remove {
margin-top: 1%;
}
.btn-success {
background: #00541c;
border-color: #00541c;
}
.subfield {
margin-top: 1%;
}
</style>
<body style="background:#d6d6d6;">
<script type="text/javascript">
//script para agregar los formulario dinamicos en el div que tiene la id llamada buildyourform cada vez que le da clic en el boton que tiene como id add
$(document).ready(function() {
$("#add").click(function() {
//agrega el primer gripo de la pregunta
var intId = $("#buildyourform div").length + 1;
var fieldWrapper = $("<div class = \"form-group\" class =\"col-md-10 fieldwrapper\" role=\"list\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" name = \" pregunta" + intId + "\" class=\"fieldname form-control\" placeholder=\" Preguna\" required />");
var subWrapper = $("<fieldset id=\"subwrapper" + intId + "\"/>");
var newButton = $("<button type=\"button\" class=\"new btn btn-success btn-sm\" id=\"new" + intId + "\"><span class=\"glyphicon glyphicon-plus\"></span></button");
newButton.click(function() {
//grupo para las opiones
var Id = $("#subwrapper" + intId + " aside").length + 1;
var subfield = $("<aside class =\"col-md-12 subfield\" id=\"subfield" + Id + "\"/>");
var Name = $("<input type=\"text\" name =\"opcion" + Id + "" + intId + "\" class=\"opcion form-control\" placeholder=\" Opción\" required />");
var value = $("<input type=\"number\" name = \"valor" + Id + "" + intId + "\" class=\"valor form-control\" placeholder=\" Valor\" required />");
//elimina una opcion espesifica
var removeButton1 = $("<button type=\"button\" class=\"remove btn btn-danger btn-sm\"><span class=\"glyphicon glyphicon-trash\"></span></button");
removeButton1.click(function() {
$(this).parent().remove();
});
subfield.append(Name);
subfield.append(value);
subfield.append(removeButton1);
subfield.append(subdato);
$("#subwrapper" + intId).append(subfield);
});
//elimina una pregunta espesifica
var removeButton = $("<button type=\"button\" id=\"remove\" class=\"remove btn btn-danger btn-sm\"><span class=\"glyphicon glyphicon-trash\"></span></button");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(newButton);
fieldWrapper.append(removeButton);
fieldWrapper.append(subWrapper);
fieldWrapper.append(dato);
$("#buildyourform").append(fieldWrapper);
});
$(".remove").click(function() {
//alert("hola");
$(this).parent().remove();
});
});
</script>
<div class="content">
<div class="col-md-10 cuerpo">
<center>
<h3>Nueva encuesta</h3>
</center>
<form class="form-horizontal" method="post" action="guardaEncuesta.php" target="_blank">
<div class="form-group col-md-12" role="listitem">
<input type="text" name="titulo" class="form-control" placeholder="Título" required>
<textarea class="form-control" name="encabezado" required placeholder="Descripción de la encuesta"></textarea>
<select name="area" class="form-control" required>
<option value = "">Selecciona un Área dirigida</option>
<option value = "1">Direccion de carreras</option>
<option value = "1">Planeacion</option>
<option value = "1">Control escolar</option>
</select>
<select name="dirigido" class="form-control" required>
<option value = "">Selecciona a quien va dirigida</option>
<option value = "1">Profesores</option>
<option value = "2">Alumnos</option>
<option value = "3">Administrativos</option>
<option value = "4">Profesores y administrativos</option>
<option value = "5">General</option>
</select>
</div>
<aside>
<button type="button" class="add btn btn-success" id="add"><span class="glyphicon glyphicon-plus"></span> Nueva pregunta</button>
</aside>
<div class="form-group col-md-12" role="listitem">
<fieldset id="buildyourform">
</div>
<input type="submit" name="guardar" class="btn btn-success" value="Guardar">
</form>
</div>
</div>
</body>
</html>
En la hoja guardar.php tengo el siguiente código solamente puedo recibir los datos estáticos y las preguntas, pero las opciones de cada pregunta no logran imprimirse.
<?php
require("../conexion.php");
if(isset($_POST['guardar'])){
$titulo = $_POST['titulo'];
$encabezado = $_POST['encabezado'];
$area = $_POST['area'];
$dirige = $_POST['dirigido'].'<br>';
$p = $_POST['numero'];
for ($i=1; $i <=$p; $i++) {
$pregunta = $_POST["pregunta$i"];
echo $pregunta.'<br>';
}
echo "<br>";
}
?>
espero y puedan ayudarme :(, Gracias!
https://www.dropbox.com/s/fx2f4ipqipoifj0/formulario_dinamico.rar?dl=0 igual aqui esta el ejemplo