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

Можете ли вы помочь

5
maas 31 Июл 2010 в 13:00

3 ответа

Лучший ответ

Возможно, это поможет:

$('#submitButtonID').click(function(){
 alert('Please wait while form is submitting');
 $('#formID').submit();
});
7
Gabriele Petrioli 31 Июл 2010 в 13:14
2
.clickfunction()? Вы имеете в виду .click(function(){
 – 
Harmen
31 Июл 2010 в 13:09
@Harmen .. Да, опечатка. Спасибо
 – 
sTodorov
31 Июл 2010 в 13:18

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

5
Community 23 Май 2017 в 15:19

Обычно после нажатия кнопки submit форма отправляется на сервер, и выполнение всех клиентских скриптов прекращается. Поэтому, если вы не AJAXify свою форму, это не сработает. Чтобы использовать 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>
11
Darin Dimitrov 31 Июл 2010 в 13:07