Efficient way to use jquery submit

Question

I am looking for a basic jQuery function to submit a form without refreshing the page. I had this once but I can't find it, all I can find is the long boring and complicated ones you have to update to add an input field into the form.

From what i remember the code includes the URL of the process file, the form id and the #results id.

please read FAQ, search before asking, this Q is going to be closed soon or marked as duplicate. FYI: you are looking for AJAX solution (no refresh). — Kyslik, Jun 08 '13 at 11:13
[jQuery AJAX submit form](http://www.stackoverflow.com/questions/1960240/jquery-ajax-submit-form) look for first answer that is what you need — Kyslik, Jun 08 '13 at 11:26
is ajax going to force browser reload whole page? I probably do not understand question and i should really learn to read. — Kyslik, Jun 08 '13 at 11:30
@user1926053 [of course it is](http://stackoverflow.com/a/11855073/1073758). — moonwave99, Jun 08 '13 at 11:33

score 1 · Answer 1 · answered Jun 08 '13 at 11:41

you can use Ajax form submit as follow;

<form id="formId" action="url" method="post">

</form>

 <script type="text/javascript">
    var form = $('#formId');
    form .submit(function () {
    $.ajax({
        type: "POST",
        url: "url",// url which you want to post
        data: formData,
        success: function (data) {
            alert('success');
        },
        error: function(jqXHR, textStatus, errorMessage) {
            alert(errorMessage); // Optional
        }
    });
});
</script>

score 1 · Answer 2 · answered Jun 08 '13 at 11:46

    <?php
        $message = '';
        if( isset( $_GET['name'] ) ) {
            if( empty( $_GET['name'] ) ) $message = 'Name is required';
            else $message = 'Form submitted successfully.';
        }
    ?>
    <form id="ajax-form">
        <input name="name" type="text">
        <input type="submit">
        <div id="message"> <?php echo $message; ?> </div>
    </form>

    <script>
        $( '#ajax-form' ).submit( function( e ) {
            e.preventDefault();
            var query = $(this).serialize();
            $(this).find('#message').load( window.location.href + '?' + query + ' #ajax-form #message' );
        });
    </script>

Efficient way to use jquery submit

2 Answers2