Q:

How to AJAX Submit a Form in jQuery

mhmadesk
Save to bookmark
|
2022-05-18
|
  320 
Easy
0

How to AJAX Submit a Form in jQuery

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the jQuery $.post() Method

You can simply use the $.post() method in combination with the serialize() method to submit a form using AJAX in jQuery. The serialize() method creates a URL encoded text string by serializing form values for submission. Only "successful controls" are serialized to the string.

Let's try out the following example to understand how it basically work:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery AJAX Submit Form</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("form").on("submit", function(event){
        event.preventDefault();
 
        var formValues= $(this).serialize();
 
        $.post("process_form.php", formValues, function(data){
            // Display the returned data in browser
            $("#result").html(data);
        });
    });
});
</script>
</head>
<body>
    <form>
        <p>
            <label>Name:</label>
            <input type="text" name="name">
        </p>
        <p>
            <label>Gender:</label>
            <label><input type="radio" value="male" name="gender"> Male</label>
            <label><input type="radio" value="female" name="gender"> Female</label>
        </p>
        <p>
            <label>Hobbies:</label>
            <label><input type="checkbox" value="music" name="hobbies[]"> Music</label>
            <label><input type="checkbox" value="sports" name="hobbies[]"> Sports</label>
            <label><input type="checkbox" value="dance" name="hobbies[]"> Dance</label>
        </p>
        <p>
            <label>Favorite Color:</label>
            <select name="color">
                <option>Red</option>
                <option>Green</option>
                <option>Blue</option>
            </select>
        </p>
        <p>
            <label>Comment:</label>
            <textarea name="comment"></textarea>
        </p>
        <input type="submit" value="submit">
    </form>
    <div id="result"></div>
</body>
</html>

Here is the PHP script of our "process_form.php" file, which simply retrieve and output form elements values submitted by the user, which eventually sent back to the user's browser.

<h2>Here is the information submitted by you:</h2>
<p>Name: <b><?php echo $_POST["name"] ?? ''; ?></b></p>
<p>gender: <b><?php echo $_POST["gender"] ?? ''; ?></b></p>
<p>Favorite Color: <b><?php echo $_POST["color"] ?? ''; ?></b></p>
<p>Hobbies: <b><?php if(isset($_POST["hobbies"])){ echo implode(", ", $_POST["hobbies"]); } ?></b></p>
<p>Comment: <b><?php echo $_POST["comment"] ?? ''; ?></b></p>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

JavaScript / jQuery Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to Count Number of Rows in a Table Using jQuer... >>
<< How to Get the Class of the Clicked Element in jQu...