html-форма разница между click (), submit () и ручным щелчком в jquery

У меня есть страница 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>

когда я вручную нажимаю (т. е. с помощью мыши) кнопку "Go", форма отправляется после отображения текста "now starting submit"; когда нажмите кнопку "TestClick", форма успешно отправлена, но текст "now starting submit" не появляется; когда нажмите кнопку "TestSubmit", появляется текст "now starting submit", но форма не отправлена вообще.

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

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

8
forms jquery submission

4 ответов

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

5

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

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

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

обновление:

  1. на самом деле как richardml сказал, что первая проблема у вас есть ошибка jQuery, поэтому первое, что нужно переименовать id of the submit to something else.

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

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

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

1

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

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

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

0