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

Last Updated : 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>