Take input from HTML form into Javascript?

Question

I am trying to make a website that calculates a delivery based on zip code. Is the best way to get data from the HTML form into JavaScript? I want it to do take the user's zip code and alert the user what the calculated fee would be. Can somebody provide some insight on how to do this. Here's my code:

 <h3><i>Begin by entering your requested order below</i><h3> <form action="#" method="post" id="delInfo"> Zip Code:<br> <input type="text" name="zipcode" id="zipcode"><br> <p><i>Delivery fee will be calculated based on zip code</i><p> First Name:<br> <input type="text" name="firstname" id="firstname"></br> Last Name:<br> <input type="text" name="streetaddress" id="lastname"></br> Street Address:<br> <input type="text" name="zipcode" id="address"></br> Email Address:<br> <input type="text" name="email"></br> <input type="submit" value="Submit"> </form> <script> function newDel() { 'use strict'; var zip = document.getElementById('zipcode'); var firstname = document.getElementById('firstname'); var lastname = document.getElementById('lastname'); var street address = document.getElementById('address'); var email = document.getElementById('emailaddress'); } function zipCalc(zip) { if zip == 32231{ alert("your fee added delivery fee will be 2 dollars.") } } </body> </html> 

Answer 1

As epascarello vaguely hinted, you would probably need to communicate with the delivery company's API in order to get realistic prices. If you're going to charge based on zip code as you've implied, then what you're working up should work. That said, let's talk JavaScript!

---

First, document.getElementById() returns the Document Object Model (DOM) element. You need to access its value property to get the value in the textbox, like this:

var zipElement = document.getElementById("zipcode");
var zipVal = zipElement.value;

You can do that in one line like this, if you don't need the reference to the element after that:

var zipVal = document.getElementById("zipcode").value;

if statements should have parentheses around the condition:

if (zipVal == 32231) {
    alert("Delivery fee will be 2 dollars.")
}

Now you need to add a listener to your button to call your JavaScript function. I moved your javascript above the form because the code has to exist before you assign the onClick function!

Add onClick="newDel(); To prevent the form from submitting if there is a validation error (say you want them to fill out Zip Code, and they don't), then you can return false; in the newDel() function.

  <script> /*I moved your javascript above the form because the code has to exist before you assign the onClick function! */ function newDel() { var zipVal = document.getElementById('zipcode').value; var firstname = document.getElementById('firstname'); var lastname = document.getElementById('lastname'); var streetAddress = document.getElementById('address'); var email = document.getElementById('emailaddress'); if(zipVal == ""){ alert("Please provide a zip code."); return false; } else { //Now call your zipCalc() function: zipCalc(zipVal); } } function zipCalc(zip) { if (zip == 32231) { alert("Delivery fee will be 2 dollars."); } } </script> <form action="#" method="post" id="delInfo"> Zip Code:<br> <input type="text" name="zipcode" id="zipcode"><br> <p><i>Delivery fee will be calculated based on zip code</i><p> First Name:<br> <input type="text" name="firstname" id="firstname"></br> Last Name:<br> <input type="text" name="streetaddress" id="lastname"></br> Street Address:<br> <input type="text" name="zipcode" id="address"></br> Email Address:<br> <input type="text" name="email"></br> <input type="submit" onClick="newDel()" value="Submit"> </form> 

(Side note: You can more easily work with DOM elements with JavaScript libraries like jQuery, which allows you to query for elements using their class, ID, element type, and many other selectors.)

Answer 2

I assume you want this calculation done before form submit so you will need to add an event listener to the zip input

 document.addEventListener('DOMContentLoaded', function(){ var zip = document.getElementById('zipcode'); // when the zip input value changes it will alert the user zip.addEventListener('change', zipCalc) var firstname = document.getElementById('firstname'); var lastname = document.getElementById('lastname'); var street_address = document.getElementById('address'); var email = document.getElementById('emailaddress'); function zipCalc(e) { zip_input_val = zip.value; if (zip_input_val == 32231) { alert("your fee added delivery fee will be 2 dollars.") } else { alert('We cant calculate your cost'); } } }) 

 <h3><i>Begin by entering your requested order below</i><h3> <form action="#" method="post" id="delInfo"> Zip Code:<br> <input type="text" name="zipcode" id="zipcode"><br> <p><i>Delivery fee will be calculated based on zip code</i><p> First Name:<br> <input type="text" name="firstname" id="firstname"><br/> Last Name:<br> <input type="text" name="streetaddress" id="lastname"><br/> Street Address:<br> <input type="text" name="zipcode" id="address"><br/> Email Address:<br> <input type="text" name="email"><br/> <input type="submit" value="Submit"> </form> 

Js Fiddle

Answer 3

You are close, you just need the value after you getElementByID

You can use:

function zipCalc(zip) {
    var zip = document.getElementById("zipcode").value; // this gets value from the form element with ID zipcode.
    if (zip == "32231"){
    alert("your fee added delivery fee will be 2 dollars.")
    }

}