jQuery Ajax Form Submit Example PHP
Last Updated : Mar 11, 2024
IN - PHP jQuery Ajax | Written & Updated By - Pragati
In this tutorial we will show you the solution of jQuery ajax form submit example PHP, today we will understand about how to form submit in php using jQuery and Ajax.
As we know that we also can directly submit the form without using jQuery and Ajax, then why we need to used them here in form.
The answer is that in simple language Ajax help us not to refresh page again and again like at time of submission of form. It help us to create a fast and dynamic webpages.
Step By Step Guide On jQuery Ajax Form Submit Example PHP :-
Here, as we know that Ajax is used to make a fast and dynamic webpage without refreshing the page.
Now, it means that we can check and update the parts of a webpage without reloading full page. Now, let us see how to submit a form in php using them with help of codes.
<!Doctype html>
<html>
<head>
<title> jQuery ajax form submit example php </title>
<!--Include JQuery File -->
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<script>
$(() => {
$("#submitBtn").click(function(data) {
var form = $("#formId");
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
success: function(data) { alert("Form Submited Successfully");
},
error: function(data) {
alert("some Error");
}
});
});
});
</script>
</head>
<body>
<form id='formId' action=''> Name:
<input type='text'
id='name'
name='name'>
</input>
<br> Student ID:
<input type='text'
id='studentId'
name='studentId'>
</input>
<br> Contact No. :
<input type='text'
id='contactNmbr'
name='contactNmbr'>
</input>
<br>
<button type='submit'
id='submitBtn'>
Submit
</button>
</form>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, as we can see that first of all we create a form inside html or php and the we must have to include jQuery.js file and link to this page.
- After that we use our Ajax code, in which always the main function starts with $ sign. Inside this we write the general code for Ajax. And if our data submitted successfully then an alert having text Form Submitted Successfully showed otherwise some error alert displayed. We hope you understand the above code with help of these steps easily.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to submit form that was created in php using jQuery and AJAX.
I hope this tutorial on jQuery ajax form submit example PHP helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
