JavaScript - Obtendo valores de formulário HTML

112

Como faço para que o valor de um formulário HTML passe para o JavaScript?

Isso está correto? Meu script usa 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>
javascript html user377419
fonte
2
O que você quer dizer exatamente com "valor de um formulário no código HTML"?
Pekka
7
a questão é bastante clara
laurentngu
1
@laurentngu a questão é que ele quer dizer "um valor de um formulário HTML", ou seja, um valor fora de muitos valores, ou que ele quer dizer o " valor de toda a forma HTML", ou seja, todos os valores em uma grande "serializado "valor
bluejayke
A questão é clara ... mas claramente não faz muito sentido passar o valor de um formulário.
Mateus

Respostas:

112

HTML:

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

JS:

var nameValue = document.getElementById("uniqueID").value;
user406632
fonte
7
@ shorty876: Você testou você mesmo? o_0 Essa seria uma boa maneira de determinar se você fez a coisa certa ou não.
Jeff Rupert
1
Sim, mas ele apenas retorna verdadeiro / falso e não tenho certeza de como determinar se a função foi mesmo chamada. Assim, você pode ajudar.
user377419
Tentei fazer isso, mas nameValueé o valor padrão e não o que o usuário inseriu.
James T.
porque nome = "nome", e se não tiver um ID?
bluejayke
65

Se desejar recuperar os valores do formulário (como aqueles que seriam enviados por meio de um HTTP POST), você pode usar:

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
fonte
12
Seu primeiro exemplo em FormDatasi não faz nada ... você ainda precisa obter os valores do formulário.
putvande
1
Eu acredito que isso está incorreto. Se, ao inicializar o FormData, você especificar um elemento do formulário, ele recuperará os valores corretamente. codepen.io/kevinfarrugia/pen/Wommgd
Kevin Farrugia
2
O objeto FormData não é ele mesmo os valores. Você ainda precisa chamar e iterar FormData.entries()para recuperar os valores. Além disso, FormData.entries()não está disponível no Safari, Explorer ou Edge. developer.mozilla.org/en-US/docs/Web/API/FormData
dave
1
Correto em relação à compatibilidade do navegador; no entanto, existem polyfills . Com relação à iteração formData.entries(), depende do que você está procurando. Se você estiver procurando o valor de um único campo, poderá usar formData.get(name). Referência: get () .
Kevin Farrugia
Sim, não consigo FormDataproduzir nada no Chrome.
Atav32
33

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

Tran Nguyen Nhat Thuy
fonte
12
Apenas um aviso, se alguém quiser obter os valores selecionados de outros tipos de entradas, como botões de rádio ou caixas de seleção, isso não fará o que você deseja.
Sean
Eu tive que mudar var obj = {};para var obj = [];.
Daniel Williams
@Sean por que não funcionaria com botões de opção? Eles aparecem na propriedade elements também
bluejayke
@bluejayke O código percorrerá todas as entradas do botão de opção e salvará o 'valor' do ÚLTIMO botão de opção obj, independentemente de qual for selecionado. O problema é demonstrado aqui (escolha 'Opção 1') w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW
Sean
29

document.formsconterá uma variedade de formulários em 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 uma matriz de elementos que 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);
Codeacula
fonte
Por que o método mais curto não foi mencionado primeiro? = -D
Klesun
2
@ArturKlesun Acho que é porque na época, uma década atrás, comecei a digitar a resposta, o OP não tinha sido atualizado, então escrevi o loop for para lidar com a maioria das situações. Acho que naquela época eu também estava garantindo a compatibilidade do navegador com o IE7 porque não tínhamos o cenário muito melhor que temos hoje.
Codeacula
5

Meus 5 centavos aqui, usando o form.elementsque permite consultar cada campo por elename , 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;
Klesun
fonte
2

Expandindo a ideia de Atrur Klesun ... você pode acessá-lo apenas pelo nome se usar getElementById para acessar o formulário. Em uma linha:

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

Eu usei assim para botões de rádio e funcionou bem. Eu acho que é o mesmo aqui.

Rusca8
fonte
2

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 supor que queremos recuperar a entrada de nome formula. Isso pode ser feito passando o eventem onsubmitcampo. Podemos então usar FormDatapara recuperar os valores desta forma exata referenciando o SubmitEventobjeto.

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

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

Se você deseja iterar os valores, ou seja, obter todos os valores, consulte https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

jhaavist
fonte
Ótimo!. É exatamente disso que preciso. Obrigado.
Dang Cong Duong
1

Tente alterar o código conforme abaixo:

<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>
Максим Щирый
fonte
Obrigado, seu código perfeito e funciona para mim!
LI HO TAN
0

Solução rápida para serializar um formulário sem nenhuma biblioteca

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 snippet

Bluejayke
fonte
-1 
<input type="text" id="note_text" />

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