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

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

Last Updated : 24 Jun, 2024

How to prevent an HTML form to submit?

When submitting a form, clicking the submit button usually navigates to a new route as specified in the form's action attribute. However, this can be done in the background using event.preventDefault(), which blocks the default event behavior.

By attaching an onsubmit event listener to the form, we can prevent the default event and stop the page from navigating. After calling event.preventDefault(), we can retrieve the form values and make a POST request to the desired route.

Prerequisites:

Approach

The HTML page includes a form with "Name" and "Job" fields and a submit button, styled for centering. On form submission, jQuery's event.preventDefault() prevents the default page refresh. The form data is serialized into an object and sent via an AJAX POST request to "https://reqres.in/api/users". If the request succeeds, a message with the new user ID is displayed in the span; if it fails, the error status is shown. This approach allows form submission without navigating to a new page, providing a smoother user experience.

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:

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

D

debadebaduttapanda7

Improve

Article Tags :

Similar Reads

How to clear form after submit in Javascript without using reset?

Forms in JavaScript serve to gather specific user information, essential in various contexts like recruitment or inquiry submissions. While offline forms can be freely distributed, online forms must maintain a consistent structure for all users. After filling out a form, submission is crucial, but d

How to Reset Form using jQuery with reset() Method?

Reset a form means clear all input fields data and returns to their initial default values. It can be useful where a user wants to clear all entered data or you want to reset the form after a successful submission. The reset() method can easily reset the form data after clicking the reset button or

How to stop a form submit action using jQuery ?

In this article, we will learn how to stop a form submit action using jQuery. By default, the HTML form submits automatically. Submitting automatically leads to reloading the whole page again and again. Therefore for performing any operation, we have to prevent its default submission. Given a form,

How to submit a form using ajax in jQuery ?

Submitting a form using AJAX in jQuery allows sending form data to a server asynchronously without reloading the page. This method improves user experience by sending the data in the background and receiving a response without interrupting the user's interaction with the webpage.Syntax:$.ajax({type:

How to Refresh a Page using jQuery?

Refreshing a page using jQuery allows you to programmatically reload the current webpage, ensuring updated content or resetting the page's state. It can be done using location.reload() method.Table of ContentUsing location.reload() MethodUsing history.go(0)Using location.replace() with Current PageR