JavaScript-Getting HTML form values

Question

JavaScript-Getting HTML form values

Como posso obter o valor de um formulário HTML para passar para JavaScript?

Isto está correcto? O meu guião leva dois argumentos, um da caixa de texto, outro da caixa de correio.

<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>

51

html javascript

Author: Matthias Braun, 2010-08-23

Source

6 answers

Documento.os formulários conterão um array dos formulários em sua página. Você pode percorrer estes formulários para encontrar a forma específica que deseja.

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 formulário tem um array de elementos que você pode então loop através para encontrar os dados que você quer. Você também deve ser capaz de acessá-los pelo nome

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

22

Author: Codeacula, 2015-03-14 23:20:15

Se quiser obter os valores do formulário (como os que seriam enviados através de uma publicação HTTP), pode usar

JavaScript

new FormData(document.querySelector('form'))

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

serialize(document.forms[0]);

JQuery

$("form").serializeArray()

21

Author: Kevin Farrugia, 2016-12-21 12:33:45

Aqui está um exemplo 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);
}

A demonstração pode ser encontrada aqui .

12

Author: Tran Nguyen Nhat Thuy, 2016-08-07 05:55:01

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

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

1

Author: Randhawa, 2017-12-13 04:59:22

Vários serializadores de formulários fáceis de usar com boa documentação.

Na ordem das Estrelas de Github,

0

Author: Atav32, 2018-03-26 19:11:52

score 66 · Accepted Answer

HTML:

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

JS:

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