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

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

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

Na ordem das estrelas do Github,

— Atav32
fonte

você realmente precisa de um array inteiro só para isso?

— bluejayke

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