ansaurus

Question

How to show jquery message after clicking on submit button

Answer 1

A:

Hey,

May be this will help:

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

sTodorov 2010-07-31 09:05:30

`.clickfunction()`? You mean `.click(function(){`

Harmen 2010-07-31 09:09:18

@Harmen.. Yes, typing mistake. Thank you

sTodorov 2010-07-31 09:18:27

@Gaby thanks for the edit

sTodorov 2010-07-31 09:19:09

Answer 2

+1 A:

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>

Darin Dimitrov 2010-07-31 09:07:44

Answer 3

+1 A:

Ajaxifying the form is not needed. You can just show a hidden div element during submit. As long as the server side hasn't sent any bit of the response back, the webbrowser will keep displaying the initial page.

You can use CSS display: none to initially hide an element. You can use jQuery.show() to show the element(s) matching the selector.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3377468</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
        <script>
            $(document).ready(function() {
                $('#form').submit(function() {
                    $('#progress').show();
                });
            });
        </script>
        <style>
            #progress { 
                display: none;
                color: green; 
            }
        </style>            
    </head>
    <body>
        <form id="form" action="servlet-url" method="post">
            ...
            <input type="submit">
        </form>
        <div id="progress">Please wait...</div>
    </body>
</html>

So, as long as you are not using scriptlets in JSP to run heavy business stuff, but rather a servlet class which in turn displays the JSP at end of the processing, it'll work as you expect.

BalusC 2010-07-31 13:30:27

Answer 4

A:

Thanks all of you for your helpful answers.

All that I need is to include this or I should put some events in the submit button or add some libraries?

maas 2010-07-31 16:35:35

Answer 5

A:

I have tried the solution which is provided by BalusC and it worked, but I am having one more thing is that

even if there are errors, it will show the message. I need the message only to be displayed while submitting the form and everything is correct.

Can you please help

maas 2010-08-01 06:38:05

ansaurus

tags:

views:

answers:

How to show jquery message after clicking on submit button

related questions