jQuery Ajax Form Submit Example
Last Updated : Mar 11, 2024
IN - jQuery Ajax | Written & Updated By - Pragati
In this article we will show you the solution of jQuery ajax form submit example, because of the lack of page reloads and the speed of HTTP queries, Ajax forms are a crucial component of modern web technology.
Information in several formats, like HTML, JSON, or XML, can be sent and received using jQuery Ajax.
Learn numerous jQuery Ajax ways for sending data to this server & receiving it back today.
Ajax() methods like.get(),.post(),.load(), and.getJSON() all achieve the same goal but are more task-specific.
Simply combine the $.post() method and the serialise() method in jQuery to use AJAX to submit a form.
The serialise() method creates a URL-encoded string for serialising form values before submission. 'Successful controls' were the only ones that were serialised to create the string.
Step By Step Guide On jQuery Ajax Form Submit Example :-
<!Doctype html>
<html>
<head>
<title>JQuery AJAX Call</title>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<script>
$(() => {
$("#submitButton").click(function(ev) {
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='nm'
name='nm'>
</input>
<br> Student ID:
<input type='text'
id='studentId'
name='studentId'>
</input>
<br> Contact No. :
<input type='text'
id='contactNumber'
name='contactNumber'>
</input>
<br>
<button type='submit'
id='submitButton'>
Submit
</button>
</form>
</body>
</html>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open. External style sheets, also known as step-by-step style sheets, appear on a webpage based on the URL or path.
- Next, we create the font size and weight in style.
- Then we style by closing our eyes.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then we create a form, under the form we create name, student id, contact.no.
- Then we create a button to submit.
- After that we close program using </center></body></html>
Conclusion :-
A Document Object Model (DOM), which is an HTML/CSS page, and JavaScript are made easier to work with by the open-source JavaScript package jQuery.
To elaborate, jQuery facilitates DOM animations, Ajax interactions, traversal & manipulation of HTML pages, and JavaScript programming enable cross-browser use.
I hope this article on jQuery ajax form submit example helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
