Foros del Web » Programando para Internet » Javascript »

Formulario con un número de campos que se elige

Estas en el tema de Formulario con un número de campos que se elige en el foro de Javascript en Foros del Web. hola, la verdad es que no sé si este problema se resuelve mejor con Javascript, por eso pretendo que me asesores. Tengo un formulario para ...
  #1 (permalink)  
Antiguo 07/03/2012, 04:42
 
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 295
Antigüedad: 13 años, 6 meses
Puntos: 12
Formulario con un número de campos que se elige

hola, la verdad es que no sé si este problema se resuelve mejor con Javascript, por eso pretendo que me asesores.

Tengo un formulario para insertar datos en una bd. El caso es que quiero que el número de campos del formulario para insertar datos pueda variar. Pongo un ejemplo:

Nombre de la fiesta:
Fecha:
Lugar de la fiesta:
Nº de asistentes:

Estos cuatro campos son siempre iguales. Ahora, dependiendo del número de asistentes que se ponga en el número de asistentes aparecen más campos. Por ejemplo si inserto el número 3, seguidamente me cambia a lo siguiente:

Nombre asistente 1:
Nombre asistente 2:
Nombre asistente 3:


Alguien me puede orientar como lo puedo hacer???
He pensado que puede tener que ver el evento de que cuando cambie el texto del elemento del formulario del nº de asistentes tiene que mostrar más campos. Que esto sería Javascript.

Sin embargo, para crear el número de campos de manera dinámica a lo mejor se tiene que usar php. La verdad que no tengo mucha idea, porque había pensado esconder los campos y al cambiar el número mostrarlos, pero el número puede ser muy variable, de 1 a 100 asistentes.

Gracias por la ayuda
  #2 (permalink)  
Antiguo 07/03/2012, 05:19
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 13 años, 8 meses
Puntos: 202
Respuesta: Formulario con un número de campos que se elige

Cita:
Iniciado por educacanis Ver Mensaje
Sin embargo, para crear el número de campos de manera dinámica a lo mejor se tiene que usar php.
Nono, con php cosas dinámicas no. El php se ejecuta del lado del servidor y es antes que el del cliente. Nada de dinámico.

Puedes crear los campos del formulario con php haciendo un simple $_POST y un bucle, pero claro, ya se recargaría la página.

Con php y sin recargar la página: Ajax.

Ahora bien... Es más sencillo usar Javascript.
Obtén el número de asistentes que escriban en el input y crea de forma dinámica (aquí sí) los campos.

Por opciones que no sean. Js sería lo más simple.
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #3 (permalink)  
Antiguo 07/03/2012, 06:01
 
Fecha de Ingreso: febrero-2012
Ubicación: En mi propio mundo
Mensajes: 73
Antigüedad: 12 años, 2 meses
Puntos: 23
Respuesta: Formulario con un número de campos que se elige

Como dice IEKK es mas sencillo con js.
Con php te tendrías que reenviar el formulario a si mismo indicando por post o get el num de asistente para que se dibujen los nuevos campos del form. El problema de esto es que después si quieres enviar todos los datos a otra página,por ejemplo la que te inserta los datos lo tendrias muy dificil pues el submit del form te lleva al form denuevo.
  #4 (permalink)  
Antiguo 07/03/2012, 06:39
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 13 años, 8 meses
Puntos: 202
Respuesta: Formulario con un número de campos que se elige

@Fierox.

No necesariamente. Se peude con php sin problemas con el $_POST poniendo varios submit en el formulario. La única pega es que recargará la página, por eso quizás sea preferible JS, pero sólo por eso.
No hay nada de malo en que hayan dos submit para un mismo formulario, no tienes que enviarlo a otra página ni nada de eso.
Con usar unos if para identificar cada botón hay.

No es nada complicado con php.
Código PHP:
<?php
if( isset($_POST['confirmar']))
{    
    
$rango_asistentes = array("rangos"=>
    array(
"rango_min"=>1"rango_max"=>20));
    
    if(
filter_var($_POST['num_asistentes'], FILTER_VALIDATE_INT$rango_asistentes))
        
$num_asistentes $_POST['num_asistentes'];
}
if( isset(
$_POST['submit']))
{
    
//Realizar el submit del formulario
    
echo 'Enviado';
}
?> 

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    Asistentes: <br />
    <input type="text" name="num_asistentes" value="<?php echo (isset($num_asistentes)) ? $num_asistentes 1;  ?>" />
    
    <br />
    <input type="submit" name="confirmar" value="Confirmar asistentes" />
    
    <?php
    
