How to Submit Form using jquery ajax with php & mysql


0

Mostly, the HTML form is submitted to the script URL specified in the from action attribute of the tag. You can submit form using jquery ajax. The jQuery submit() method is more useful to handle the html form submission request. In this example code snippet, we will show you how to submit form using jquery Ajax

The following HTML form will be submitted using jquery Ajax request to php script.

<form id="myFrmID" action="submit.php">
    <div class="form_outer">
        <div class="row">
            <div class="col-md-6">
                <div>
                    <label>First Name:</label>
                    <input type="text" name="first_name" id="first_name" value="">
                </div>
            </div>
            <div class="col-md-6">
                <div>
                    <label>Last Name:</label>
                    <input type="text" name="last_name" id="last_name" value="">
                </div>
            </div>
            <div class="col-md-12">
                <div>
                    <label>Message:</label>
                    <textarea name="message" id="message"></textarea>
                </div>
            </div>
            <div class="col-md-12">
                <div class="book_btn">
                    <button type="submit">Submit</button>
                </div>
            </div>
        </div>
    </div>
</form>

Use the following jQuery to submit the form with all the input field values via Ajax request to script URL mentioned in the <form> action.

$(document).ready(function(){
    $('#myFrmID').submit(function(e){
        e.preventDefault();
        
        var form = $(this);
        var actionUrl = form.attr('action');
        
        $.ajax({
            type: "POST",
            url: actionUrl,
            data: form.serialize(),
            dataType: "json",
            success:function(data){
                // Process with the response data
            }
        });
    });
});


Like it? Share with your friends!

0
Developer

0 Comments