We help IT Professionals succeed at work.

Registration POST using Ajax and get result

Sarkis Gabriel
on
111 Views
Last Modified: 2019-03-21
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

Comment
Watch Question

David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
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
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
@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.

Author

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

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

Thanks once more .
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions