PHP Scripts – WordPress Tutorials

In this tutorial we are going to learn “How to Submit a form without Page Refresh in PHP using JQuery”, This is quite a very simple task but it becomes tough when you are totally new to this. So I am going to explain this line by line so you can easily learn form submission using AJAX.

Just for my users knowledge, i have a very simple form here that contains few input fields (Name, Sur Name, Email, About User) and i need to submit this form without reloading the page.

submit-form-without-refresh-in-php-and-jquery

I must tell you that we need to reload the page because PHP scripts run only on server, so it becomes necessary to reload the page. But we are lucky that we have jquery that can avoid refresh/reloading of page.

Demo                                                                  Download Code

Here is Code For my Form and File name is mainFile.html

mainFile.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form class="form2" action="" method="POST" name="myForm" id="myForm">
<div class="formtitle">Contact Us</div>
<div class="input">
<div class="inputtext">Your Name: </div>
<div class="inputcontent">
<input type="text" name="name" id="name" />
</div>
</div>
<div class="input">
<div class="inputtext">Your Surname: </div>
<div class="inputcontent">
<input type="text" name="surname" id="surname" />
</div>
</div>
<div class="input">
<div class="inputtext">Your Email: </div>
<div class="inputcontent">
<input type="text" name="email" id="email" />
</div>
</div>
<div class="inputtextbox nobottomborder">
<div class="inputtext">About: </div>
<div class="inputcontent">
<textarea class="textarea" name="about" id="about"></textarea>
</div>
</div>
<div class="buttons"> <span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span> <span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
<input class="greybutton" type="submit" value="Send" />
</div>
</form>

Now the next step is to run the JQuery Script that uses Ajax method to run PHP Script. Here is code, I have placed this code inside “head” tags. you can place this code wherever you want to.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
$('#myForm').on('submit',function(e) {

$.ajax({
url:'toAction.php',
data:$(this).serialize(),
type:'POST',
success:function(data){
console.log(data);
$("#success").show().fadeOut(5000); //=== Show Success Message==
},
error:function(data){
$("#error").show().fadeOut(5000); //===Show Error Message====
}
});
e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});
});

Note: this is necessary to include main Jquery Plugin before writing this code, Otherwise this will not Work Properly.

1
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

So Here you are Done with the basic things, Now the only thing that remains is write your PHP file that is to be rendered.

toAction.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if(isset($_POST['name']))
{
//print_r($_POST);
//====================Your Code To perform Action with your Form========
$name    =    $_POST['name'];
$surname=    $_POST['surname'];
$email    =    $_POST['email'];
$about    =    $_POST['about'];

$query    =    "INSERT INTO tableName(`name`,`surname`,`email`,`about`) VALUES ('$name','$surname','$email','$about')";

mysql_query($query);

}

Demo                                                                  Download Code

Now To check the status whether my form is submitted or some error occured, i have used two “span” at the end of the form, and i have show and hide them in JQuery Upon Success and Error.

Related Posts


Categories: Ajax, JQuery, PHP, Web Development
  • InfinityLoopers

    Thanks for the great trick I like this tutorial, and I was always searching for this. I also find one simple and easy method here on this website, I hope you want to take a look at this.
    http://www.smartwebtricks.com/2013/07/Submitting-A-PHP-Form-Without-Page-Refresh.html

    • http://www.computersneaker.com/ Mudasir Malik

      You have Copied My Code And that is bad manner :(

  • Wouter Coppens

    is it also possible to add a security token? to prevent Cross site scripting, and a lot of spam?

    • http://www.computersneaker.com/ Mudasir Malik

      yes you may. Just keep on restrictions and it will avoid spams, or you may use validation to allow only those premises that you want.

      I will be posting about validation very soon. Subscribe my blog so you may keep getting this.

  • http://www.elitehive.com/ Julius Gyaviira

    This is a great tutorial and I have liked it so much actually I found the link to this website at Elitehive.
    Getting to the jQuery code I would like to make a suggestion and that is none other than committing line 9 “console.log(data);” which I find not relevant outside the the testing environment.

    • http://www.computersneaker.com/ Mudasir Malik

      that’s great loved your suggestion,

      I will change this, i just have used to show the data we are receiving in console.

      • http://www.elitehive.com/ Julius Gyaviira

        Okay then. Keep the great working going on

  • Rawan Hamad

    I am totally new
    and I wanted to know ,do i have to connect my form with a database ?

    what to do if I wanted to submit the form through email

  • abhijith

    I implemented in the same way but its showing error and the data is not sent :( help me out :(

  • farhad

    Outstanding Work .That is what I am looking for

  • http://looz.yzi.me/ Luis Orozco

    how returns all records ?

  • Abdelmalek NA

    Sorry for my bad english!! thank you for this tuto.
    I want to know how to add another (span error message) in script ajax. (in my example search.php record:select from table) echo “Error record not found” thank you too ..!!
    Malek webdevelopper.

  • hermanodebart

    Thanks for the tutorial, helped me a lot in a project I’m doing. People like you make the internet a better place. Greetings from Chile.

  • Hanan Feinstein

    thanks, that’s a perfect one.