将HTML表单存储到变量中

Question

我有一个HTML表单，我想知道当提交到js文件中的变量时如何设置该信息。

HTML

<input id="column-left" type="text" name="first-name" placeholder="First Name"/>
      <input id="column-right" type="text" name="last-name" placeholder="Last Name"/>
      <input id="input-field" maxlength="16" type="text" name="number" placeholder="Card Number"/>
      <input id="column-left" maxlength="4" type="text" name="expiry" placeholder="MM / YY"/>
      <input id="column-right" maxlength="3" type="text" name="cvc" placeholder="CCV"/>

（省略重要信息）

JS

var order_info = {name: "your name", // your first and last name
              email: "[email protected]", // your email
              phone: "5555555555", // your phone number
              address1: "123 street lane", // your street address
              address2: "apartment 1", // leave blank if you dont have one
              zip_code: "00000", // your zip code
              city: "New York", // city
              state_code: "NY", // state code, if you dont know this then look it up son
              country: "USA" // only two options, "USA" or "CANADA"
             };

我需要将表单中的信息设置为这些字段。

Answer 1

看看FormData。当您想通过JavaScript代码从表单获取数据时，这非常有用。

Answer 2

首先，您应该为每个输入定义唯一的ID，然后使用javascript document.getElementById('ID').value或jQuery $('ID').val()获取此ID的值。

第二部分，您必须将输入的数量与数组匹配。

现在您有了一个数据数组，用它来做您想做的事。

document.getElementById("save").addEventListener("click", function() {
  var order_info = {
    firstName: document.getElementById('first-name').value, 
    lastName: document.getElementById('last-name').value, 
    number: document.getElementById('number').value, 
    expiry: document.getElementById('expiry').value, 
    cvc: document.getElementById('cvc').value, 
  };
  
  console.log(order_info);
});

<input id="first-name" type="text" name="first-name" placeholder="First Name"/>
<input id="last-name" type="text" name="last-name" placeholder="Last Name"/>
<input id="number" maxlength="16" type="text" name="number" placeholder="Card Number"/>
<input id="expiry" maxlength="4" type="text" name="expiry" placeholder="MM / YY"/>
<input id="cvc" maxlength="3" type="text" name="cvc" placeholder="CCV"/>

<button id="save">Save Data</button>

Answer 3

如果要序列化数据；

var order_info = $('form').serializeArray();

如果您想使用formdata：

var fd = new FormData();

var order_info = $('form').serializeArray();
$.each(order_info,function(key,input){
      fd.append(input.name,input.value);
 });

Answer 4

从html表单标签获取值到Javascript对象的多种方法之一。

document.querySelector("#myForm").addEventListener("keyup", function(){
    var data = {};
    var inputs = document.querySelectorAll('input');
    inputs.forEach(input => {
      data[input.name] = input.value;
    });
    document.querySelector("#text").innerText = JSON.stringify(data); 
}); 

<form id="myForm">
<input value="Niklesh" type="text" name="first_name" placeholder="First Name"/>
<input value="Raut" type="text" name="last_name" placeholder="First Name"/>
<input value="" type="text" name="email" placeholder="Email"/>
<div id='text'></div>
</form>

Answer 5

HTML：在每个字段中，ID必须唯一。这样我们就可以使用javascript

获取特定字段的数据

<input id="fname" type="text" name="first-name" value="sourav" placeholder="First Name"/>
      <input id="lname" type="text" name="last-name" value="singh" placeholder="Last Name"/>
      <input id="card" maxlength="16" type="text" name="number" value="1234567890" placeholder="Card Number"/>
      <input id="expire" maxlength="4" type="text" name="expiry" value="08/12" placeholder="MM / YY"/>
      <input id="cvc" maxlength="3" type="text" name="cvc" value="111" placeholder="CCV"/>

Javascript：通过唯一ID获取数据，并将其放入单个变量，然后将整个变量放入对象中

var fname = document.getElementById("fname").value;
var lname =  document.getElementById("lname").value;
var card =  document.getElementById("card").value;
var expire =  document.getElementById("expire").value;
var cvc =  document.getElementById("cvc").value;

var order_info = {
  fname: fname,
  lname: lname,
  card: card,
  expire: expire,
  cvc: cvc
}
console.log(order_info);

In order_info现在是一个对象。