How to submit a form using ajax in jQuery ?

How to submit a form using ajax in jQuery ?

Last Updated : 20 Sep, 2024

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: value, url: value, data: value ... });

Some of the main parameters of an AJAX request are explained below:

type: It is used to specify the type of the request, whether the request will be of POST type or GET type.
url: It is used to specify the URL to which the specified type of request will be sent.
data: It is used to specify data to be sent to the server.

Example: In this example we use jQuery AJAX to handle form submission without reloading the page, sending the serialized data to the server for processing.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Submit Form using jQuery AJAX</title>

    <!-- Include jQuery Library -->
    <script src=
"https://code.jquery.com/jquery-3.5.0.js"></script>

    <!-- CSS Styling -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .form-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            width: 320px;
        }

        .form-container h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .form-container label {
            display: block;
            margin-bottom: 6px;
            font-size: 14px;
            color: #555;
        }

        .form-container input {
            width: 90%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

        .form-container button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        .form-container button:hover {
            background-color: #218838;
        }
    </style>

    <!-- jQuery Script -->
    <script>
        $(document).ready(function () {
            $("#submitButton").click(function (event) {
                event.preventDefault(); // Prevent default form submission

                let form = $("#formId");
                let url = form.attr('action');

                $.ajax({
                    type: "POST",
                    url: url,
                    data: form.serialize(), // Serialize form data
                    success: function (data) {
                        alert("Form Submitted Successfully");
                    },
                    error: function (data) {
                        alert("Error occurred while submitting the form");
                    }
                });
            });
        });
    </script>
</head>

<body>

    <div class="form-container">
        <h2>Student Information</h2>
        <form id="formId" action="your-server-endpoint.php">
            <label for="nm">Name:</label>
            <input type="text" 
                   id="nm" name="nm" 
                   placeholder="Enter your name" required>

            <label for="studentId">Student ID:</label>
            <input type="text" 
                   id="studentId" 
                   name="studentId" 
                   placeholder="Enter your student ID" required>

            <label for="contactNumber">Contact No.:</label>
            <input type="text" 
                   id="contactNumber" 
                   name="contactNumber" 
                   placeholder="Enter your contact number" required>

            <button type="submit" 
                    id="submitButton">
              Submit
           </button>
        </form>
    </div>

</body>

</html>

Output:

Jquery-form2

How to submit a form using ajax in jQuery ?

H

harshsethi2000

Improve

Article Tags :

Similar Reads

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 on Enter button using jQuery ?

Given an HTML form and the task is to submit the form after clicking the 'Enter' button using jQuery. To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. html <!DOCTYPE html>

How to set timeout for ajax by using jQuery?

In web programming, the Ajax is used so that the resultant data is shown in the one part of the web page, without reloading the page. The user needs to perform the Ajax request and wants the result within a timeframe. In this scenario, the jquery timeout feature is used in the code. Session timeout

How to prevent duplicate submission in a form using jQuery?

Preventing duplicate submission in a form using jQuery involves implementing measures to ensure that the form is only submitted once, regardless of how many times the user interacts with the submit button. To prevent duplicate form submissions in web applications using jQuery we can use various meth

How to get form data using JavaScript/jQuery?

The serializeArray() method creates an array of objects (name and value) by serializing form values. This method can be used to get the form data. Syntax: $(selector).serializeArray() Parameter: It does not accept any parameter. Return Value: It returns all the value that is inside the inputs fields