Foros del Web » Programando para Internet » Javascript »

¿Cómo coger todos los values de un form a la vez y meterlos en un array?

 Estas en el tema de ¿Cómo coger todos los values de un form a la vez y meterlos en un array? en el foro de Javascript en Foros del Web. Pues eso, la pregunta es casi autoexplicativa. ¿Hay alguna forma de conseguir pasar todos los values de un formulario a una función que los capure ...
  #1 (permalink)  
Antiguo 24/05/2012, 13:12
 
Fecha de Ingreso: mayo-2012
Mensajes: 11
Antigüedad: 11 años, 11 meses
Puntos: 0
¿Cómo coger todos los values de un form a la vez y meterlos en un array?
Pues eso, la pregunta es casi autoexplicativa.

¿Hay alguna forma de conseguir pasar todos los values de un formulario a una función que los capure y los meta en un array?

Supongo que el truco está en saber acceder a los values del formulario, pero no lo consigo.

Intento un document.getElementById("formulario").value; dentro de un bucle.length pero no chuta. ¿Alguna solución?

Porfi, respuestas muy sencillas si se puede que soy un novatillo.

Gracias.
  #2 (permalink)  
Antiguo 24/05/2012, 13:17
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: ¿Cómo coger todos los values de un form a la vez y meterlos en un array?
con getElementsByTagName('input') obtienes la colección de elementos del form. recorres la colección con un bucle for y a cada vuelta ingresas el valor del elemento al array con la función push(), splice() o unshift()
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 24/05/2012, 13:37
 
Fecha de Ingreso: mayo-2012
Mensajes: 11
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: ¿Cómo coger todos los values de un form a la vez y meterlos en un array?
Muchas gracias IsaBelM, pero con esto solo consigo los elementos de tipo input, osea textboxes.

El problema es que en el formulario tengo de todo: select menus, radio buttons... con elementos tipo <option>.

Es cierto que podria hacer lo mismo que me has propuesto con los option pero de todos modos cuando imprimo no me da lo que he eintroducido en los values, si no [object NodeList].

Muchas gracias de todos modos, a ver si consigo una solución algo más completita, aunque de verdad de la buena que muchas gracias por la respuesta
  #4 (permalink)  
Antiguo 24/05/2012, 13:49
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: ¿Cómo coger todos los values de un form a la vez y meterlos en un array?
a una pregunta poco especifica, una respuesta global

por cierto, los radios son un tipo de input
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #5 (permalink)  
Antiguo 24/05/2012, 14:15
 
Fecha de Ingreso: mayo-2012
Mensajes: 11
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: ¿Cómo coger todos los values de un form a la vez y meterlos en un array?
jajaja, cierto IsaBelM, te paso el código y así concreto más.

Código HTML:
<form id="form" action="">

	<div id="div0">

		<h2>Base de Datos Caballos "H&Iacute;PICA JORSE"</h2>

		<div id="div1"><label>Foto:</label> 

			<img id="foto" src="" alt="click para cambiar" onclick="clicar(this.id); cambiarFoto(this.src)" /><br /><br />


			<label>Nombre:</label> 
			<input id="nombre" class="estilo" type="text" name="nombre" value="" onclick="clicar(this.id)" onfocus="entrarFoco(this.id)" onblur="salirFoco(this.id); revisarLetra(this.id)" /><br /><br />


			<label>Sexo:</label> 
			<input id="macho" name="sexo" type="radio" value="macho" /> Caballo 
			<input id="hembra" name="sexo" type="radio" value="hembra" /> Llegua<br /><br />


			<label>Edad:</label> 
			<input id="edad" class="estilo" type="text" name="edad" value="" onclick="clicar(this.id)" onfocus="entrarFoco(this.id)" onblur="salirFoco(this.id); revisarNumero(this.id)" /><br /><br />


			<label>Peso:</label> 
			<input id="peso" class="estilo" type="text" name="peso" value="" onclick="clicar(this.id)" onfocus="entrarFoco(this.id)" onblur="salirFoco(this.id); revisarNumero(this.id)" /><br /><br />


			<label>Raza:</label> 
			<select id="raza" class="estilo" name="raza">
				<option></option>
				<option id="arabe" name="raza" value="arabe">&Aacute;rabe</option>
				<option id="frison" name="raza" value="frison">Fris&oacute;n</option>
				<option id="mustang" name="raza" value="mustang">Mustang</option>
				<option id="espaniol" name="raza" value="espaniol">Espa&ntilde;ol</option>
				<option id="noruego" name="raza" value="noruego">Fiordo Noruego</option>
				<option id="hanoveriano" name="raza" value="hanoveriano">Hanoveriano</option>
			</select>

		</div>



		<div id="div2">

			<label>Capa:</label> 
			<select id="capa" class="estilo" name="capa" size="3">
				<option id="tordo" value="tordo">Tordo</option>
				<option id="castanio" value="castanio">Casta&ntilde;o</option>
				<option id="perla" value="perla">Perla</option>
				<option id="alazar" value="alazar">Alazar</option>
				<option id="negro" value="negro">Negro</option>
			</select><br /><br />


			<label>Temperamento:</label>
			<select id="temperamento" class="estilo" name="temperamento">
				<option></option>
				<option id="docil" value="docil">D&oacute;cil</option>
				<option id="nervioso" value="nervioso">Nervioso</option>
			</select><br /><br />


			<label>Disciplina 1:</label> 
			<select id="disciplina1" class="estilo" name="disciplina1">
				<option></option>
				<option id="salto" value="salto">Salto</option>
				<option id="tiro" value="tiro">Tiro</option>
			</select><br /><br />


			<label>Disciplina 2:</label> 
			<select id="disciplina2" class="estilo" name="disciplina2">
				<option></option>
				<option id="raid" value="raid">Raid</option>
				<option id="doma" value="doma">Doma</option>
				<option id="campo" value="campo">Campo</option>
			</select><br /><br />


			<label>Descripci&oacute;n:</label> 
			<textarea id="comentarios" class="estilo" name="comentarios" rows="7" cols="30" onclick="clicar(this.id)" onfocus="entrarFoco(this.id)" onblur="salirFoco(this.id); revisarLetra(this.id)">
			</textarea><br /><br />


			<label>Subtipo:</label> 
			<select id="subtipo" class="estilo" name="subtipo">
				<option></option>
				<option id="ligero" value="ligero">Ligero</option>
				<option id="pesado" value="pesado">Pesado</option>
			</select><br /><br />


			<input id="anterior" type="button" name="boton1" value="Anterior" onclick="atras()" />

			<input id="siguiente" type="button" name="boton2" value="Siguiente" onclick="nuevoCaballo()" />

			<input id="listar" type="button" name="boton3" value="Listar" onclick="imprimir()" />

		</div>

	</div>

</form>
  #6 (permalink)  
Antiguo 24/05/2012, 14:24
 
Fecha de Ingreso: mayo-2012
Mensajes: 11
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: ¿Cómo coger todos los values de un form a la vez y meterlos en un array?
Por cierto hacía lo siguiente y no me imprimía los values de los inputs del form.

Código PHP:

function nuevoCaballo()
{

    var largura=form.getElementsByTagName('input').length;
    var datos=form.getElementsByTagName('input').value;
    document.write(largura + "<br />");


    for(var k=0; k<largura; k++)
    {
        document.write(datos[k] + "<br />");
    }

} 
  #7 (permalink)  