if( isset($num_asistentes) )
        for(
$i 0$i $num_asistentes$i++)    echo '<br />Nombre: <input type="text" name="asistentes[]" value="" />';
    
?>
    
    <br />
    <input type="submit" name="submit" value="Enviar" />
</form>
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #5 (permalink)  
Antiguo 07/03/2012, 06:48
Avatar de apaxito  
Fecha de Ingreso: febrero-2012
Ubicación: Sevilla
Mensajes: 47
Antigüedad: 12 años, 2 meses
Puntos: 10
Respuesta: Formulario con un número de campos que se elige

No solo se puede como bien dice IEKK, sino que es al introducir bucles if para cada submit puedes pasar todos los datos que necesites mediante input-hidden aprovechando POST y sin necesidad de tener que mandar parámetros por la URL con GET.
__________________
Sígueme en el Blog que llevo con otros dos compañeros sobre PHP, HTML5, JavaScript, JQuery y noticias tecnológicas... http://www.inix.es/docevoltios
  #6 (permalink)  
Antiguo 07/03/2012, 08:39
 
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 295
Antigüedad: 13 años, 6 meses
Puntos: 12
Respuesta: Formulario con un número de campos que se elige

Muchas gracias por las aportaciones, cuando lo termine de configurar os comento
  #7 (permalink)  
Antiguo 07/03/2012, 09:50
 
Fecha de Ingreso: febrero-2012
Ubicación: En mi propio mundo
Mensajes: 73
Antigüedad: 12 años, 2 meses
Puntos: 23
Respuesta: Formulario con un número de campos que se elige

No me habéis entendido.
Resumo mi post anterior en una sola palabra reutilización

Que te guste a ti incluir en un mismo php todo el código no implica que sea la mejor manera, la mas correcta o efectiva de hacerla, aunque sea la manera mas fácil.

Cada uno programa como quiere pero son pocos los que utilizan las "buenas formas".( y con esto no estoy diciendo que yo lo haga o que mi manera de programar sea la mas correcta)

Con "vuestro método" sea como fuere si quieres enviar datos a un .php que comprueba e inserta los datos en la base de datos y que ademas muestre los introducidos y muestre otro formulario con otros campos a rellenar y que este a su vez tenga otro paso de comprobación de los datos contra la db.
¿Como lo haces?.
  #8 (permalink)  
Antiguo 07/03/2012, 10:29
Avatar de charly_vc  
Fecha de Ingreso: enero-2012
Ubicación: GDL
Mensajes: 31
Antigüedad: 12 años, 3 meses
Puntos: 1
Respuesta: Formulario con un número de campos que se elige

Nononono, haber, no es necesario que se recargue la pagina cuando hagas el submit, eso lo puedes manipular con ajax facilmente y con jquery mas, un ejemplo sencillo de jquery para enviar tu formulario a un php que recoja los post sin recargar y haga los insert seria lo siguiente:

Código HTML:
<script language="javascript" src="libs/js/jquery.min1.6.2.js"></script>
<script>
$j_6 = jQuery.noConflict();
$j_6(document).ready(function() {
	$j_6('#form, #fat, #tuform').submit(function() {
        $j_6.ajax({
            type: 'POST',
            url: $j_6(this).attr('action'),
            data: $j_6(this).serialize(),
            success: function(data) {
					$j_6('#result').html(data);
            }
        })
        
        return false;
    });
	
   
});

function creaInput(numero){

/*Aqui va tu codigo para crear los input dinamicamente con javascript.
Lee un poco sobre como crear elementos o tags html con javascript, 
para esto se usa el metodo createElement yo tengo un codigo que le 
das a un boton crear y te agrega a una tabla una estructura de <tr>,<td> e inputs, 
con su respectivo boton de eliminar, lo mejor seria usar un boton para ir agregando
 inputs con su respectivo boton de eliminar y te quitas de broncas de un textbox 
pero si lo quieres de esa forma entonces tendrias que mandar llamar esta funcion 
con el evento onKeyUp de tu textbox como se muestra mas abajo*/

}
</script>
<div id="result"></div>
<form action="insert.php" id="tuform" name="tuform">
.
.
.
<input type="text" id="numeroAsistentes" onKeyUp="creaInput(this.value); return false;"/>

</form> 
Te recomiendo que leas un poco de como usar el Framework JQuery, no creo que te sea dificil, ya que hay bastante documentacion sobre este Framework
  #9 (permalink)  
Antiguo 07/03/2012, 10:40
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 13 años, 8 meses
Puntos: 202
Respuesta: Formulario con un número de campos que se elige

