2010-07-31 5 views

ответ

6

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

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

'.clickfunction()'? Вы имеете в виду '.click (function() {' – Harmen

+0

@Harmen .. Да, набрав ошибку. Спасибо – sTodorov

+0

@Gaby спасибо за редактирование – sTodorov

10

После нажатия на кнопку 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> 
4

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

Таким образом, до тех пор, как вы not using scriptlets in JSP запустить тяжелый бизнес материал, а класс сервлета, который в свою очередь отображает JSP в конце обработки, она будет работать, как вы ожидаете.