Solved: Registration POST using Ajax and get result

Good Evening Everyone

I am trying to do a registration MODAL to post using php and get back a confirmation result, I have it working in the normal submission method POST using php, which passes the variables and reloads the page to registration.php after submission.

This is the MODAL below :

           <!--Body-->
                    <div class="modal-body">
                        <form method="POST" action="/registration.php">
                      <div class="md-form form-sm mb-5">
                        <i class="fas fa-user prefix" style="color: dodgerblue "></i>
                          <input class="form-control" id="fname" name="fname" type="text" placeholder="&nbsp First Name"><br>
                      </div>

                      <div class="md-form form-sm mb-5">
                        <i class="prefix"></i>
                          <input class="form-control" id="lname" name="lname" type="text"  placeholder="Last Name"><br>
                      </div>

                      <div class="md-form form-sm mb-4">
                        <i class="fas fa-address-book prefix"></i>
                          <input class="form-control" id="address" name="address" type="text"  placeholder="Address"><br>
                      </div>
                        <div class="container">
                        <div class="form-check-inline">
                            <label class="form-check-label">
                                <input type="radio" id="gender" name="gender" value="M" class="form-check-input" name="optradio" checked="checked">Male
                            </label>
                        </div>
                        <div class="form-check-inline">
                            <label class="form-check-label">
                                <input type="radio" id="gender" name="gender" value="F" class="form-check-input" name="optradio">Female
                            </label>
                        </div>
                        </div>
                        <div class="md-form form-sm mb-4">
                            <i class="far fa-calendar prefix" style="color: dodgerblue "></i>
                            <input class="form-control" id="dob" name="dob" type="date"  placeholder="Date Of Birth"><br>
                        </div>
                        <div class="md-form form-sm mb-4">
                            <i class="fas fa-phone prefix" style="color: dodgerblue "></i>
                            <input class="form-control" id="contact" name="contact" type="text" placeholder="Tel Number"><br>
                        </div>
                        <div class="md-form form-sm mb-4">
                            <i class="fas fa-at prefix"></i>
                            <input class="form-control" id="email" name="email" type="email" placeholder="Email Address"><br>
                        </div>
                        <div class="md-form form-sm mb-4">
                            <i class="fas fa-key prefix"></i>
                            <input class="form-control" id="password" name="password" type="password" placeholder="Password....."><br>
                        </div>
                        <div class="md-form form-sm mb-4">
                            <i class="fas fa-key prefix"></i>
                            <input class="form-control" id="cpassword" name="cpassword" type="password" placeholder="Confirm Password....."><br>
                        </div>
                      <div class="text-center form-sm mt-2">
             <!--          <button type="button" name="sign_up" id="sign_up" class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button> -->
                          <button class="btn btn-default">Signup</button>
                      </div>
                        </form>
                    </div>

Open in new window

If I can get assistance in the script would be helpful..

  <script> /*
    $(document).ready(function(){
        $('#sign_up').click(function(){
            var fname = $('#fname').val();
            var lname = $('#lname').val();
            var address = $('#address').val();
            var gender = $("input[name='gender']:checked").val();
            var dob = $('#dob').val();
            var contact = $('#contact').val();
            var email = $('#email').val();
            var password = $('#password').val();
            var cpassword = $('#cpassword').val();
 
            if(fname !== '' && lname !== ''&& address !== ''&& gender !== ''&& dob !== ''
                && email !== ''&& password !== ''&& cpassword !== '')
            {
                $.ajax({
                    url:"registration.php",
                    method:"POST",
                    data: {fname:fname, lname:lname, address:address, gender:gender,
                        dob:dob, contact:contact, password:password, cpassword:cpassword},
                    success:function(data)
                    {
                        console.log(data);

                        //alert(data);
                        if(data === 'No')
                        {
                            alert("Wrong Data");
                        }
                        else
                        {
                            $('#sign_up').hide();
                            location.reload();
                        }
                    }
                });
            }
            else
            {
                alert("All Fields are required");
            }
        });

Open in new window