Cita:
Iniciado por Fierox Ver Mensaje
No me habéis entendido.
Resumo mi post anterior en una sola palabra reutilización

Que te guste a ti incluir en un mismo php todo el código no implica que sea la mejor manera, la mas correcta o efectiva de hacerla, aunque sea la manera mas fácil.
¿Donde puse que me gustase más esa forma o que fuese la mejor? Porque anteriormente dije que creía que era mejor con JS.
Me siento incomprendido, creo que me expreso bien.

Cita:
Iniciado por Fierox Ver Mensaje
Cada uno programa como quiere pero son pocos los que utilizan las "buenas formas".( y con esto no estoy diciendo que yo lo haga o que mi manera de programar sea la mas correcta)
Por supuesto, cada cual programa a su manera, las hay mejores y las hay peores.
Que yo ponga ese ejemplo no significa que programe así, sólo indiqué la forma de hacerlo con varios submit ya que este foro es de PHP.
De hecho YO perfiero php orientado a objetos.

Cita:
Iniciado por Fierox Ver Mensaje
Con "vuestro método" sea como fuere si quieres enviar datos a un .php que comprueba e inserta los datos en la base de datos y que ademas muestre los introducidos y muestre otro formulario con otros campos a rellenar y que este a su vez tenga otro paso de comprobación de los datos contra la db.
¿Como lo haces?.
No es mi método. Si preguntas como se puede hacer eso usando el ejemplo que puse antes es más de lo mismo. Dependiendo del $_POST haces una cosa u otra. De hecho no hay mucho que explicar ahí.
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #10 (permalink)  
Antiguo 07/03/2012, 10:46
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 13 años, 8 meses
Puntos: 202
Respuesta: Formulario con un número de campos que se elige

por ejemplo charly_vc prefiere hacerlo con Ajax usando jquery.
Yo no soy amigo de los Frameworks salvo que ya se estén usando en varias cosas. (para gustos colores)
¿Para que usar Ajax con jquery pudiendo hacerlo en un par de líneas?

Esto es un enlace de emprear que colocó hace poco.
Script (1,7 kb) para cargar con ajax que tiene en cuenta la chaché y todo.
http://foros.emprear.com/ajax/html-css-js-ajax/

Y por cierto lo de Ajax lo dije por si quería usar PHP si o si sin recargar, pero para crear dinámicamente unos inputs text no hace falta tanto jaleo.
En Js document.createElement() y con Jquery bastaría un .append()
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #11 (permalink)  
Antiguo 07/03/2012, 10:58
Avatar de charly_vc  
Fecha de Ingreso: enero-2012
Ubicación: GDL
Mensajes: 31
Antigüedad: 12 años, 3 meses
Puntos: 1
Respuesta: Formulario con un número de campos que se elige

Cita:
Iniciado por IEKK Ver Mensaje
por ejemplo charly_vc prefiere hacerlo con Ajax usando jquery.
Yo no soy amigo de los Frameworks salvo que ya se estén usando en varias cosas. (para gustos colores)
¿Para que usar Ajax con jquery pudiendo hacerlo en un par de líneas?

Esto es un enlace de [URL="http://www.forosdelweb.com/miembros/emprear/"]emprear[/URL] que colocó hace poco.
Script (1,7 kb) para cargar con ajax que tiene en cuenta la chaché y todo.
[URL="http://foros.emprear.com/ajax/html-css-js-ajax/"]http://foros.emprear.com/ajax/html-css-js-ajax/[/URL]

Y por cierto lo de Ajax lo dije por si quería usar PHP si o si sin recargar, pero para crear dinámicamente unos inputs text no hace falta tanto jaleo.
En Js document.createElement() y con Jquery bastaría un .append()
Si yo utilizo jquery es por todos las opciones que te da este Framework, es cierto, es mas pesado que este codigo que nos pasas, pero este codigo no te da lo mismo que te brinda jquery, para esto tendrias que reinventar la rueda para hacer varias cosas. Lo del append y el de createElement, eso yo lo uso de esta forma porque lei en un post que lo que podemos hacer nosotros sin usar jquery, es mejor hacerlo con javascript puro, ya que esto va haciendo un poco mas lenta la pagina. La vdd no se que tan cierto sea, pero asi es como lo he hecho yo y no digo que lo hagan como yo lo hago, solo lo comento para ayudar y para que el que tenga las dudas de como hacer las cosas decida cual sea la mejor o la mas sencilla de hacerlo.

Etiquetas: campos, elige, formulario, variables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:12.