Jquery Ajax Post Example For Submitting AJAX Forms in PHP

0
Shares
Jquery Ajax Post Example For Submitting AJAX Forms in PHP
4.4 (87.5%) 24 votes

Lately, the AJAX forms seem to be used everywhere. In fact, most PHP custom web app development project are now being developed with AJAX forms. And, if you look at any Jquery Ajax Post example, you’ll notice that the code looks easier, shorter, and more readable.

For example, tasks such as creating a catch for different browser XMLHttpRequest, opening any URL, checking if the request is ready or not have short and more readable syntax in Jquery Ajax.

Today, in our PHP tutorial, we’ll be shown the implementation process for submitting AJAX forms in PHP with Jquery Ajax Post Example or you can say Jquery submit form Ajax.

In this Ajax example demo, we’ll use serialize() method for creating URL encoded text string by serializing form values. These serialized values can be used in the URL query string whenever you’re making an AJAX request.

Let’s Get Started

Create a file with Index.php to display the feed in the browser.

Now, define a header for the page.

<html>
<head>
<title>Space-O | Ajax submit form</title>
</head>
<style type="text/css">
table { border-collapse: collapse; }
table, th, td { border: 1px solid black; }
</style>
<body>
<h1>jQuery post form data using .ajax() method</h1>

Next, create a form for obtaining details from the end-user.

<form id='userForm'>
<div>
<input type='text' name='name' placeholder='Name'/>
</div>
<div>
<input type='text' name='email'placeholder='Email' />
</div>
<div>
<input type='text' name='number' placeholder='Mobile Number' />
</div>
<div>
<input type='submit' value='Submit' />
</div>
</form>

Create a Div to display information that is entered by end-user and success message.

<div id='response'></div>

Now, add Javascript to use Jquery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>

In below code, the entire logic as well as standard of code is defined.

<script>
$(document).ready(function(){
$('#userForm').submit(function(){

// show that something is loading
$('#response').html("<b>Loading response...</b>");

// Call ajax for pass data to other place
$.ajax({
type: 'POST',
url: 'get_information.php',
data: $(this).serialize() // getting filed value in serialize form
})
.done(function(data){ // if getting done then call.

// show the response
$('#response').html(data);

})
.fail(function() { // if fail then getting message

// just in case posting your form failed
alert( "Posting failed." );

});

// to prevent refreshing the whole page page
return false;

});
});
</script>

Full Code of Jquery AJAX Post Example:

<html>
<head>
<title>Space-O | Ajax submit form</title>
</head>
<body>
<h1>jQuery post form data using .ajax() method</h1>
<!-- our form -->
<form id='userForm'>
<div><input type='text' name='name' placeholder='Name' /></div>
<div><input type='text' name='email' placeholder='Email' /></div>
<div><input type='text' name='number' placeholder='Mobile Number' /></div>
<div><input type='submit' value='Submit' /></div>
</form>
<style type="text/css">
table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}

</style>
<!-- where the response will be displayed -->
<div id='response'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
$('#userForm').submit(function(){

// show that something is loading
$('#response').html("<b>Loading response...</b>");

// Call ajax for pass data to other place
$.ajax({
type: 'POST',
url: 'get_information.php',
data: $(this).serialize() // getting filed value in serialize form
})
.done(function(data){ // if getting done then call.

// show the response
$('#response').html(data);

})
.fail(function() { // if fail then getting message

// just in case posting your form failed
alert( "Posting failed." );

});

// to prevent refreshing the whole page page
return false;

});
});
</script>

</body>
</html>

And done!

jquery-ajax-post-example

Submitting a JQuery AJAX form is a fairly easy process. However, you’ll want to look at doing client-side verification as well to make sure the job is done correctly. And, there are plenty of resources to push forward. You could either hire PHP developer or reach out to experts if you’re starting out to learn web app development programming.

In case, if you still have any query or confusion regarding submitting a jQuery AJAX form, then you can get in touch with us through our contact us form. One of our sales representatives will revert to you within 16 hours. The consultation is completely free of cost.

This page was last edited on November 5th, 2018, at 9:22.
 
0
Shares
 

Would You Like to Develop Your Business Website? We Can Help!

Get your free consultation now