时间戳

首页 > 解决方案 > 将 HTML 表单存储到变量

javascript - 将 HTML 表单存储到变量

问题描述

我有一个 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"
             };

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

标签： javascripthtml

解决方案

将值从 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>

推荐阅读