2

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

9
  • ¿que tienes en el archivo [guardaEncuesta.php]?
    – Kevin
    Commented el 25 jul. 2017 a las 19:11
  • var dato = $("<input type=\"hidden\" name = \"numero\" class=\"fieldname form-control\" value=\""+intId+"\" required />"); que se encuencontraba en el script me servia como referencia para saber cuantas preguntas existe en el formulario y poder enviar recibirlo como $_post['numero'] y poder recorrerlo en el for, intente acerlo con las opcions pero no me dio resultado Commented el 25 jul. 2017 a las 21:28
  • si ya me di cuenta
    – Kevin
    Commented el 25 jul. 2017 a las 21:28
  • Hola, tienes que recoger los datos como lista (array) ya cuando los tengas si puedes hacer el insert normalmente
    – ByGroxD
    Commented el 25 jul. 2017 a las 21:31
  • hola ByGroxD, lo intenraré gracias Commented el 25 jul. 2017 a las 21:32

1 respuesta 1

1

la manera correcta de recibir un formulario dinamico es mediante listado Array en php hay distintas maneras de recoger un Array en mi caso lo hago de la siguiente manera

lo envio atravez de un input con determinado name y los corchetes de la siguiente forma

<input class="form-control validate[required]" name="nombre[]" />

estos corchetes me indican que es un array en caso de php no tiene necesidad de tener un numero incrementándose dentro de los corchetes, no es necesario

ya en php lo recoges de la siguiente manera:

foreach (array_keys($_POST['nombre']) as $key) {
  $nombre = $_POST['nombre'][$key];

  echo "Nombre: $nombre"."<br>";
}

Soy un poco malo explicando sin embargo te dejo un ejemplo básico pero claro de lo que necesitas.

index.html:

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

<head>
  <title>Dinamicos</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-es.js"></script>
  <style>
    .top-buffer {
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div id="container ">
    <div class="row-fluid top-buffer">
      <div class="col-lg-6 col-lg-offset-3 text-center">
        <form id="miform" method="post" name="miform" action="guarda.php">
          <table id="tblprod" class="table table-hover table-bordered">
            <thead>
              <tr>
                <th># Registro</th>
                <th>Nombre</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>
                  <div class="form-group col-lg-4">
                    <input class="form-control validate[required]" name="nombre[]" />
                  </div>
                  <div class="form-group col-lg-4">
                    <input class="form-control validate[required]" name="apellido[]" />
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <button id="btnadd" class="btn btn-primary">Agregar Nuevo</button>
          <button id="btnsubmit" type="submit" class="btn btn-success">Guardar</button>
        </form>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    $(function() {
      var count = 1;
      jQuery("#miform").validationEngine({
        promptPosition: "centerRight:0,-5"
      });

      $(document).on("click", "#btnadd", function(event) {
        count++;
        $('#tblprod tr:last').after('<tr><td>' + count + '</td><td><div class="form-group col-lg-4"><input class="form-control validate[required]" name=" nombre[]" /></div><div class="form-group col-lg-4"><input class="form-control validate[required]" name="apellido[]" /></div></td></tr>');
        event.preventDefault();

      });

    });
  </script>

</body>

</html>

guarda.php

<?php

foreach (array_keys($_POST['nombre']) as $key) {
  $nombre = $_POST['nombre'][$key];
  $apellido = $_POST['apellido'][$key];

  echo "Nombre: $nombre"."<br>"."Apellido: $apellido"."<br>";
}


?>

Con ese ejemplo podras resolver tus dudas, te recuerdo que yo solo imprimi el resultado, pero tu solo haces la query de insert y listo.

ACTUALIZACION

Hola, aqui te muestro como hacer el insert segun el ejemplo expuesto anteriormente, para que puedas entender mucho mejor, todo el codigo acabo de hacerlo y esta completamente funcional:

guarda.php

<?php
$mysqli = new mysqli("localhost", "root", "", "dbtest");
if ($mysqli->connect_errno) {
    echo "Fallo al conectar a MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
echo $mysqli->host_info . "\n";

foreach (array_keys($_POST['nombre']) as $key) {
  $nombre = $_POST['nombre'][$key];
  $apellido = $_POST['apellido'][$key];

  echo "Nombre: $nombre"."<br>"."Apellido: $apellido"."<br>";

  $query = "INSERT INTO usuario VALUES (NULL, '$nombre', '$apellido')";
$mysqli->query($query);
}


?>

Quedo atento

11
  • hola ByGroxD- anteriormente de esa manera lo inicie, pero se me complicó porque cada imput padre (pregunta), tiene campos hijo (opciones) que tambien se agregan dinamicamente, así que tuve que agrerar una variable para asignarme numeracion 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 opcion a una segunda pregunta siempre la agregaba en la primera de la misma forma la momento de eliminar preguntas o una opcion espesifica, pero muchas gracias por tomarte el tiempo Commented el 25 jul. 2017 a las 22:15
  • Disculpame mas o menos te logro entender, sin embargo te invito a compartir este comentario en tu Pregunta principal y si lo reformateas de manera mas clara (si es posible) hazlo sera de mucha utilidad para poderte ayudar, tan pronto lo hagas me comentas, asi re construyo el codigo.
    – ByGroxD
    Commented el 25 jul. 2017 a las 22:20
  • por cierto si puedes y es posible pasame tu codigo actual (formulario y tu archivo php) en un zip, para revisar de manera detallada y darte un ejemplo acorde a tu proyecto
    – ByGroxD
    Commented el 25 jul. 2017 a las 22:22
  • dropbox.com/s/fx2f4ipqipoifj0/formulario_dinamico.rar?dl=0 aqui tengo alojado el ejemplo gracias Commented el 25 jul. 2017 a las 22:45
  • Vale, tan pronto llegue a casa reviso
    – ByGroxD
    Commented el 25 jul. 2017 a las 22:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.