How do I use Javascript, not jQuery, to generate a JSON list from HTML form data?

Question

Sorry if questions like this get really annoying; I've tried to figure this out without bothering anyone, but I'm a beginner and I'm totally stumped. Here's what I have so far. I want to pull data from the form called "paymentform" and generate a JSON list that I can post in a REST call. My boss wants me to do this specifically with JavaScript rather than jQuery. How would I do that?

function toggleVisibility(id) {
  var e = document.getElementById(id);
  if (id == "creditCard") {
    document.getElementById("creditCard").checked = true;
    document.getElementById("eCheck").checked = false;
    if (document.getElementById("cardinfo").style.display == "none") {
      document.getElementById("cardinfo").style.display = "block";
      document.getElementById("bankinfo").style.display = "none";
      document.getElementById("cardnumberid").setAttribute("required", true);
      document.getElementById("expdateid").setAttribute("required", true);
      document.getElementById("cvvnumberid").setAttribute("required", true);
      document.getElementById("accountnameid").removeAttribute("required");
      document.getElementById("routingnumberid").removeAttribute("required");
      document.getElementById("banknameid").removeAttribute("required");
      document.getElementById("accountnumberid").removeAttribute("required");
    }
  }
  if (id == "eCheck") {
    document.getElementById("creditCard").checked = false;
    document.getElementById("eCheck").checked = true;
    if (document.getElementById("bankinfo").style.display == "none") {
      document.getElementById("cardinfo").style.display = "none";
      document.getElementById("bankinfo").style.display = "block";
      document.getElementById("cardnumberid").removeAttribute("required");
      document.getElementById("expdateid").removeAttribute("required");
      document.getElementById("cvvnumberid").removeAttribute("required");
      document.getElementById("accountnameid").setAttribute("required", true);
      document.getElementById("routingnumberid").setAttribute("required", true);
      document.getElementById("banknameid").setAttribute("required", true);
      document.getElementById("accountnumberid").setAttribute("required", true);
    }
  }
}

function setValue() {
  document.getElementById("creditCard").checked = true;
  document.getElementById("eCheck").checked = false;

  document.getElementById("cardinfo").style.display = "block";
  document.getElementById("bankinfo").style.display = "none";
  document.getElementById("cardnumberid").setAttribute("required", true);
  document.getElementById("expdateid").setAttribute("required", true);
  document.getElementById("cvvnumberid").setAttribute("required", true);
  document.getElementById("accountnameid").removeAttribute("required");
  document.getElementById("routingnumberid").removeAttribute("required");
  document.getElementById("banknameid").removeAttribute("required");
  document.getElementById("accountnumberid").removeAttribute("required");
}

function submitForm() {
  var myForm = document.getElementsByName("paymentform")[0];
}

body {
  margin-top: 100px;
  margin-left: 200px;
  margin-right: 350px;
  font-family: Helvetica;
  font-size: 90%;
}
h1 {
  font-family: Helvetica;
  font-size: 150%;
}
h2 {
  font-family: Helvetica;
  font-size: 110%;
}
p {
  font-family: Helvetica;
}

<!DOCTYPE html>
<html>

<head>
  <title>Payment Information</title>
  <link rel="stylesheet" type="text/css" href="CreditCardAndECheckTest.css">
  <script src="CreditCardAndECheckTest.js"></script>
</head>

