Pesquisa de site

javascript - Obtendo valores de formulários HTML

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

Isso está correto? Meu script recebe dois argumentos, um da caixa de texto e outro da caixa suspensa.

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

Resposta #1

Se você quiser recuperar os valores do formulário (tais como aqueles que seriam enviados usando um HTTP POST), você pode usar a classe FormData:

JavaScript

document.getElementById("myForm").addEventListener("submit", function (e) {
  e.preventDefault();

  var formData = new FormData(form);
  // output as an object
  console.log(Object.fromEntries(formData));

  // ...or iterate through the name-value pairs
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }
});

Exemplo: https://codepen.io/kevinfarrugia/pen/Wommgd?editors=1111

Alternativamente, você poderia usar as opções abaixo menos recomendadas:

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

serialize(document.forms[0]);

jQuery

$("form").serializeArray()

Resposta #2

HTML :

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

JS :

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

Resposta #3

Eu acho que esta é a solução mais elegante

function handleSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  const formProps = Object.fromEntries(formData);
}

Resposta #4

Aqui está um exemplo do 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.

Resposta #5

document.forms conterá um array de formulários na sua página. Você pode percorrer esses formulários para encontrar o formulário específico 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 possui um array de elementos pelo qual você pode percorrer para encontrar os dados que deseja. Você também deve ser capaz de acessá-los pelo nome.

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

Resposta #6

Este é um exemplo desenvolvido de https://stackoverflow.com/a/41262933/2464828

Considerar

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

Vamos assumir que queremos recuperar a entrada de nome formula. Isso pode ser feito passando o event no campo onsubmit. Podemos então usar FormData para recuperar os valores deste formulário exato referenciando o objeto SubmitEvent.

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

O código JavaScript acima então imprimirá o valor da entrada no console.

Se você quiser iterar os valores, ou seja, obter todos os valores, então veja https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

Resposta #7

Minha opinião aqui, usando form.elements, que permite consultar cada campo pelo seu name, não apenas por iteração:

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

Resposta #8

Uma linha para ES6

getFormData = (selector) => Object.fromEntries(new FormData(document.querySelector(selector)))

console.log('Output of getFormData:')
console.log(getFormData('#myTargetForm'))
<!DOCTYPE html>
<html>
<body>

<h2>Get Form Data as Javascript Object</h2>

<form id="myTargetForm">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 
</body>
</html>

Defina esta função no seu Javascript:

getFormData = (selector) => Object.fromEntries(new FormData(document.querySelector(selector)))

Então basta chamar com qualquer seletor, por exemplo: getFormData('#myTargetForm')

Artigos relacionados