Store HTML form to variable

Question

I have an HTML form and I'm wondering how I can set that info when submitted to the variables in my js file.

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

(Leaving out unimportant info)

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"
             };

I need to set the info from the form into these fields.

Answer 1

One of many ways to get values from html form tag to Javascript object.

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

First you should define a unique ID to each input you have, then get the value of this ID using javascript document.getElementById('ID').value or using jQuery $('ID').val().

Second part, you must match your number of inputs with your array.

Now you have an array of data, do what ever you want to do with it.

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

if you want to serialise data;

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

if you want to use formdata :

var fd = new FormData();

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

Answer 5

Using the DOM (Document Object Model) you can access the values of the HTML components.

For example, given your code, you can lookup the element by its "id":

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

... etc

You can also lookup the element by using the value of its "name" attribute:

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

Tip: You normally do this when the page is loaded (event "onload") and if the values are received by the same page, it needs to implement typically the scenario of the first load as well (where the values are null, not initialized).

Javascript references:

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

Answer 6

You can use JQuery .serializeArray() method to do so. like this:

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

You should get Key:Value pairs of all the text fields and their values by doing so.