Javascript is not passing in the values into my php code to run

Question

when i run the form and the sql using action="addCustomer.php" it works fine but when i am using the js the data is not passing through and i am not getting an error in the console and it says that it is picking up the variables in the timeline from the original page but the js is not? Can anyone see why?

I am using the following form:

  <form id="dataForm" method="GET">
  <div>
    <h2 id="formheader">Add Order Details:</h2>
    <label>First Name:</label>
    <input class="inputForm" id="inputFirstName" type="text" name="firstname">
  </div>
  <div>
    <label>Last Name:</label>
    <input class="inputForm" id="inputLastName"  type="text" name="lastname">
  </div>
  <div>
    <label>Address:  </label>
    <input class="inputForm" id="inputAdress" type="text" name="address">
  </div>
  <div>
    <label>Post Code:</label>
    <input class="inputForm" id="inputPostcode" type="text" name="postcode">
  </div>
  <div>
  <section class="inputForm">
  <label>Delievery Type:</label>
  <select name="deliverytype">
  <option ="3-5 Days">3-5 Days</option>
  <option ="Next Day">Next Day</option>
  </select> 
  </section> 
  <input type="hidden" id="calc" value="" name="calc">
  </div>
  <div id="theSubmit">
      <button id="checkoutButton">Submit</button>
    </div>
  </form>

and the following bit of js:

function addCustomer(){
  var xmlhttp = new XMLHttpRequest();
  var firstName = document.getElementById("inputFirstName").value;
  var lastName = document.getElementById("inputLastName").value;
  var address = document.getElementById("inputAdress").value;
  var postcode = document.getElementById("inputPostcode").value;
  var delievery = document.getElementById("deliverytype").value;
  if(firstName != "" && lastName != "" && address !="" && postcode !=""){
    var url = "addCustomer.php?FIRSTNAME=" + firstName + "&LASTNAME=" + lastName + "&ADDRESS=" + address + "&POST_CODE=" + postcode + "&DELIVERY_TYPE=" + delievery;

    xmlhttp.open("GET", url, false);
    xmlhttp.send();
     }
   else{
    alert("enter Some Data");
   }
}

submitButton = document.getElementById("checkoutButton");
submitButton.addEventListener("click", addCustomer);

and the following php sql code:

$name = $_GET['firstname'];
     $lastname = $_GET['lastname'];
     $userAddress = $_GET['address'];
     $userPostCode = $_GET['postcode'];
     $delivery = $_GET['deliverytype'];
     $totalCost = $_GET['calc'];

     if($name !="" && $lastname !="" && $userAddress !="" && $userPostCode !="" ){
     $sql = "INSERT INTO USERS (FIRSTNAME, SECONDNAME, ADDRESS, POST_CODE, DELIVERY_TYPE) VALUES ('$name', '$lastname', '$userAddress', '$userPostCode', '$delivery') ";
     $conn->exec($sql);
     echo "worked";
     }

Answer 1

Try to send variables in lowercase:

var url = "addcustomer.php?firstname=" + firstName + "&lastname=" + lastName + "&address=" + address + "&post_code=" + postcode + "&delivery_type=" + delievery;

Any way you are just sending the variable any changes should happen in database not in console log of your browser And PLEASE read about SQL Injection ...