CODEWITHSUNDEEP
javascripthtmljsonforms
Noam
Noam

Reputation: 23

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

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>

Upvotes: 2

Views: 141

Answers (1)

JDillon522
JDillon522

Reputation: 19676

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

Upvotes: 1

Related Questions