JavaScript: obtener valores de formulario HTML

112

¿Cómo puedo obtener el valor de un formulario HTML para pasarlo a JavaScript?

¿Es esto correcto? Mi guión toma dos argumentos, uno del cuadro de texto y otro del cuadro desplegable.

<body>
<form name="valform" action="" method="POST">

Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
Card Type: <select name="cardtype" id="cardtypeid">
  <option value="visa">Visa</option>
  <option value="mastercard">MasterCard</option>
  <option value="discover">Discover</option>
  <option value="amex">Amex</option>
  <option value="diners">Diners Club</option>
</select><br/>
<input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" />
</body>

javascript html usuario377419
fuente

2

¿Qué quiere decir exactamente con "valor de un formulario en código HTML"?

Pekka

7

la pregunta es bastante clara

laurentngu

1

@laurentngu, la pregunta es si se refiere a "un valor de un formulario HTML", es decir, a un valor de los muchos valores, o se refiere al " valor de todo el formulario HTML", es decir, todos los valores en un gran "serializado "value

bluejayke

La pregunta es clara ... pero claramente no tiene mucho sentido pasar el valor de un formulario.

Mateo

112

HTML:

<input type="text" name="name" id="uniqueID" value="value" />

JS:

var nameValue = document.getElementById("uniqueID").value;

user406632
fuente

7

@ shorty876: ¿Lo probaste tú mismo? o_0 Esa sería una buena forma de determinar si lo hizo bien o no.

Jeff Rupert

1

Sí, pero solo devuelve un verdadero / falso y no estoy seguro de cómo determinar si se llamó a la función. Así puedes ayudar.

user377419

Probé esto, pero nameValuees el valor predeterminado y no el que ingresó el usuario.

James T.

¿Por qué nombre = "nombre", y qué pasa si no tiene ninguna identificación?

bluejayke

65

Si desea recuperar los valores del formulario (como los que se enviarían mediante HTTP POST), puede utilizar:

JavaScript

const formData = new FormData(document.querySelector('form'))
for (var pair of formData.entries()) {
  // console.log(pair[0] + ': ' + pair[1]);
}

form-serialize ( https://code.google.com/archive/p/form-serialize/ )

serialize(document.forms[0]);

jQuery

$("form").serializeArray()

Kevin Farrugia
fuente

12

Su primer ejemplo en FormDatasí no hace nada ... aún necesita obtener los valores del formulario.

putvande

1

Creo que eso es incorrecto. Si al inicializar FormData especifica un elemento de formulario, recuperará correctamente los valores. codepen.io/kevinfarrugia/pen/Wommgd

Kevin Farrugia

2

Sin embargo, el objeto FormData no es en sí mismo los valores. Aún necesita llamar e iterar FormData.entries()para recuperar los valores. Además, FormData.entries()no está disponible en Safari, Explorer o Edge. developer.mozilla.org/en-US/docs/Web/API/FormData

dave

1

Correcto en lo que respecta a la compatibilidad del navegador, sin embargo, hay polyfills . En cuanto a iterar formData.entries(), depende de lo que estés buscando. Si está buscando el valor de un solo campo, puede usar formData.get(name). Referencia: get () .

Kevin Farrugia

Sí, no puedo FormDatagenerar nada en Chrome.

Atav32

33

Aquí hay un ejemplo de W3Schools:

function myFunction() {
    var elements = document.getElementById("myForm").elements;
    var obj ={};
    for(var i = 0 ; i < elements.length ; i++){
        var item = elements.item(i);
        obj[item.name] = item.value;
    }

    document.getElementById("demo").innerHTML = JSON.stringify(obj);
}

La demostración se puede encontrar aquí .

Tran Nguyen Nhat Thuy
fuente

12

Solo una advertencia, si alguien quiere obtener los valores seleccionados de otros tipos de entradas, como botones de radio o casillas de verificación, esto no hará lo que desea.

Sean

Tuve que cambiarme var obj = {};a var obj = [];.

Daniel Williams

@Sean, ¿por qué no funcionaría con botones de opción? También aparecen bajo la propiedad de elementos

bluejayke

@bluejayke El código recorrerá todas las entradas de los botones de opción y guardará el 'valor' del ÚLTIMO botón de opción obj, independientemente de cuál esté seleccionado. El problema se demuestra aquí (elija 'Opción 1') w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW

Sean

29

document.formscontendrá una variedad de formularios en su página. Puede recorrer estos formularios para encontrar el formulario específico que desee.

var form = false;
var length = document.forms.length;
for(var i = 0; i < length; i++) {
    if(form.id == "wanted_id") {
        form = document.forms[i];
    }
}

Cada formulario tiene una matriz de elementos que luego puede recorrer para encontrar los datos que desea. También debería poder acceder a ellos por su nombre

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);

