{"id":603,"date":"2014-08-08T13:50:04","date_gmt":"2014-08-08T13:50:04","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=603"},"modified":"2014-08-08T13:50:04","modified_gmt":"2014-08-08T13:50:04","slug":"submit-form-using-ajax-without-refreshing-page","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/submit-form-using-ajax-without-refreshing-page\/","title":{"rendered":"Submit form using ajax without refreshing page"},"content":{"rendered":"

Today, I\u2019ll teach you, how to submit form using ajax, without refreshing page. Its very simple and easy way.
\nYou just need to download latest jQuery. I\u2019ve give you a very simple example so that everyone can understand it easily.<\/p>\n

we just need to add jquery file into your page. We can submit the form without refreshing page.
\nTo understand it completely just follow the steps.
\nStep-1:<\/span><\/strong>
\nCreate a file form.html <\/strong>and insert some input fields. For this tutorials, Insert three text fields (First Name, Last Name, Email) and set their ids and names to fname<\/strong>, lname<\/strong>, & email<\/strong>. and a Submit button.
\nNow Place a div at the bottom and set its id to status<\/strong>.<\/p>\n

Code:<\/strong>
\n
\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">
\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">
\n<head>
\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>
\n<title>Submit Form Using ajax by Sharp Coders<\/title>
\n<\/head>
\n<body>
\n<table width=\"500\" border=\"0\" cellspacing=\"0\" cellpadding=\"2\">
\n<tr>
\n<td>First Name<\/td>
\n<td><input type=\"text\" name=\"fname\" id=\"fname\" \/><\/td>
\n<\/tr>
\n<tr>
\n<td>Last Name<\/td>
\n<td><input type=\"text\" name=\"lname\" id=\"lname\" \/><\/td>
\n<\/tr>
\n<tr>
\n<td>Email<\/td>
\n<td><input type=\"text\" name=\"email\" id=\"email\" \/><\/td>
\n<\/tr>
\n<tr>
\n<td>&nbsp;<\/td>
\n<td><button type=\"button\" name=\"btnSubmit\" id=\"btnSubmit\">Submit<\/button><\/td>
\n<\/tr>
\n<\/table>
\n<div id=\"status\"><\/code><\/p>\n

<\/div>
\n<\/body>
\n<\/html><\/p>\n

Step-2<\/strong><\/span><\/div>\n
Now download jquery file<\/a> \u00a0and place this file in the project folder, and add this file to our page.<\/div>\n
to do this place this code in the head section of the form.html<\/strong> page.<\/div>\n
Code:<\/strong><\/div>\n

<script src=\"jquery.min.js\" type=\"text\/javascript\"><\/script><\/code><\/p>\n

Now, we can use jquery in our page.<\/div>\n
Now add the following code in the head section<\/div>\n
code:<\/strong><\/div>\n

\n<script type=\"text\/javascript\">
\n$(document).ready(function(){
\n$('#btnSubmit').click(function(){
\n$.ajax({
\ntype: \"POST\",
\nurl: 'form2.php',
\ndata: \"fname=\" + $('#fname').val() + \"&lname=\" + $('#lname').val() + \"&email=\" + $('#email').val(),
\nsuccess: function(data){
\n$('#status').html(data);
\n}
\n});
\n});
\n});
\n<\/script>
\n<\/code>
\nThis code will be used to submit form through ajax.Final Code of form.html page\u00a0<\/strong>
\n
\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">
\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">
\n<head>
\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>
\n<title>Submit Form Using jQuery\/ajax by Sharp Coders<\/title>
\n<script src=\"jquery.min.js\" type=\"text\/javascript\"><\/script>
\n<script type=\"text\/javascript\">
\n$(document).ready(function(){
\n$('#btnSubmit').click(function(){
\n$.ajax({
\ntype: \"POST\",
\nurl: 'form2.php',
\ndata: \"fname=\" + $('#fname').val() + \"&lname=\" + $('#lname').val() + \"&email=\" + $('#email').val(),
\nsuccess: function(data){
\n$('#status').html(data);
\n}
\n});
\n});
\n});
\n<\/script>
\n<\/head>
\n<body>
\n<table width=\"500\" border=\"0\" cellspacing=\"0\" cellpadding=\"2\">
\n<tr>
\n<td>First Name<\/td>
\n<td><input type=\"text\" name=\"fname\" id=\"fname\" \/><\/td>
\n<\/tr>
\n<tr>
\n<td>Last Name<\/td>
\n<td><input type=\"text\" name=\"lname\" id=\"lname\" \/><\/td>
\n<\/tr>
\n<tr>
\n<td>Email<\/td>
\n<td><input type=\"text\" name=\"email\" id=\"email\" \/><\/td>
\n<\/tr>
\n<tr>
\n<td>&nbsp;<\/td>
\n<td><button type=\"button\" name=\"btnSubmit\" id=\"btnSubmit\">Submit<\/button><\/td>
\n<\/tr>
\n<\/table>
\n<br \/>
\n<a href=\"http:\/\/www.sharp-coders.com\">http:\/\/sharp-coders.blogspot.com<\/a>
\n<br \/>
\n<div id=\"status\"><\/code> <\/p>\n

<\/div>
\n<\/body>
\n<\/html><\/p>\n

<\/div>\n<\/div>\n
\n
Step-3<\/strong><\/span><\/div>\n
Create an Empty php file with the name\u00a0form2.php\u00a0<\/strong>and place following code in the file.<\/div>\n

\n<?php
\n$fname = $_POST['fname'];
\n$lname = $_POST['lname'];
\n$email = $_POST['email'];
\necho \"You Entered <br \/>\";
\necho \"<b>First Name:<\/b> \". $fname . \"<br \/>\";
\necho \"<b>Last Name:<\/b> \". $lname . \"<br \/>\";
\necho \"<b>Email:<\/b> \". $email . \"<br \/>\";
\n?>
\n<\/code><\/div>\n
When we\u2019ll submit the form, the form values will be posted to this (form2.php) page. You can perform different operation on the receiving data.<\/div>\n
We\u2019ve just printed the receiving data.<\/div>\n<\/div>\n
Download Complete Code<\/span><\/a><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"

Today, I\u2019ll teach you, how to submit form using ajax, without refreshing page. Its very simple and easy way. You just need to download latest jQuery. I\u2019ve give you a very simple example so that everyone can understand it easily. we just need to add jquery file into your page. We can submit the form […]<\/p>\n","protected":false},"author":1,"featured_media":604,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/603"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=603"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/603\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/604"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}