Avatar of Sarkis Gabriel
Sarkis Gabriel
 asked on

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

PHPjQueryAJAX

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
David S.

First of all, thank you for making it work without AJAX first. All too few developers do that.

Secondly, where are the <label>s?
http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/
https://www.smashingmagazine.com/2018/06/placeholder-attribute/
https://www.aaron-gustafson.com/notebook/labeled-with-love/
https://websemantics.uk/archived/accessible-forms/
https://jimthatcher.com/webcourse8.htm

Third, doesn't calling location.reload() defeat the point of using AJAX? Perhaps you intended to ask what to replace that with?

P.S. It's better to use the form's submit event than a button's click event.
SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Sarkis Gabriel

ASKER
Thanks Julian for the assistance..

I have tried the code and I understand it but I just don't know why it is not working.

Only thing I can think of that

if (isset($_POST['fname'])){}
is not activating when it is posting.

The console.log (data); not showing any log for some reason.

If you can think of anything that would be great.

Thanks again
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Julian Hansen

@Sarkis, you have acknowledge my solution but made your solution the accepted one - was this intentional?

Let me know and I will open the question again.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Sarkis Gabriel

ASKER
You have a point there as yours was 99% complete.

Still learning the system, do mind my ignorance :) .

Thanks once more .
Julian Hansen

You are welcome.