Разница в отправке формы HTML между click (), submit () и щелчком вручную в jquery

Question

У меня есть страница jsp следующим образом:

<script type="text/javascript" src="/mywebapp/js/jquery.js"></script>
<script type="text/javascript">         
 $( function() {  
  $('#testform').submit(function(){
   alert('now starting submit');
   return true;
  });

  $("#test1btn").click(function(){
   $('#testform #submit').click();    
  }); 
  $("#test2btn").click(function(){
   $('#testform').submit();    
  }); 
 });    
</script>
<form id="testform" method="post"  action="backend/search_test.do">
<input id="reqpagenr" name="reqpagenr" size="10">
<input type="button" id="test1btn"  value="TestClick"/>
<input type="button" id="test2btn"  value="TestSubmit"/>
<input id="submit" type="submit" value="Go">
</form>

Когда я вручную (т.е. с помощью мыши) нажимаю кнопку «Перейти», форма отправляется после отображения текста «сейчас начинается отправка»;при нажатии кнопки «TestClick» форма успешно отправляется, но текст «сейчас начинается отправка» не появляется;при нажатии кнопки «TestSubmit» появляется текст «сейчас начинается отправка», но форма не отправляется вообще.

Вопреки моим ожиданиям, кнопки «TestClick» и «TestSubmit» не работают, как кнопка «Go», когда обе кнопки нажимаются.В моем понимании, три нажатия кнопки должны сделать то же самое, то есть отправить форму после того, как появится текст «сейчас начинается отправка».Итак, мой вопрос, почему результаты трех нажатий кнопок отличаются?

Я использую jquery 1.3.2

Answer 1

Похоже, что обработчик события submit в jQuery игнорируется при ручной настройке отправки формы через $ ('# testform'). Submit ();

Это должно работать в обработчике кликов:

$('#testform').trigger("submit")

Answer 2

Вторая кнопка не отправляет форму из-за ошибки в jQuery (или DOM), которая приводит к сбою метода submit, если идентификатор кнопки отправки - 'submit'. Смотри: http://bugs.jquery.com/ticket/1414

Answer 3

ОБНОВЛЕНО:

• ДЕМО: http://aseptik.net/demo/html-form-submission-difference-between-click-submit-and-manual-click-in-jqu/

1. на самом деле, как сказал richardml , первая проблема, с которой вы столкнулись, это ошибка jQuery, поэтому первым делом нужно переименовать id отправки на что-то другое.

2. Вторая проблема - type из test1btn input, который должен быть type="submit", чтобы вести себя как обычная кнопка отправки.

Хитростьизменить тип при наведении мыши, чтобы код выглядел следующим образом:

$(function() {
    $('#testform').submit(function() {
        alert('now starting submit');
    });
    //TestClick
    $('#test1btn').hover(function() {
        $(this)[0].setAttribute('type', 'submit');
    },function() {
        $(this)[0].setAttribute('type', 'button');
    });
    //TestSubmit
    $('#test2btn').click(function() {
        $('#testform').submit();
    });
});

Остальное работает, как и ожидалось.

надеюсь, что эта помощь

Answer 4

вы должны использовать событие onsubmit для запуска функции.

<form id="testform" method="post" onsubmit="foo()" action="backend/search_test.do">

это вызовет foo () всякий раз, когда вы отправляете форму, используя кнопку submit или метод submit ().*