将 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: "your@email.com", // 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

从 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); 
});
document.querySelector("#myForm").dispatchEvent(new Event('keyup'));

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

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 ? fname : '',
      lname: lname ? lname : '',
      card: card ? card : '',
      expire: expire ? expire : '',
      cvc: cvc ? cvc: ''
    }
    console.log(order_info);

<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="" 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"/>

Answer 3

首先您应该为您拥有的每个输入定义一个唯一 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 4

如果你想序列化数据；

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

如果你想使用表单数据：

var fd = new FormData();

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

Answer 5

使用 DOM（文档对象模型），您可以访问 HTML 组件的值。

例如，给定您的代码，您可以通过其“id”查找元素：

var lastname = document.getElementById("column-right");
var cardnumber = document.getElementById("input-field");

...等

您还可以使用其“名称”属性的值来查找该元素：

var lastname = document.getElementsByName("last-name");
var cardnumber = document.getElementsByName("number");

提示：您通常在页面加载时执行此操作（事件“onload”）并且如果同一页面接收到值，则通常还需要实现第一次加载的场景（其中值为空，未初始化）。

Javascript 参考：

https://www.w3schools.com/jsref/met_doc_getelementsbyname.asp https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Answer 6

您可以使用 JQuery .serializeArray() 方法来执行此操作。 像这样：

    var x = $("form").serializeArray();

您应该通过这样做获得所有文本字段及其值的 Key:Value 对。