Submitting a form with Jquery

Question

I would like to use JQuery to submit my form without reloading the page. How can I do this?

My Form:

<html>
<form method="post" action="submit.php">
    <input type="text" name="name"/>
    <input type="submit" name="submit" value="submit"/>
</form>
</html>

My PHP:

<?php
    $name= $_POST['name'];
        echo $name;
?>

you should really take a look at the jQuery's ajax method here : http://api.jquery.com/jQuery.ajax/ — Eric Martins, Feb 11 '13 at 22:54
do you mean you don't want the page to load, or do you want the submission to happen without reloading the page that the user is currently on? — Offbeatmammal, Feb 11 '13 at 22:54

Nick Tomlin · Answer 1 · 2013-02-11T23:00:31.637

2

As per comments, please refer to the jQuery docs/1000's of tutorials on the matter. Nonetheless:

$('#form-id').submit(function(){

// work yon javascript magicke

 });

Edit: do note this is a non ajax solution for a simple form submit (client side-validation etc.); if you want to get fancy refer to the other answers.

edited Feb 11 '13 at 23:00

answered Feb 11 '13 at 22:55

Nick Tomlin

28,402
11
61
90

score 1 · Answer 2 · answered Feb 11 '13 at 22:55

1

By using ajax :

$('form').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
       type: 'POST',
       url : 'submit.php',
       data: $(this).serialize()
    });
});

answered Feb 11 '13 at 22:55

adeneo

312,895
29
395
388

score 0 · Answer 3 · answered Feb 11 '13 at 22:57

You will need to wait until the document has loaded, then interupt the submit event, and run some ajax

$( document ).ready( function () {

    $( 'form' ).on( 'submit', function ( event ) {

        event.preventDefault();

        $.ajax({
            type: 'POST',
            url: '/mypage.php',
            data: $( this ).serialize(),
            success: function ( data ) {
                alert( data );
            }
        });

    }):

});

Submitting a form with Jquery

3 Answers3