All geek questions in one place

How to show jquery message after clicking submit button

I am new to jquery and would like to know how to show message (ex, please wait in green or send) after clicking submit button.

You can help

+3
source share
3 answers

Perhaps this will help:

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

After you click the button submit, usually the form is sent to the server, and all client script actions are terminated. Therefore, if you do not AJAXify your form, this will not work. In order to AJAXify your form, you can 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>
+10
source

. div . - , - .

CSS display: none . jQuery.show(), (), .

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3377468</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <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>

, JSP -, , , , JSP , .

+4

Source: https://habr.com/ru/post/1757451/

More articles:


All Articles