0

Estoy intentando hacer que el usuario vaya añadiendo tantas cajas dinámicas como le hagan falta (por ejemplo cantidad de idiomas que sabe) y una vez añadidas que pase los valores a un archivo PHP para guardar en base de datos, etc. De momento me sobra con listar desde un archivo PHP todos los campos que haya añadido. El código es el siguiente lo que no sé hacer es como listar las cajas en php.

<html>
<head>
<title></title>


    <meta charset="UTF-8">
    <title>formulario dinámico</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>   
<script type="text/javascript">
   $(function() {
      var $form = $("#my-dynamic-form");

      $('#add-field-button').click(function() {
        var $fieldset = $('<fieldset>');

        $('<input type="text" name="idioma[]">').appendTo($fieldset);
        $('<input type="text" name="leido[]">').appendTo($fieldset);
        $('<input type="text" name="escrito[]">').appendTo($fieldset);

        $fieldset.appendTo($form);
      });

    });
</script>
</head>

<body>


<h1>Ejemplo de formulario dinámico</h1>

<form id="my-dynamic-form" action="guardar_formulario.php" method="post">
<!-- <input name="fields[]" type="Submit" value="Guardar" >-->
<button type="Submit" value="Submit" class="boton">guardar</button>
</form>

<button id="add-field-button">
Agrega un campo
</button>

</body>
</html>

En el archivo guardar formulario.php quiero hacer la lista de todos los valores que se han introducido y he puesto esto pero no funciona, evidentemente está mal. Pueden ayudarme?

<?php
echo "idioma[]: " . $v11 = $_POST["idioma[]"];
echo "<br>";
echo "leido[]: " . $v11 = $_POST["leido[]"];
echo "<br>";    
echo "escrito[]: " . $v21 = $_POST["escrito[]"];
?>

2 respuestas 2

0

Lo que te recomiendo hacer es que como puede crear tantos inputs como el quiera, cada input que cree debe tener una clase en particular por ejemplo

<input type="text" class="dinamicos">

Cuando hagas el envio del formulario, puedes hacerlo por ajax. Recorrer todos los valores de los inputs que tengan esa clase.

var datos = [];
$('.dinamicos').each(function(i, obj) {

});

Donde el valor de obj es de cada uno de los inputs entonces en el arreglo datos puedes hacer push de un item el cual quieras con el formato que necesites. Y finalmente envias por ajax ese arreglo asi en php puedes recibirlos. Como veo que separas por tipos idioma, leido y escrito. Puedes hacer que cada input tenga una clase distinta.

 <input type="text" class="idioma">
 <input type="text" class="leido">
 <input type="text" class="escrito">

Haces los each correspondientes para cada clase

var idioma = [];
$('.idioma').each(function(i, obj) {
    idioma.push(obj);
});
var leido = [];
$('.leido').each(function(i, obj) {
    leido.push(obj);
});
var escrito = [];
$('.escrito').each(function(i, obj) {
    escrito.push(obj);
});

Asi tienes los 3 arreglos distintos y los envias a tu archivo php.

$.ajax({
    url: "/guardar_formulario.php",
    type: 'POST',
    data : {'idioma' : idioma, 'leido' : leido, 'escrito' : escrito}
    success: function() {
              alert( "Funcionó" );
    },
    error: function() {
              alert( "Ha ocurrido un error" );
    }
});
0

Cuando indicas que el name de un input es un arreglo, por ejemplo idioma[], lo que sucede automáticamente es que la variable idioma sera enviada como un array, es decir, idioma[0]=X0&idioma[1]=X1&idioma[2]=X2 y así sucesivamente.

Error:

Dentro de POST, las variables "idioma[]", "leido[]" y "escrito[]" no existen, pero si las "idioma", "leido" y "escrito" y el tipo de dato de estas sera un arreglo (array).

Solución:

<?php
echo "idioma[]: " . var_export($_POST["idioma"], true);
echo "<br>";
echo "leido[]: " . var_export($_POST["leido"], true);
echo "<br>";    
echo "escrito[]: " . var_export($_POST["escrito"], true);
?>

Demo aquí

0

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.