jQuery: formulaire non soumis avec $ ("# id"). Submit(), mais soumis avec un bouton "submit"?

Question

<form method="post" action="load_statements.php?action=load" id="loadForm" 
          enctype="multipart/form-data"> 

c'est ma forme, ce qui me semble bien. sous cette forme, je mets ce bouton:

<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" /> 

est la fonction qu'il appelle ici.

function confirmSubmit() { 
    // get the number of statements that are matched 
    $.post(
     "load_statements.php?action=checkForReplace", 
     { 
      statementType : $("#statementType").val(), 
      year : $("#year").val() 
     }, 
     function(data) { 
      if(data['alreadyExists']) { 
       if(confirm("Statements already exist for " + $("#statementType").html() + " " + $("#year").val() + 
        ". Are you sure you want to load more statements with these settings? (Note: All duplicate files will be replaced)" 
       )) { 
        $("#loadForm").submit(); 
       } 
      } else { 
       $("#loadForm").submit(); 
      } 
     }, "json" 
    ); 
} 

et comme vous pouvez le voir, il appelle $("#loadForm").submit();, mais la forme ne soumet pas (la la page n'est pas rafraîchissante). pourquoi donc?

merci!

Answer 1

http://api.jquery.com/submit/

L'événement jQuery submit() ajoute un écouteur d'événement pour se produire lorsque vous soumettez le formulaire. Votre code ne lie donc essentiellement rien à l'événement submit. Si vous voulez que ce formulaire soit soumis, vous utilisez le JavaScript old-school (document.formName.submit()).

modifier:

Je laisse intacte ma réponse originale au point où je partais (au moins deux personnes ont déjà me downvoted pour). Ce que je veux dire, c'est que si vous avez une fonction comme celle-ci, il est déroutant pourquoi vous publieriez les valeurs dans une partie ajax et ensuite utiliser jQuery pour soumettre le formulaire. Dans ce cas, je lier l'événement au clic du bouton, puis revenez vrai si vous voulez revenir, sinon, return false, comme si

$('#submit').click(function() { 
    // ajax logic to test for what you want 
    if (ajaxtrue) { return confirm(whatever); } else { return true;} 
}); 

Si cette fonction retourne vrai, il compte comme succès cliquez sur le bouton soumettre et le comportement normal du navigateur se produit. Ensuite, vous avez également séparé la logique du balisage sous la forme d'un gestionnaire d'événements.

Avez-vous plus de sens?

Answer 2

Il semblerait que vous ayez le soumettre dans un rappel qui ne s'exécute qu'après un post ajax dans votre gestionnaire onclick. En d'autres termes, lorsque vous cliquez sur Envoyer, le navigateur doit d'abord sortir et appuyer sur l'action checkForReplace.

Answer 3

son appel Ajax, pourquoi vous devez soumettre votre formulaire alors que vous le traitez déjà en utilisant ajax. Vous pouvez naviguer dans la page en utilisant

window.location.href = "/somewhere/else"; 

Answer 4

i ajouté invisible bouton soumettre à la forme et au lieu d'appeler la fonction, j'appelle la fonction click() submit() sur le bouton submit =)

le bouton: <div style="display:none"><input id="alternateSubmit" type="submit" /></div>

la manière folle de contourner la soumission de formulaire: $("#alternateSubmit").click();

Answer 5

Changez le nom "submit" du bouton pour autre chose. Cela provoque le problème. Voir la réponse de dennisjq à: http://forum.jquery.com/topic/submiting-a-form-programmatically-not-working

Voir la documentation jQuery submit():

formes et leurs éléments enfants ne doivent pas utiliser les noms d'entrée ou ids conflit avec les propriétés d'une forme, par exemple soumettre , longueur ou méthode. Les conflits de noms peuvent provoquer des erreurs confuses. Pour une liste complète des règles et pour vérifier votre balisage de ces problèmes, consultez DOMLint.

Answer 6

J'utilise $("form")[0].submit()

ici $("form") retourne un tableau d'éléments DOM en accédant à l'indice pertinent que nous pouvons obtenir l'objet DOM pour l'élément de forme et exécuter la fonction submit() au sein de cet élément DOM.

Reculer est si vous avez plusieurs éléments de formulaire dans une page html, vous devez avoir une idée sur ordre de « forme » de

Answer 7

J'ai eu un problème similaire, a pris un certain temps pour comprendre. La fonction .submit() de jQuery doit déclencher un envoi de formulaire si vous ne lui transmettez pas de gestionnaire, mais la raison en est que votre bouton de soumission est nommé "submit" et remplace la fonction de soumission du formulaire.

En d'autres termes, jQuery appelle la fonction <form>.submit() de l'objet DOM, mais toutes les entrées d'un formulaire peuvent également être accessibles en appelant <form>.<inputname>. Donc, si l'une de vos entrées est nommée 'soumettre', elle remplace la fonction <form>.submit() par <form>.submit - étant l'élément DOM d'entrée .... si cela a du sens? Ainsi, lorsque jQuery appelle <form>.submit(), cela ne fonctionne pas car submit n'est plus une fonction. Donc, si vous changez le nom de votre bouton, cela devrait fonctionner.

Vous ne savez pas pourquoi la console ne consigne pas d'erreur, peut-être que jQuery vérifie d'abord que la fonction submit existe et ignore simplement la requête si la fonction n'existe pas.

Answer 8

effacer attribut "name" dans votre bouton Envoyer:

ceci est votre code:

<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" /> 

devrait ressembler à ceci:

<input type="button" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />