différence de soumission de formulaire HTML entre un clic (), soumettre () et cliquez sur manuel jquery

Question

J'ai une page jsp comme suit:

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

Lorsque je clique manuellement (à savoir l'aide d'une souris) sur le bouton « Go », le formulaire est soumis après l'affichage du texte « à partir de maintenant soumettre »; quand cliquez sur le bouton « TestClick », le formulaire est soumis avec succès mais le texte « dès à présent soumettre » ne vient pas; quand cliquez sur le bouton « TestSubmit », le texte « dès à présent soumettre » apparaît, mais la forme n'est pas soumis à tous.

Contrairement à mes expections, les boutons « TestClick » et « TestSubmit » ne fonctionnent pas comme le bouton « Go » fait lorsque les deux sont cliqués. Dans ma compréhension, les trois clics de bouton doit faire la même chose, qui est, de soumettre le formulaire après le texte « dès à présent soumettre » apparaît. Donc, ma question est, pourquoi les résultats des trois clics de bouton est différent?

J'utilise jquery 1.3.2

Answer 1

Le second bouton ne présente pas la forme à cause d'un bogue dans jQuery (ou DOM) qui provoque la méthode submit à l'échec si le soumettre id Buttonés « submit ». Voir: http://bugs.jquery.com/ticket/1414

Answer 2

Il semble que le gestionnaire d'événements est présenter jQuery s'ignoré lors de la configuration manuelle du formulaire envoyer par $ ( « # TestForm ») soumettre ().

Cela devrait fonctionner dans le gestionnaire de clic:

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

Answer 3

MISE À JOUR:

  

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

1. richardml a dit le premier problème que vous avez est un bug jQuery donc première chose est de renommer le id du soumettre à autre chose.

2. deuxième problème est le type du test1btn input qui devrait être type="submit" pour se comporter comme un bouton d'envoi normal.

L'astuce est de changer le type de vol stationnaire de la souris, de sorte que le code ressemblera à ceci:

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

Le reste fonctionne comme prévu.

espère que cette aide

Answer 4

vous devez utiliser l'événement onsubmit pour déclencher la fonction à la place.

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

cela déclenchera la méthode foo () chaque fois que vous soumettez le formulaire que ce soit en utilisant le bouton d'envoi ou soumettre ().