How to submit a form or a part of a form without a page refresh using jQuery ? - GeeksforGeeks

31 Oct, 2021
In this article, we will learn how to submit a form or a part of a form without a page refresh using JQuery, & will understand its implementation through the example.
How to prevent an HTML form to submit?
Generally, when we submit a form then we should click a submit button then our page will navigate to another route as it is mentioned in the form action attribute but we can do it at the background of the webpage without navigating the web page to other routes. And this is possible by using the event.preventDefault() method which blocks the default event and does not allow it to trigger. When we click the submit button then an event is fired, so we need to prevent this event because this event is responsible to take the user to other routes. So, we have to attach an onsubmit event listener to that form, so that when the user clicks the submit button, we can get that event object and prevent that specific event to fire, by using the preventDefault method. After preventing the event using the event.preventDefault() method then we need to get the form values and make a post request to that particular routes where we want to post our values.
Prerequisite: A basic understanding of HTML, CSS, Javascript, and JQuery is required before we proceed.
 
Approach:
Create an HTML file & add the jquery library CDN above the javascript code.
Create 2 input fields, a submit button, and a span to display the result.
Add an onsubmit listener to the form and take a callback with one single parameter.
Example: In this example, we have taken a fake post request where we need to post some information and the server will return the id as an object.
HTML
<!DOCTYPE html><html>  <head>    <style>    .container {        display: flex;        flex-direction: column;        align-items: center;        justify-content: center;    }          h1 {        color: green;    }          h3 {        text-align: center;    }          input,    span {        margin-top: 20px;    }    </style></head>  <body>    <div>        <h1 class="container">            GeeksforGeeks        </h1>        <h3>Submitting the form without page refresh</h3>    </div>    <form>        <div class="container">            <input placeholder="Name" type="text" name="Name" />            <input placeholder="Job" type="text" name="job" />            <input type="submit" />         </div>         <span class="container"></span>     </form>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">    </script>    <script type="text/javascript">    $(document).ready(function() {        $('form').on('submit', function(event) {            event.preventDefault();                          // It returns a array of object             let userinfo = $(this).serializeArray();            let user = {};            userinfo.forEach((value) => {                                  // Dynamically create an object                user[value.name] = value.value;            });            let url = "https://reqres.in/api/users";            $.ajax({                method: "POST",                url: url,                data: user            }).done(function(msg) {                                  // When the request is successful                $('span').text('user is successfully created with Id ' + msg.id);            }).fail(function(err, textstatus, error) {                $('span').text(textstatus);            });        });    });    </script></body>  </html>
Output:
CSS-Basics
HTML-Basics
javascript-basics
jQuery-Questions
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?