Trying to get data from textbox and inserting it into a database

Question

I have a form that is to be used to input information and register an account. The information is entered on the website and when the button 'register' is pressed it is validated by an external JavaScript method and afterwards, a PHP method is called using ajax which should take the information from the text boxes and enter it into the database. I can't seem to get the PHP getting the information working.

<?php
$mysqli = new mysqli('localhost:8080', 'root', null, 'salmonhouse');
/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
$sql = "INSERT INTO clients (name, surname, email, address, password)
    VALUES (?,?,?,?,?)";

$name = $_POST['name'];
$surname = $_POST['surname'];
$email= $_POST['email'];
$address= $_POST['Address'];
$pass= $_POST['Password'];

$stmt = $mysqli->prepare($sql);
$stmt->bind_param("sssss", $name, $surname, $email, $address, $pass);
$stmt->execute();

?>

HTML textboxes

<form class="quote">

    <div class = inliner>
        <label>Name</label>
        <input id="name" type="text" placeholder="Name">
    </div>
    <div class = inliner>
        <label>Surname</label>
        <input id="surname" type="text" placeholder="Surname">
    </div>

    <div>
        <label>Email</label><br>
        <input id="email" type="email" placeholder="Email Address"><br>
    </div>

    <div>
        <label>Address</label><br>
        <input id="Address" type="email" placeholder="Home Address"><br>
    </div>


    <div class = inliner>
        <label>Password</label>
        <input id="Password" type="text" placeholder="Password">
    </div>
    <div class = inliner>
        <label>Verify Password</label>
        <input id="vPassword" type="text" placeholder="Password">
    </div>
    <br><button class="button_1" type="button" onclick="Validate()">Register</button>

</form>

Calling javascript file from html page

<script type= "text/javascript">
          var name = document.getElementById("name").value;
          var surname =document.getElementById("surname").value;
          var email =document.getElementById("email").value;
          var pass=document.getElementById("Password").value;
          var passV =document.getElementById("vPassword").value;
          var address=document.getElementById("Address").value;
      </script>
            <script type= "text/javascript" src="asset/js/my_javascript.js"></script>

Actual javascript file

/* eslint-env browser */
/*jslint devel: true */
/* eslint-disable */
function Validate(){
    name = document.getElementById("name").value;
    surname =document.getElementById("surname").value;
    email =document.getElementById("email").value;
    pass=document.getElementById("Password").value;
    passV =document.getElementById("vPassword").value;
    var error = "";

    document.getElementById("name").style.borderColor = "white";
    document.getElementById("surname").style.borderColor = "white";
    document.getElementById("email").style.borderColor = "white";
    document.getElementById("Password").style.borderColor = "white";
    document.getElementById("vPassword").style.borderColor = "white";



    var count= 0;
    if(name.length == 0){
        document.getElementById("name").style.borderColor = "red";
        count =1;
        error = error + "Name cannot be empty\n"

    }
    if(surname.length == 0 ){
        document.getElementById("surname").style.borderColor = "red";
        count =1;
        error = error + "Surname cannot be empty\n"
    }
    if(email.length == 0 ){
        document.getElementById("email").style.borderColor = "red";   
        count =1;
        error = error + "Email cannot be empty\n"
    }
    if(!(email.includes("@"))){
        document.getElementById("email").style.borderColor = "red";   
        count =1;
        error = error + "Email needs to contain an @ symbol\n"
    }
    if(!(email.includes("."))){
        document.getElementById("email").style.borderColor = "red";   
        count =1;
        error = error + "Email needs to comtain a .com or similar\n"
    }

    if(pass!==passV){
        document.getElementById("Password").style.borderColor = "red";
        document.getElementById("vPassword").style.borderColor = "red";
        count =1;
        error = error + "Passwords do not match\n"

    }
    if(!(pass.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%&*()])[0-9a-zA-Z!@#$%&*()]{8,}$/))){
        document.getElementById("Password").style.borderColor = "red";
        document.getElementById("vPassword").style.borderColor = "red";
        count =1;
        error = error + "Password must be atleat 8 long and contain a LowerCase, UpperCase, Number and a symbol."
    }
    if(false){
        alert("Please correct the following errors highlighted in red\n"+error);
    }
    else{
        alert("Name: " + name + "\nSurname: "+ surname + "\nEmail: "+ email+"\nPassword: "+pass+"\n Succesful Registration");
         xmlhttp = new XMLHttpRequest();
        var url = "asset/php/inserting.php";
        xmlhttp.open("GET",url,true);
        xmlhttp.send();

    }
}
/* eslint-enable */

This PHP file is a separate file with just this code. I have tested and if I manually set the variables instead of trying to retrieve them the data is successfully inserted into the database. So from my testing it is simply the retrieval not working. I also tried $_REQUEST['name']

This is the ajax/xmlhttprequest code.

xmlhttp = new XMLHttpRequest();
var url = "asset/php/inserting.php";
xmlhttp.open("POST",url,true);
xmlhttp.send();

Answer 1

You can attached the variable in ajax call, which you need to get in your php page using & for separating variable and = for assigning value .i,e :

 //attaching values to pass
    var data = "name=" + name + "&email=" + email + "&surname=" + surname + "&Address=" + Address + "&Password=" + Password;
    if (window.XMLHttpRequest) {

      request = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    }


    request.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
       //if success do something here 
  alert("save");
      }
    };

    var url = "asset/php/inserting.php";
    request.open("POST", url, true);
    //send data to php page
    request.send(data);

Answer 2

My advice would be to use the jQuery library rather than XMLHttpRequest. You will need to include in the <head> section of your HTML a <script> tag to load the jQuery library from some CDN (Content Delivery Network). Also add id="f" to your <form> tag. Then your Ajax call can be as simple as:

$.ajax({
    type: "POST",
    url: 'asset/php/inserting.php',
    data: $('#f').serialize(), // serializes the form's elements.
    success: function(msg)
    {
        alert(msg); // show response from the php script.
    }
});