How to show jquery message after clicking on submit button

Question

I am new to jquery and would like to learn how to show a message (e.x please wait in green color or submitting ) after clicking on the submit button.

Can you please help

Answer 1

After you click on a submit button usually the form is submitted to the server and all client script execution stops. So unless you AJAXify your form it won't work. In order to AJAXify your form you could attach to the submit event and replace the default action:

$(function() {
    $('#theForm').submit(function() {
        // show a hidden div to indicate progression
        $('#someHiddenDiv').show();

        // kick off AJAX
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function() {
                // AJAX request finished, handle the results and hide progress
                $('#someHiddenDiv').hide();
            }
        });
        return false;
    });
});

and your markup:

<form id="theForm" action="/foo" method="post">
    <input name="foo" type="text" />
    <input type="submit" value="Go" />
</form>

<div id="someHiddenDiv" style="display: none;">Working...</div>

Answer 2

May be this will help:

$('#submitButtonID').click(function(){
 alert('Please wait while form is submitting');
 $('#formID').submit();
});