<body onload="setValue()">
  <h1>Payment Profile</h1>
  <hr>
  <p>Enter the information for each field listed below.</p>
  <h2>Billing Information</h2>
  <form name="paymentform" onsubmit="return window.submitForm()" method="post">
    First Name:
    <input type="text" name="firstname" required>&nbsp; &nbsp;&nbsp; &nbsp; Last Name:
    <input type="text" name="lastname" required>
    <br>
    <br>Company Name:
    <input size="83px" type="text" name="companyname" required>
    <br>
    <br>Address 1:
    <input size=T "30px" type="text" name="address1" required>&nbsp; &nbsp;&nbsp; &nbsp;
    <br>
    <br>Address 2:
    <input size="30px" type="text" name="address2" required>
    <br>
    <br>City:
    <input type="text" name="cityname" required>&nbsp; &nbsp;&nbsp; &nbsp; State/Province:
    <input type="text" name="statename" required>
    <br>
    <br>Zip/Postal Code:
    <input size="5px" type="text" name="zippostalcode" required>&nbsp; &nbsp; &nbsp; Country:
    <input type="text" name="country" required>
    <br>
    <br>Email:
    <input type="text" name="email" required>&nbsp; &nbsp; &nbsp; Phone:
    <input type="text" name="phonenumber" required>&nbsp; &nbsp; &nbsp; Fax:
    <input type="text" name="faxnumber">
    <br>
    <h2>Payment Information</h2>
    Payment Type &nbsp;
    <input id="creditCard" onclick="toggleVisibility('creditCard')" checked type="radio" />Credit Card &nbsp;
    <input id="eCheck" onclick="toggleVisibility('eCheck')" type="radio" />Bank Account
    <br>
    <br>
    <div id="cardinfo" style="display:block">
      Accepted Methods: American Express, Discover, JCB, Mastercard, Visa
      <br>
      <br>Card Number:
      <input id="cardnumberid" type="text" name="cardnumber" required>
      <br>
      <br>Expiration Date:
      <input id="expdateid" type="text" name="expdate" required>(mmyy)
      <br>
      <br>CVV (3-digit number on the back of the card, if applicable):
      <input id="cvvnumberid" type="text" name="cvvnumber" required>
    </div>
    <div id="bankinfo" style="display:none">
      Name on Account:
      <input id="accountnameid" size="30px" type="text" name="accountname" required>&nbsp; &nbsp; &nbsp; Account Type:
      <select>
        <option value="checking">Checking</option>
        <option value="savings">Savings</option>
        <option value="businesschecking">Business Checking</option>
      </select>
      <br>
      <br>9-digit Routing Number:
      <input id="routingnumberid" type="text" name="routingnumber" required>&nbsp; &nbsp; &nbsp; Account Number:
      <input id="accountnumberid" type="text" name="accountnumber" required>
      <br>
      <br>Bank Name:
      <input id="banknameid" size="30px" type="text" name="bankname" required>
    </div>
    <br>
    <center>
      <input type="submit" value="Submit">
    </center>
  </form>
</body>

</html>

@user2182349 thanks for the tip, I've been doing that but I'll take your advice and look into it again. While I'm at it, if anyone has any other answers I'd appreciate it! — Noam
– Noam, Commented Aug 6, 2015 at 1:00
Maybe your boss want to make you more familiar with javascript. You just need to use plain object with attributes. — Lin Yuan
– Lin Yuan, Commented Aug 6, 2015 at 1:13

JDillon522 · Accepted Answer · 2015-08-06 02:56:44Z

tl;dr: I've provided a jsBin with a working example of your code

So, first off, jQuery exists to normalize odd browser behavior (mostly combatting IE problems) and to provide shorthand ways of doing common things. Writing out document.getElementById() a bunch of times is both tiring and unreadable. I added this simple function to make that particular bit easier:

function byId(element) {
  return document.getElementById(element);
}

byId('firstname') // <input type="text" id="firstname" required>

I also changed all your name attributes to IDs. Calling getElementsByNames() is a bit wonky behavior so I personally would avoid it.

Finally, here is how to set the data to pass in a POST request (or whatever).

function submitForm() {
  var cardId = byId("cardinfo");
  var payment = {};
  var data = {};

  if (getCSS(cardId, 'display') == "block") {
    payment = {    
      num: byId("cardnumberid").value,
      exp: byId("expdateid").value,
      cvv: byId("cvvnumberid").value      
    };
  } else {
    payment = {
      accountName: byId("accountnameid").value,
      routingNum: byId("routingnumberid").value,
      bankName: byId("banknameid").value,
      accountNum: byId("accountnumberid").value
    };
  }

  data = {
    first: byId('firstname').value,
    last: byId('lastname').value,
    company: byId('companyname').value,
    addr1: byId('address1').value,
    addr2: byId('address1').value,
    city: byId('cityname').value,
    state: byId('statename').value,
    zip: byId('zippostalcode').value, 
    country: byId('country').value,
    email: byId('email').value,
    phone: byId('phonenumber').value, 
    fax: byId('faxnumber').value,
    payment: payment
  };


  data = JSON.stringify(data);
  console.log(data);  

  // Prevent the form from submitting and refreshing the page  
  return false;
}

You need to create the object you want to send one way or another and then you need to call JSON.stringify(objectName) on it. That will turn the object into a simple string. When you get data back from a request you'll often have to call JSON.parse(objectName) in order to manipulate the data.

Oh, extra credit:

Calling this doesnt work:

if (document.getElementById("bankinfo").style.display == "none") {...

document.getElementById().style only sets style. I created the following wee function to help:

function getCSS(element, attr) {
  return window.getComputedStyle(element).getPropertyValue(attr);
}

Take a look at MDN's documentation on getPropertyValue() for more info

Collectives™ on Stack Overflow

How do I use Javascript, not jQuery, to generate a JSON list from HTML form data?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related