How to create signup form in php and sql using ajax?

Signup in PHP MySQL using Ajax?

In this article we will learn how you can create a signup or registration form in PHP and MySQL using Ajax.

In the signup form we will have three input fields name, email and password which will be send to the php page using ajax in php page it will insert the data into the databse using INSERT sql query.

In this project we will also check that the same email user is not allowed to signup .

 

 

Code for front-end of signup form

<h5 >Student Sign up</h5>
   <form id="stuRegForm">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text"
              class="form-control" name="stuname" id="stuname" aria-describedby="helpId" placeholder="Enter name">
          </div>

          <div class="form-group">
            <label for="">email</label>
            <input type="email"
              class="form-control" name="stuemail" id="stuemail" aria-describedby="helpId" placeholder="email">
          </div>

          <div class="form-group">
            <label for="">password</label>
            <input type="password"
              class="form-control" name="stupass" id="stupass" aria-describedby="helpId" placeholder="password">
          </div>

    <span id="empytFieldMsg" class="text-danger"></span>

      <span id="successMsg" ></span>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="stuRegBtn">Signup</button>

Code in javascript

$(document).ready(function () {
    // ajax call for already existsemail verification

    $("#stuemail").on("keypress blur",function () {
        var stuemail = $("#stuemail").val();
        console.log(stuemail);
        $.ajax({
              type: 'POST',
              url: 'student/addStudent.php',
              data : {
                stuemail : stuemail
              },
              success:function(response){
                // console.log(response);
                if(response != 0){
                    $("#empytFieldMsg").html("email already exist");
                    $("#stuRegBtn").attr("disabled",true);
                }else{
                    $("#empytFieldMsg").html("");
                    $("#stuRegBtn").attr("disabled",false);
                }

             }
        })
    });
});


// signup btn func.
document.getElementById("stuRegBtn").addEventListener("click",function () {
    var stuname = $("#stuname").val();
    var stuemail = $("#stuemail").val();
    var stupass = $("#stupass").val();

    if(stuname.trim() == "" ||  stuemail.trim() == "" || stupass.trim() == ""){
        $("#empytFieldMsg").html("Field is empty");
    } else{
        $("#empytFieldMsg").html("");
        $.ajax({
            type: 'POST',
            url: 'student/addStudent.php',
            data : {
              stuname: stuname,
              stuemail:stuemail,
              stupass:stupass,
              stusignup:"stusignup"
            },
            success:function(response){
           
               if(response.includes("ok")){
                   $("#successMsg").html("resgistation successfull");
                   $("#stuRegForm").trigger('reset');
               }else{
                  $("#successMsg").html("resgistation failed");
                  $("#stuRegForm").trigger('reset');
               }
           },
           error: function (jqXHR, exception) {
            var msg = '';
            if (jqXHR.status === 0) {
                msg = 'Not connect.\n Verify Network.';
            } else if (jqXHR.status == 404) {
                msg = 'Requested page not found. [404]';
            } else if (jqXHR.status == 500) {
                msg = 'Internal Server Error [500].';
            } else if (exception === 'parsererror') {
                msg = 'Requested JSON parse failed.';
            } else if (exception === 'timeout') {
                msg = 'Time out error.';
            } else if (exception === 'abort') {
                msg = 'Ajax request aborted.';
            } else {
                msg = 'Uncaught Error.\n' + jqXHR.responseText;
            }
            $("#successMsg").html(msg);
        }
      })


    }

 
}); 

Code in php

query($sql);
        $row = $result->num_rows;
        echo json_encode($row);
    }

    // insert student
    if(isset($_POST['stuname']) && isset($_POST['stuemail']) && isset($_POST['stupass']) && isset($_POST['stusignup']) ){

        $stuname =  $_POST['stuname'];
        $stuemail =  $_POST['stuemail'];
        $stupass =  md5($_POST['stupass']);


        $sql = "INSERT INTO student (stu_name,stu_email,stu_pass) VALUES('$stuname','$stuemail','$stupass')";

        if($db->query($sql) == TRUE){
            echo "ok";
        }
        else{
            echo "failed";
        }
    

    }

?>