Ajax form submission is better and fast way to submit form without page loading .It’s make a nice experience to your users.
Below we have written a tutorial on how to submit a form with jquery ajax . You can also consider this as a PHP, ajax registration form .
First of all we have to create a html file ,with below html codes
Below we have written a tutorial on how to submit a form with jquery ajax . You can also consider this as a PHP, ajax registration form .
First of all we have to create a html file ,with below html codes
<div class="loading"></div> <div class="message"></div> <form id="register_form" > <table width="98%" border="0" cellspacing="5" cellpadding="5"> <tr> <td>Name</td> <td> <input type="text" name="name"> </td> </tr> <tr> <td>Email </td> <td> <input type="text" name="email"> </td> </tr> <tr> <td>Password</td> <td> <input type="password" name="password"> </td> </tr> <tr> <td>Contact </td> <td> <input type="text" name="contact"> </td> </tr> <tr> <td>Address</td> <td> <input type="text" name="address"> </td> </tr> <tr> <td> </td> <td><input id="submit" type="submit" name="submit" value="Submit" /></td> </tr> </table> </form>
Above we have a form to get user data . There also 2 div containing classes loading and message for handling loader images show and success message display .
Now include your jquery file and put below code above the html as shown below
<script src="js/jquery-3.1.0.js"></script> <script type="text/javascript"> $(document).ready(function() { var loader='<img src="images/ajax-loader.gif" />'; //if submit button is clicked $('#submit').click(function () { //show the loader $('.loading').html(loader).fadeIn(); var name = $('input[name=name]').val(); var email = $('input[name=email]').val(); var password = $('input[name=password]').val(); var contact = $('input[name=contact]').val(); var address = $('input[name=address]').val(); //organize the data properly var form_data = 'name='+name+ '&email='+email+ '&password='+password+ '&contact='+contact+ '&address='+address; //disabled all the text fields $('.text').attr('disabled','true'); //start the ajax $.ajax({ //this is the php file that processes the data and send mail url: "ajax/process.php", //POST method is used type: "POST", //pass the data data: form_data, //success success: function (html) { //if process.php returned 1/true (send mail success) if (html==1) { //hide the form $('#register_form').fadeOut('slow'); //hide the loader $('.loading').fadeOut(); //show the success message $('.message').html('Successfully Registered ! ').fadeIn('slow'); //if process.php returned 0/false } else alert('Sorry, unexpected error. Please try again later.'); } }); //cancel the submit button default behaviours return false; }); }); </script>
Above we have stored ajax loader image on a variable ‘loader’.
When user click submit button we have shown this loader to the div class ‘loading’ .
Then we read all user’s entered data to variables name, email, password, contact, address .
we have created an ajax request to send user’s entered data to a file ‘ajax/process.php’ and handle it’s output .
If output 1 , we have considered success .So, fade out the form ,loader and shown message to div class ‘message’ .
When user click submit button we have shown this loader to the div class ‘loading’ .
Then we read all user’s entered data to variables name, email, password, contact, address .
we have created an ajax request to send user’s entered data to a file ‘ajax/process.php’ and handle it’s output .
If output 1 , we have considered success .So, fade out the form ,loader and shown message to div class ‘message’ .
Now , lets create a folder ‘ajax’ the file ‘process.php’ in it .
<?php include "../includes/config.php"; //include the DB config file //Retrieve form data. $name=$_POST['name']; $email=$_POST['email']; $password=$_POST['password']; $contact=$_POST['contact']; $address=$_POST['address']; //insert it to database and and echo 1 for success $mysqli->query("INSERT INTO members (name,email,password,contact,address) VALUES('$name','$email','$password','$contact','$address') "); if($mysqli->error){ echo $mysqli->error; }else{ echo '1'; } ?>
We have a database config file as shown below
<?php $mysqli=new mysqli('localhost','root','','b239jq'); if($mysqli->connect_error){ echo $mysqli->connect_error; } ?>
We just included Database config file , read user’s data in post method , finally inserted it to db table then echo .
I think this tutorial will guide you for jquery, ajax form submission with PHP,Mysql Database . If you have any query ,do write it in below comments .I try my best to
reply all your questions .
I think this tutorial will guide you for jquery, ajax form submission with PHP,Mysql Database . If you have any query ,do write it in below comments .I try my best to
reply all your questions .