Como obtener valores de un formulario con Javascript

Detalles: Por Juan Padial; En Programación; Visto: 24150

Tras leer el anterior post Como usar getElementById para obtener elementos de un formulario veamos como se obtiene los valores de los campos del formulario con Javascript utilizando el objeto document.forms. Este objeto contendrá la colección de todos los formularios disponibles en la página web. Aunque este método de trabajo con formularios es a menudo desconocido, es sin duda el mejor cuándo existen varios formularios en una misma página y a medida que el script se va complicando. Además, al ser un objeto, el método de elección si se adopta un estilo de programación orientada a objetos.

Para seleccionar un formulario en concreto de los que contenga el objeto document.forms debemos especificar el número del índice que ocupa el formulario en el objeto:

var oForm = document.forms[indice];

La anterior notación puede ser muy útil, como en el caso del ejemplo dejado al final de este post. Pero puede que sea más útil acceder a un formulario a través de su nombre (valor del atributo name del elemento <form>):

var oForm = document.forms["nombre_formulario"];

Con cualquiera de estas dos opciones, contaremos con la variable oForm que contiene todos los datos del formulario seleccionado.

Obtener el valor de un campo de texto (input type text)

Primero debemos obtener la referencia al input tipo text para lo cual podemos usar:

var oText = oForm.elements["nombre_input_text"];
//o a través de su posición en el array oForm.elements[]
var oText  = oForm.elements[índice];

Ahora nos será fácil obtener el valor del campo de texto llamado "input_text_name" usando:

var valor_text = oText.value;

Por ejemplo, si tenemos un campo de texto para que el usuario introduzca su email:

<input id="us_email" type="text" name="email" size="30" maxlength="50" />

Podemos acceder al email a través de:

var email = oForm.elements["email"].value;

Obtener el valor de un textarea

La sintaxis es similar a la usada anteriormente para un campo de texto.

Referencia al textarea:

var oTextarea = oForm.elements["nombre_textarea"];
//o a través de su posición en el array oForm.elements[]
var oTextarea = oForm.elements[índice];

Valor del textarea:

var valor_textarea = oTextarea.value;

Ejemplo, si tenemos el siguiente textarea:

<textarea id="texta_intereses" name="intereses" rows="10" cols="40"></textarea>

Podemos acceder a ella del siguiente modo:

var intereses = oForm.elements["intereses"].value;

Obtener el valor de un elemento hidden de un formulario

La sintaxis sigue siendo la misma, utilizando el objeto oForm y el nombre del input tipo hidden:

Referencia:

var oHidden = oForm.elements["nombre_elemento_hidden"];
//o a través de su posición en el array oForm.elements[]
var oHidden = oForm.elements[índice];

Valor:

var valor_hidden = oHidden.value;

Ejemplo, tenemos un input tipo hidden de nombre "id_seccion" y que contiene el valor de la sección de nuestro blog donde enviar una entrada: Podemos obtener el valor de este campo hidden del formulario con el siguiente código js:

oHidden = oForm.elements["id_seccion"].value;

Obtener el valor de una casilla de selección (input type checkbox)

Una vez más, la sintaxis es igual, utilizando el objeto oForm y el nombre del input tipo checkbox:

Referencia:

var oCheckbox = oForm.elements["nombre_input_checkbox"];
//o a través de su posición en el array oForm.elements[]
var oCheckbox= oForm.elements[índice];

Valor y comprobar si la casilla está seleccionada:

var valor_checkbox = oCheckbox.value;
//comprobar si está seleccionada
if(oCheckbox.checked){
  alert("seleccionada");
}

Vale también para input de tipo radio.

Ejemplo: obtener los valores de todos los campos de todos los formularios a la vez

En el siguiente ejemplo, muy sencillo y tonto pero que creo que es muy ilustrativo, se muestra la ventaja del uso del objeto document.forms. Con unas pocas líneas se recogen absolutamente todos los valores de todos los campos y de todos los formularios presentes en el documento HTML.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script>
</script>
</head>
<body>
  <p>Formulario 1</p>
  <form name="form1" method="post">
    <label for="texto">Introduzca un texto</label><br />
    <input name="texto" type="text" value="" /><br />
  </form>
  <p>Formulario 2</p>
  <form name="form2" method="post">
    <label for="texto">Introduzca un texto</label><br />
    <input name="texto" type="text" value="" /><br />
  </form>
  <p>Formulario 3</p>
  <form name="form3" method="post">
    <label for="texto">Introduzca un texto</label><br />
    <input name="texto" type="text" value="" /><br />
  </form>
  <p>Formulario 4</p>
  <form name="form4" method="post">
    <label for="texto">Introduzca un texto</label><br />
    <input name="texto" type="text" value="" /><br />
  </form>
  <a href="#" onclick=" printthevalues();return false;">Imprimir el valor de cada campo texto</a>
  <div id="log"></div>
<script>
function printthevalues(){
  //quitar valores impresos anteriormente
  var logdiv = document.getElementById("log");
  if( logdiv.innerHTML != '' ) {
    logdiv.innerHTML = '';
  }
  
  var oForm = document.forms;
  //loop sobre todos los formularios
  for(var i = 0; i < oForm.length; i = i + 1){
     logdiv.innerHTML += "<p>Valores formulario "+ i + "</p>";
     var elem = oForm[i].elements;
     //loop sobre todoslos elementos del formulario
     for(var j = 0; j < elem.length; j = j + 1){
       logdiv.innerHTML += "<p>"+elem[j].value+"</p>";
     }
  }
}
</script>
</body>
</html>

¿Preguntas? ¿Dudas? ¿Sugerencias? Soy todo oídos.

Creado el 13 05 2011 Actualizado el 25 04 2013