2010-12-13 19 views
30
function getInputElements() { 
    var inputs = document.getElementsByTagName("input"); 
} 

El código anterior obtiene todos los elementos input en una página que tiene más de un formulario. ¿Cómo obtengo los elementos input de un formulario particular usando JavaScript plano?obtener todos los elementos de un formulario particular

Respuesta

11
document.forms["form_name"].getElementsByTagName("input"); 
+36

mientras no haya selectas o áreas de texto ;-) – Gurnard

+0

¿Se puede mostrar en una aplicación de uso de mayúsculas y minúsculas con varias entradas con los valores que está captando? –

+0

Prefiero 'document.forms [" form_name "]. GetElementByClassName (" myClass ")' –

3
var inputs = document.getElementById("formId").getElementsByTagName("input"); 
var inputs = document.forms[1].getElementsByTagName("input"); 
0

¿Cómo le gustaría diferenciar entre las formas? Se pueden utilizar diferentes identificadores, y luego utilizar esta función:

function getInputElements(formId) { 
    var form = document.getElementById(formId); 
    if (form === null) { 
     return null; 
    } 
    return form.getElementsByTagName('input'); 
} 
79
document.getElementById("someFormId").elements; 

Esta colección también contendrá <select> elementos, pero es probable que desee.

+0

Parece que document.getElementById ("someFormId") también funciona. ¿Alguna razón en particular para agregar elementos al final? – Andrew

+2

@Andrew: Mi intención era que "someFormId" fuera el ID de un elemento '

', no una entrada. 'elements' es una propiedad de un elemento de formulario; es una colección de elementos dentro del formulario. Consulte https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.elements –

+1

> ok, entiendo qué es .elements. Entonces, ¿debería usarlo, si funciona incluso sin él? ¿Tal vez agregar elementos selecciona menos nodos y así obtienes un mejor rendimiento? – Andrew

7

También es posible utilizar este:

var user_name = document.forms[0].elements[0]; 
var user_email = document.forms[0].elements[1]; 
var user_message = document.forms[0].elements[2]; 

Todos los elementos de las formas se almacenan en una matriz por Javascript. Esto toma los elementos de la primera forma y almacena cada valor en una variable única.

13

Todos se están concentrando en la palabra 'obtener' en la pregunta. Pruebe la propiedad 'elementos' de cualquier formulario que sea una colección que pueda iterar, es decir, escriba su propia función 'obtener'.

Ejemplo:

function getFormElelemets(formName){ 
    var elements = document.forms[formName].elements; 
    for (i=0; i<elements.length; i++){ 
    some code... 
    } 
} 

Espero que ayude.

4

código sencillo formulario

<form id="myForm" name="myForm"> 
     <input type="text" name="User" value="Arsalan"/> 
     <input type="password" name="pass" value="123"/> 
     <input type="number" name="age" value="24"/> 
     <input type="text" name="email" value="[email protected]"/> 
     <textarea name="message">Enter Your Message Her</textarea> 

    </form> 

Código Javascript

//Assign Form by Id to a Variabe 
    var myForm = document.getElementById("myForm"); 
    //Extract Each Element Value 
    for (var i = 0; i < myForm.elements.length; i++) { 
    console.log(myForm.elements[i].value); 
    } 

jsFiddle: http://jsfiddle.net/rng0hpss/

+0

Creo que esto devolverá divs, tramos también ... – Stranger

+0

devolverá [array of 'input' elements] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements), excepto 'type =" image "' – Mike

3

Utilice esta

var theForm = document.forms['formname'] 
[].slice.call(theForm).forEach(function (el, i) { 
    console.log(el.value); 
}); 

El está a favor de lo particular elemento de forma. Es mejor usar esto que el bucle foreach, ya que el bucle foreach también devuelve una función como uno de los elementos. Sin embargo, esto solo devuelve los elementos DOM del formulario.

1

Si tiene una referencia a cualquier campo en el formulario o un evento, entonces no necesita buscar explícitamente el formulario ya que cada campo de formulario tiene un atributo form que apunta a su forma padre.

Si tiene un evento, entonces contendrá un atributo target que apuntará al campo de formulario que lo activó, lo que significa que puede acceder al formulario a través del myEvent.target.form.

Aquí hay un ejemplo sin ningún código de búsqueda de formulario.

<html> 
<body> 
    <form name="frm"> 
     <input type="text" name="login"><br/> 
     <input type="password" name="password"><br/> 
     <button type="submit" onclick="doLogin()">Login</button> 
    </form> 
    <script> 
     function doLogin(e) { 
      e = e || window.event; 
      e.preventDefault(); 
      var form = e.target.form; 
      alert("user:" + form.login.value + " password:" + form.password.value); 
     } 
    </script> 
</body> 
</html> 

Si tiene varias formas en la página que sigue no es necesario etiquetar por su nombre o ID, debido a que siempre obtendrá la instancia forma correcta a través del evento o por medio de una referencia a una campo.

Cuestiones relacionadas