Как показать сообщение jquery после нажатия на кнопку отправить - PullRequest
4 голосов
/ 31 июля 2010

Я новичок в jquery и хотел бы узнать, как показать сообщение (например, пожалуйста, подождите, пока он отображается зеленым цветом или отправляет) после нажатия кнопки отправки.

Не могли бы вы помочь

Ответы [ 3 ]

11 голосов
/ 31 июля 2010

После нажатия кнопки submit обычно форма отправляется на сервер, и выполнение всех клиентских сценариев останавливается.Поэтому, если вы не измените форму, она не будет работать.Чтобы AJAXify своей формы вы могли присоединиться к событию submit и заменить действие по умолчанию:

$(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;
    });
});

и вашу разметку:

<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>
6 голосов
/ 31 июля 2010

Может быть, это поможет:

$('#submitButtonID').click(function(){
 alert('Please wait while form is submitting');
 $('#formID').submit();
});
4 голосов
/ 31 июля 2010

Аяксификация формы не нужна.Вы можете просто показать скрытый элемент 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 в конце обработки, он будет работать, как вы ожидаете.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...