Foros Club Delphi

Foros Club Delphi (https://www.clubdelphi.com/foros/index.php)
-   HTML, Javascript y otros (https://www.clubdelphi.com/foros/forumdisplay.php?f=38)
-   -   Crear elementos de formulario html dinámicamente con javascript (https://www.clubdelphi.com/foros/showthread.php?t=82366)

jandroruiz 28-02-2013 15:44:05

Crear elementos de formulario html dinámicamente con javascript
 
Hola a todos.

Digamos que tengo algo así:

Código:

<label>Fecha de nacimiento</label><br><br>
<label>D&iacute;a</label>
<input type="number" max="31" min="1" step="1" name="dia_0" size="2">
<label>Mes</label>
<input type="number" max="12" min="1" step="1" name="mes_0" size="2">
<label>A&ntilde;o</label>
<input type="number" max="2012" min="1913" step="1" name="anyo_0" size="2"><br><hr/>

<input type="submit" value="Enviar datos"/>

Querría saber cómo puedo crear estas mismas lineas cuando pulse un button. Si lo pulso 2 veces, que me salgan estos mismos campos dos veces y que pueda seguir pulsando el button "Enviar datos" para procesarlo con php. También, que cada nuevo campo "dia_x", "mes_x" y "anyo_x" se renombre y que la x se sustituya por 1,2,3, etc.

Muchas gracias

Un saludo

movorack 28-02-2013 17:06:21

Hola,

Te recomiendo un par de articulos que tratan el tema:

jandroruiz 28-02-2013 18:48:52

Gracias, movorack. En los enlaces he conseguido casi lo que quería. Sin embargo, hay una cosa que no consigo.

Tengo primeraPagina.html

Código:

<body>
        <script src="segundaPagina.js">
        </script>
               
        <form method="POST" action="procesar.php">
                <div id="insertar">
                        <input type="text" name="dia_0">
                </div>
                <input type="button" value="Add another text input" onClick="addInput('insertar');"><br><br>
                <input type="submit" value="Enviar datos">
        </form>               
               
</body>

segundaPagina.js

Código:

var counter = 1;
var limit = 5;
var contador = 1;
function addInput(divName)
{
    if (counter == limit) 
        {
        alert("You have reached the limit of adding " + counter + " inputs");
    }
    else
        {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<br><input type='text' name='dia_"+contador+"'>";
        document.getElementById(divName).appendChild(newdiv);
        counter++;
        contador++;
    }
}

Con estos dos archivos creo varios campos del formulario con éxito, pero cuando mando esta información a procesar.php

Código:

<?php
        $dia_0 = $_POST['dia_0'];
        $dia_1 = $_POST['dia_1'];
        $dia_2 = $_POST['dia_2'];
        $dia_3 = $_POST['dia_3'];
        $dia_4 = $_POST['dia_4'];
       
        echo $dia_0."<br>";
        echo $dia_1."<br>";
        echo $dia_2."<br>";
        echo $dia_3."<br>";
        echo $dia_4."<br>";
?>

Me sale esto:

Código:

Notice: Undefined index: dia_1 in C:\xampp\htdocs\html_js\procesar.php on line 3

Notice: Undefined index: dia_2 in C:\xampp\htdocs\html_js\procesar.php on line 4

Notice: Undefined index: dia_3 in C:\xampp\htdocs\html_js\procesar.php on line 5

Notice: Undefined index: dia_4 in C:\xampp\htdocs\html_js\procesar.php on line 6
5

¿En qué estoy fallando?

Muchas gracias

movorack 28-02-2013 19:44:44

1. Con las herramientas de desarrollador de tu navegador, revisa el html que te genera el javascript
2. En el PHP, revisa que llega por el POST.

jandroruiz 28-02-2013 20:09:51

No sé lo que he hecho, pero ahora sí me funciona. Gracias movorack.

Fer1027 23-07-2016 15:55:52

Crear elementos de formulario html dinámicamente con javascript
 
Yo tengo el codigo para crearlo, pero como puedo hacer un conteo de los que el usuario agrego? Antes de usar los datos con php? Alguien puede ayudar!

Ñuño Martínez 26-07-2016 11:56:51

Hola Fer1027. Como a todos los novatos, te emplazo a que leas nuestra Guía de estilo.

Respecto a tu pregunta, bastaría con tener una variable para ello, ir incrementándola y enviarla, por ejemplo, vía campo oculto (hiden).


La franja horaria es GMT +2. Ahora son las 23:27:00.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Traducción al castellano por el equipo de moderadores del Club Delphi