Antiguo 24/05/2012, 15:07
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: ¿Cómo coger todos los values de un form a la vez y meterlos en un array?
Novatillo para preguntar, pero no tanto para las aplicaciones que querés hacer...
Así
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es-ar">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Contar elementos</title>
  6. <meta name="description" content="Contar elementos" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. .rojo{
  10. color: red;
  11. font-weight: bold;
  12. }
  13. /*]]>*/
  14. </style>
  15. <script type="text/javascript">
  16. //<![CDATA[
  17. var datos = "";
  18. function elementosForm() {
  19. var los_elementos=document.forms[0].elements;
  20. for (i=0; i<los_elementos.length; i++) {
  21. datos += los_elementos[i].tagName +'(' +los_elementos[i].name +')' +'- <b>Valor: <\/b><span class="rojo">' + los_elementos[i].value + '<\/span><br \/>';
  22. }
  23. document.getElementById("mensajes").innerHTML = datos;
  24. }
  25. //]]>
  26. </script>
  27. </head>
  28. <body onload="elementosForm();">
  29. <form id="form" action="#">
  30. <div id="div0">
  31. <h2>Base de Datos Caballos "HÍPICA JORSE"</h2>
  32. <div id="div1"><label>Foto:</label> <label>Nombre:</label> <input id="nombre" class="estilo" type="text" name="nombre" value="" onclick="clicar(this.id)" onfocus="entrarFoco(this.id)" onblur=
  33. "salirFoco(this.id); revisarLetra(this.id)" /><br />
  34. <br />
  35. <label>Sexo:</label> <input id="macho" name="sexo" type="radio" value="macho" /> Caballo <input id="hembra" name="sexo" type="radio" value="hembra" /> Llegua<br />
  36. <br />
  37. <label>Edad:</label> <input id="edad" class="estilo" type="text" name="edad" value="" onclick="clicar(this.id)" onfocus="entrarFoco(this.id)" onblur=
  38. "salirFoco(this.id); revisarNumero(this.id)" /><br />
  39. <br />
  40. <label>Peso:</label> <input id="peso" class="estilo" type="text" name="peso" value="" onclick="clicar(this.id)" onfocus="entrarFoco(this.id)" onblur=
  41. "salirFoco(this.id); revisarNumero(this.id)" /><br />
  42. <br />
  43. <label>Raza:</label> <select id="raza" class="estilo" name="raza">
  44. <option id="arabe" value="arabe">Árabe</option>
  45. <option id="frison" value="frison">Frisón</option>
  46. <option id="mustang" value="mustang">Mustang</option>
  47. <option id="espaniol" value="espaniol">Español</option>
  48. <option id="noruego" value="noruego">Fiordo Noruego</option>
  49. <option id="hanoveriano" value="hanoveriano">Hanoveriano</option>
  50. </select></div>
  51. <div id="div2"><label>Capa:</label> <select id="capa" class="estilo" name="capa" size="3">
  52. <option id="tordo" value="tordo">Tordo</option>
  53. <option id="castanio" value="castanio">Castaño</option>
  54. <option id="perla" value="perla">Perla</option>
  55. <option id="alazar" value="alazar">Alazar</option>
  56. <option id="negro" value="negro">Negro</option>
  57. </select><br />
  58. <br />
  59. <label>Temperamento:</label> <select id="temperamento" class="estilo" name="temperamento">
  60. <option id="docil" value="docil">Dócil</option>
  61. <option id="nervioso" value="nervioso">Nervioso</option>
  62. </select><br />
  63. <br />
  64. <label>Disciplina 1:</label> <select id="disciplina1" class="estilo" name="disciplina1">
  65. <option id="salto" value="salto">Salto</option>
  66. <option id="tiro" value="tiro">Tiro</option>
  67. </select><br />
  68. <br />
  69. <label>Disciplina 2:</label> <select id="disciplina2" class="estilo" name="disciplina2">
  70. <option id="raid" value="raid">Raid</option>
  71. <option id="doma" value="doma">Doma</option>
  72. <option id="campo" value="campo">Campo</option>
  73. </select><br />
  74. <br />
  75. <label>Descripción:</label> 
  76. <textarea id="comentarios" class="estilo" name="comentarios" rows="7" cols="30" onclick="clicar(this.id)" onfocus="entrarFoco(this.id)" onblur="salirFoco(this.id); revisarLetra(this.id)">
  77.  
  78. </textarea>
  79. <br />
  80. <br />
  81. <label>Subtipo:</label> <select id="subtipo" class="estilo" name="subtipo">
  82. <option id="ligero" value="ligero">Ligero</option>
  83. <option id="pesado" value="pesado">Pesado</option>
  84. </select><br />
  85. <br />
  86. <input id="anterior" type="button" name="boton1" value="Anterior" onclick="atras()" /> <input id="siguiente" type="button" name="boton2" value="Siguiente" onclick="nuevoCaballo()" /> <input id=
  87. "listar" type="button" name="boton3" value="Listar" onclick="imprimir()" /></div>
  88. </div>
  89. </form>
  90. <div id="mensajes"><!-- fix --></div>
  91. </body>
  92. </html>