Codeacula
fuente

¿Por qué no se mencionó primero el método más corto? = -D

Klesun

2

@ArturKlesun Supongo que es porque en ese momento, hace una década, comencé a escribir la respuesta, el OP no se había actualizado, así que escribí el bucle for para manejar la mayoría de las situaciones. Creo que en ese entonces también estaba asegurando la compatibilidad del navegador con IE7 porque no teníamos el panorama mucho mejor que tenemos hoy.

Codeacula

5

Mis 5 centavos aquí, el uso form.elementsque le permite consultar cada campo por suname , no solo por iteración:

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;

Klesun
fuente

2

Ampliando la idea de Atrur Klesun ... puedes acceder a él por su nombre si usas getElementById para llegar al formulario. En una línea:

document.getElementById('form_id').elements['select_name'].value;

Lo usé así para botones de radio y funcionó bien. Supongo que aquí pasa lo mismo.

Rusca8
fuente

2

Este es un ejemplo desarrollado de https://stackoverflow.com/a/41262933/2464828

Considerar

<form method="POST" enctype="multipart/form-data" onsubmit="return check(event)">
    <input name="formula">
</form>

Supongamos que queremos recuperar la entrada de name formula. Esto se puede hacer pasando eventel onsubmitcampo. Luego, podemos usar FormDatapara recuperar los valores de esta forma exacta haciendo referencia al SubmitEventobjeto.

const check = (e) => {
    const form = new FormData(e.target);
    const formula = form.get("formula");
    console.log(formula);
    return false
};

El código JavaScript anterior imprimirá el valor de la entrada en la consola.

Si desea iterar los valores, es decir, obtener todos los valores, consulte https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

jhaavist
fuente

¡Excelente!. Eso es exactamente lo que necesito. Gracias.

Dang Cong Duong

1

Varios serializadores de formularios fáciles de usar con buena documentación.

En orden de estrellas Github,

Atav32
fuente

¿Realmente necesitas una matriz completa solo para eso?

bluejayke

1

Intente cambiar el código de la siguiente manera:

<form
   onSubmit={e => {
     e.preventDefault();
     e.stopPropagation();

     const elements = Array.from(e.currentTarget) as HTMLInputElement[];

     const state = elements.reduce((acc, el) => {
       if (el.name) {
         acc[el.name] = el.value;
       }

       return acc;
     }, {});

     console.log(state); // {test: '123'}
   }}
>
   <input name='test' value='123' />
</form>

Максим Щирый
fuente

¡Gracias, tu código perfecto y funciona para mí!

LI HO TAN

0

Solución rápida para serializar un formulario sin bibliotecas

function serializeIt(form) {
  return (
    Array.apply(0, form.elements).map(x => 
      (
        (obj => 
          (
            x.type == "radio" ||
            x.type == "checkbox"
          ) ?
            x.checked ? 
              obj
            : 
              null
          :
            obj
        )(
          {
            [x.name]:x.value
          }
        )
      )
    ).filter(x => x)
  );
}

function whenSubmitted(e) {
  e.preventDefault()
  console.log(
    JSON.stringify(
      serializeIt(document.forms[0]),
      4, 4, 4
    )
  )
}

<form onsubmit="whenSubmitted(event)">
<input type=text name=hiThere value=nothing>
<input type=radio name=okRadioHere value=nothin>
<input type=radio name=okRadioHere1 value=nothinElse>
<input type=radio name=okRadioHere2 value=nothinStill>

<input type=checkbox name=justAcheckBox value=checkin>
<input type=checkbox name=justAcheckBox1 value=checkin1>
<input type=checkbox name=justAcheckBox2 value=checkin2>

<select name=selectingSomething>
<option value="hiThere">Hi</option>
<option value="hiThere1">Hi1</option>
<option value="hiThere2">Hi2</option>
<option value="hiThere3">Hi3</option>
</select>
<input type=submit value="click me!" name=subd>
</form>

Expandir fragmento

bluejayke
fuente

-1

<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;

Randhawa
fuente

JavaScript: obtener valores de formulario HTML

Respuestas: