HTML-Formular Vorlage Unterschied zwischen click (), submit () und manuellem Klick in jquery

Question

Ich habe eine jsp Seite wie folgt:

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

Wenn ich manuell klicken (das heißt mit einer Maus) auf die Schaltfläche „Go“ wird das Formular abgeschickt, nachdem die Anzeige von Text „jetzt einreichen beginnen“; wenn Sie die Taste „TestClick“ klicken, ist die Form erfolgreich eingereicht, aber der Text „ab jetzt einreichen“ nicht kommen; wenn Sie die Taste „TestSubmit“ klicken, wird der Text „ab jetzt einreichen“ erscheint, aber die Form ist nicht vorgelegt.

Im Gegensatz zu meinen Erwartungen, die Tasten „TestClick“ und „TestSubmit“ funktionieren nicht wie die Schaltfläche „Go“ macht, wenn beide angeklickt werden. In meinem Verständnis, die drei Tastenklicks sollten das gleiche tun, das heißt, die Form nach dem Text einreichen „jetzt beginnt Eintragen“ erscheint. Also meine Frage ist, warum die Ergebnisse der drei Tastenklicks ist anders?

Ich bin mit jquery 1.3.2

Answer 1

Der zweite Absenden-Button nicht die Form aufgrund eines Fehlers in jQuery (oder DOM), die die submit Methode fehlschlagen, wenn die Schaltfläche ID übermittelt wird ‚Senden‘. Siehe: http://bugs.jquery.com/ticket/1414

Answer 2

Es sieht aus wie die Event-Handler jQuery einreichen wird ignoriert wird, wenn manuell das Formular über $ ( '# Testform' genannt) mit submit ().

Dies sollte im Click-Handler arbeiten:

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

Answer 3

AKTUALISIERT:

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

1. eigentlich als richardml sagte das erste Problem, das Sie haben, ist ein jQuery Bug so erste Sache ist, die umbenennen id der einreichen, um etwas anderes.

2. zweites Problem ist die type der test1btn input die type="submit", um wie ein normaler Submit-Button verhalten sollte.

Der Trick ist, die Art auf Mausbewegung zu ändern, so dass der Code wie folgt aussehen:

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

Der Rest arbeitet wie erwartet.

hoffen, dass diese Hilfe

Answer 4

sollten Sie das onsubmit Ereignis verwenden, um die Funktion statt auszulösen.

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

das wird die foo auslösen (), wenn Sie das Formular ab, ob mithilfe der Schaltfläche zum Senden oder Bestaetigung () -Methode.