La función está puesta onload, así que para verificar, andá cambiando los valores y recargá la página (ojo, botón recargar del navegador, sin ir de vuelta a la dirección)

Así como conseguis el tagName, el name, el value, podés acceder a otros atributos y propiedades.
a propósito, los option no tinene que tener definido un name, y no le veo la funcionalidad a los id en los mismos.
SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 24/05/2012, 15:46
 
Fecha de Ingreso: mayo-2012
Mensajes: 11
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: ¿Cómo coger todos los values de un form a la vez y meterlos en un array?
Jolin, muchísimas gracias.

Lo del name en los option no lo sabía y lo de las ids tiene otros propósitos, jejeje...

Voy a probarlo ahora mismo. Gracias de nuevo. Si no entiendo algo vuelvo por estos lares a dar la vara...
  #9 (permalink)  
Antiguo 24/05/2012, 16:00
 
Fecha de Ingreso: mayo-2012
Mensajes: 11
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: ¿Cómo coger todos los values de un form a la vez y meterlos en un array?
Wow, como mola emprear. Funcionar funciona, y muy bien, jeje.

Lo que no entiendo es para que sirve action="#".

Por cierto, una pregunta. Me suena que .elements es de solo lectura. ¿puedo meter los datos que consigo en esta función en un array?

Mejor lo pruebo, ¿no? :)

Gracias de nuevo.
  #10 (permalink)  
Antiguo 24/05/2012, 16:24
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: ¿Cómo coger todos los values de un form a la vez y meterlos en un array?
El action de un form, por standar no puede estar vacío, como estamos probando y no queremos que no procese nada a traves de otro archivo (un php por ejemplo), se completa con #, y sencillamente el submit no hace nada, incluso muchas veces nuestros forms no necesitan ejecutar ningun action, porque solo los manipulamos con javascript, o Ajax.

Si te fijás, de hecho
var los_elementos=document.forms[0].elements;
funciona como un array(), dónde cada indice [i], representa un elemento distinto. Además. elements, no representa simplemente "elementos" generícos del DOM, sino que se aplica específicamente a elementos de un form. Como podés ver dentro de tu form hay, divs, labels, etc, sin embargo var los_elementos los omite en su recorrido.
Si querés manipularlos y crear un nuevo array(), ya te lo señalo @isabelM, con push(), etc

Un detalle final
var los_elementos=document.forms[0].elements;
puede ser llamada también como
var los_elementos = document.getElementById('formu').elements;
siempre que el form tenga definido un id, lo cual te puede resultar útil si tu html tiene varios forms que analizar.

Y si, la verdad creo que a partir de ahora tendrías que experimentar bastante y sacar tus propias conclusiones

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #11 (permalink)  
Antiguo 24/05/2012, 17:07
Avatar de Pablo Ayala  
Fecha de Ingreso: septiembre-2005
Ubicación: Cancún, México
Mensajes: 231
Antigüedad: 18 años, 7 meses
Puntos: 28
Respuesta: ¿Cómo coger todos los values de un form a la vez y meterlos en un array?
se que estaran en contra, pero con jquery seria asi:

var datos = $("#id_de_tu_formulario").serialize();

y listo!

saludos
__________________
Atentamente,

Pablo Ayala.
Si vas a responder algo en el foro que sea con amabilidad.
  #12 (permalink)  
Antiguo 24/05/2012, 17:46
 
Fecha de Ingreso: mayo-2012
Mensajes: 11
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: ¿Cómo coger todos los values de un form a la vez y meterlos en un array?
Me ha quedado superclaro.

Ahora si que lo entiendo del todo. En serio. Muchas gracias a ambos.

Soy nuevo en este foro, pero la calidad y rapidez de sus respuestas me está dejando asombrado.

Me parece que me vais a ver mucho por aquí.

Etiquetas: formulario
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:19.