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

Why are you using capitalized versions of the parameter names when you build the URL? — Pointy, Apr 17 '15 at 14:27
At least use `mysql_real_escape_string` (or mysqli) http://php.net/manual/en/function.mysql-real-escape-string.php — Spencer May, Apr 17 '15 at 14:38

score 1 · Answer 1 · edited May 23 '17 at 12:22

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 ...

edited May 23 '17 at 12:22

Community

1
1

answered Apr 17 '15 at 14:35

Jafar Akhondali

1,552
1
11
25

`js` is case sensitive... `firstname` etc will all be undefined (in the JS side) so the URL will be `addcustomer.php?firstname=&lastname=...` – Rudu Apr 17 '15 at 15:01
@Rudu Mybad, I converted it to lowercase using online tools :D – Jafar Akhondali Apr 17 '15 at 16:19

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

1 Answers1