Form details are not saving using PHP and Ajax

Question

I am beginner in PHP as well Ajax programming language. I did my project to store some data to mysqli database using PHP and Ajax, unfortunately it didn't save but validating each data.

Here is my code segment which I did, but no results:

 <script>
    function sendContact() {
                var valid;
                valid = validateContact();
                if (valid) {


                    $('#Register').click(function (e) {

                        var username = $('#username').val();
                        var email = $('#email').val();
                        var password = $('#password').val();
                        var password1 = $('#password1').val();


                        var data = { "username": username, "email": email, "password": password, "password1": password1 };

                        jQuery.ajax({
                            data: data,
                            url: "phpquery/insert_patient.php", // Url to which the request is send
                            type: "POST",             // Type of request to be send, called as method

                            success: function (data) {

                                $('#username').val('');
                                $('#email').val('');
                                $('#password').val('');
                                $('#password1').val('');

                            }
                        });



                    });


                }
            }



            function validateContact() {
                var valid = true;
                $(".demoInputBox").css('background-color', '');
                $(".info").html('');

                if (!$("#username").val()) {
                    $("#userName-info").html("(required)");
                    $("#username").css('background-color', '#FFFFDF');
                    valid = false;
                }



                if (!$("#email").val()) {
                    $("#userEmail-info").html("(required)");
                    $("#email").css('background-color', '#FFFFDF');
                    valid = false;
                }
                if (!$("#email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
                    $("#userEmail-info").html("(invalid)");
                    $("#email").css('background-color', '#FFFFDF');
                    valid = false;
                }
                if (!$("#password").val()) {
                    $("#password-info").html("(required)");
                    $("#password").css('background-color', '#FFFFDF');
                    valid = false;
                }
                if (!$("#password1").val()) {
                    $("#password1-info").html("(required)");
                    $("#password1").css('background-color', '#FFFFDF');
                    valid = false;
                }

                return valid;
            }

        </script>

Below is my HTML code:

<form name="poster" id="poster" method="post" class="s12" data-toggle="validator">
                        <div>
                            <div class="input-field s12">
                                <input type="text" id="username" name="username" data-ng-model="name1" class="validate"
                                    required>
                                <label>User name</label>
                                <span id="userName-info" class="text-danger"></span><br />

                            </div>
                        </div>
                        <div>
                            <div class="input-field s12">
                                <input type="email" id="email" name="email" class="validate" onblur="checkemail();"
                                    onkeyup="checkemail();" onchange="checkemail();" required>
                                <label>Email id</label>
                                <span id="userEmail-info" class="info"></span><br />

                                <span id="email_status" name="email_status"></span>

                            </div>
                        </div>
                        <div>
                            <div class="input-field s12">
                                <input type="password" name="password" id="password" class="validate" required>
                                <label>Password</label>
                                <span id="password-info" class="text-danger"></span><br />

                            </div>
                        </div>
                        <div>
                            <div class="input-field s12">
                                <input type="password" name="password1" id="password1" class="validate" required>
                                <label>Confirm password</label>
                                <span id="password1-info" class="text-danger"></span><br />

                            </div>
                        </div>



                        <div>
                            <div class="input-field s4">


                                <input type="button" value="Register" id="Register" name="Register"
                                    class="waves-effect waves-light log-in-btn" onClick="sendContact();">
                            </div>
                        </div>





                        <div>
                            <div class="input-field s12">                    
                  <a href="#" data-dismiss="modal" data-toggle="modal"
                                    data-target="#modal1">Are you a already member ? Login</a> </div>
                        </div>
                    </form>

My insert_patient.php page would be:

    <?php
    // include('colour.css');
    include('dbconnection.php');

    if (isset($_POST['username'])) {

      $first_name="";
      $last_name="";
      $address="";
      $gender="";
      $dob="";
      $contact="";
      $state="";
      $image="";
      $note="";

      $username=$_POST["username"];
      $email=$_POST["email"];
      $password=$_POST["password"];





$sql= "INSERT INTO patients (p_fname,p_lname,p_address,p_gender,dob,p_contact,p_state,username,email,password,image,note) 
      VALUES ('". $first_name."','". $last_name."','". $address."', '". $gender."','". $dob."','". $contact."', '". $state."','". $username."','". $email."', '". $password."' , '". $image."', '". $note."')  ";

      if(mysqli_query($con,$sql) ){
        echo'save';

      }
      else {
        echo 'fail';
      }

      }

Here nothing happened.

Answer 1

sendContact should just perform the AJAX call, it shouldn't call $("#Register").click(). That adds an event handler for the next time you click on the button, it doesn't send the AJAX request.

function sendContact() {
  var valid;
  valid = validateContact();
  if (valid) {
    var username = $('#username').val();
    var email = $('#email').val();
    var password = $('#password').val();
    var password1 = $('#password1').val();
    var data = {
      "username": username,
      "email": email,
      "password": password,
      "password1": password1
    };

    jQuery.ajax({
      data: data,
      url: "phpquery/insert_patient.php", // Url to which the request is send
      type: "POST", // Type of request to be send, called as method

      success: function(data) {
        $('#username').val('');
        $('#email').val('');
        $('#password').val('');
        $('#password1').val('');
      }
    });
  });
}