сообщение jquery для проверки и отправки

Я использую jquery для проверки каждого поля в моей форме, а также использую jquery для отображения сообщения «загрузка» после отправки формы. Теперь, в моем случае, я запутался, когда нажал кнопку отправки, будут показаны сообщения проверки, а также сообщение о загрузке. Мне нужно только сообщение о загрузке, которое будет отображаться, как только все будет правильно.

<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>

Как показать сообщение jquery после нажатия кнопки отправки

Я взял этот код, когда мне помог один из коллег, и теперь я хочу это сделать.


jquery jquery-validate
person maas    schedule 01.08.2010    source источник
comment
Где ваш код подтверждения?   -  person Jhong    schedule 01.08.2010

Ответы (3)


arrow_upward
3
arrow_downward

Ответ Ника почти сработал для меня, но я думаю, что вам также нужно отправить форму...

$(document).ready(function(){  
    $("#form").validate({  
        //other options...  
        submitHandler: function() {  
            $('#progress').show();   
            form.submit();  
        }  
    });  
});
person John Abbott    schedule 16.01.2011
comment
Это было бы лучше в качестве комментария к другому ответу. - person Ted Hopp; 02.12.2012

arrow_upward
1
arrow_downward

Если вы используете плагин проверки (мне неясно, из вопроса, но он помечен таким образом) просто немного переместите свой код. Вместо этого:

$(document).ready(function() { 
    $('#form').submit(function() { 
        $('#progress').show(); 
    }); 
});

Вы можете использовать submitHandler опцию плагина, только эта функция запускается после того, как форма успешно прошла проверку и была отправлена, например:

$("#form").validate({
  //other options...
  submitHandler: function() {
    $('#progress').show(); 
  }
});

Это означает, что просто удалите этот первый блок кода, код submitHandler — это все, что вам нужно было оставить для материала #progress.

person Nick Craver    schedule 01.08.2010

arrow_upward
0
arrow_downward

Возможно что-то вроде:

<input type="button" value="SUBMIT" onclick="validateFunction()">

Затем в вашем validateFunction, в конце, если все в порядке, вызовите document.form.submit(), который обработает ваш диалог загрузки и отправит форму.

Кроме того, в качестве примечания, поскольку вы заявили, что используете jquery для проверки, с вашей текущей настройкой человек с отключенным javascript все еще может отправлять неверные данные (вызывая всевозможные таблицы отбрасывания и еще много чего). С этим методом (подчинение вызывается внутри скрипта) они не смогут отправить ВООБЩЕ.

Другой маршрут:

<input type="submit" onclick="validateFunction();return false;">

И в конце вашей функции проверки установите для нее значение return (true/false), если можно отправлять или нет. ТОГДА повторите проверку на стороне сервера, используя PHP или что-то еще, и верните ошибку, если возникнут проблемы. Это позволяет пользователям без javascript по-прежнему пытаться отправить, но не уничтожать ваш сайт.

person WSkid    schedule 01.08.2010
comment
Я бы предложил поместить .click на эту кнопку отправки вместо того, чтобы помещать вызов функции onclick в сам входной атрибут. Упрощает отладку кода. - person Chris; 01.08.2010