jQuery: le formulaire de soumission avec $("#id").submit (), mais va soumettre avec un bouton 'submit'?
<form method="post" action="load_statements.php?action=load" id="loadForm"
enctype="multipart/form-data">
c'est ma forme, qui semble bien pour moi. dans ce formulaire, j'ai mis ce bouton:
<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />
voici la fonction qu'il appelle:
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 n'est pas la soumission (ie. la page n'est pas rafraîchissant). pourquoi est-ce?
merci!
8 réponses
jQuery submit() ajoute un écouteur d'événement à se produire lorsque vous soumettez le formulaire. Donc votre code ne lie essentiellement rien à l'événement soumettre. Si vous souhaitez que ce formulaire soit soumis, vous utilisez JavaScript old-school (document.nomformulaire.soumettre.))(
edit:
je laisse ma réponse originale intacte pour indiquer où j'étais (comme au moins deux personnes m'ont déjà rétrogradé). Ce que je voulais dire pour dire, est-ce que si vous avez une fonction comme celle-ci, c'est déroutant pourquoi vous postez les valeurs dans une portion ajax et puis utilisez jQuery pour soumettre le formulaire. Dans ce cas, je voudrais lier l'événement de clic sur le bouton, puis retourne true si vous voulez qu'il revienne, sinon, retourne false, comme
$('#submit').click( function() {
// ajax logic to test for what you want
if (ajaxtrue) { return confirm(whatever); } else { return true;}
});
si cette fonction retourne true, alors il compte comme clic réussi du bouton Soumettre et le comportement normal du navigateur se produit. Alors vous avez aussi séparé la logique de le balisage sous la forme d'un gestionnaire d'événement.
plus de sens?
modifier le nom du bouton "Soumettre" à quelque chose d'autre. Qui provoque le problème. Voir la réponse de dennisjq à: http://forum.jquery.com/topic/submiting-a-form-programmatically-not-working
voir la documentation de jQuery submit ():
les formulaires et leurs éléments enfant ne doivent pas utiliser de noms d'entrée ou d'ID qui conflit avec les propriétés d'une forme, comme soumettre, la longueur, ou la méthode. Les conflits de noms peuvent causer des échecs confus. Pour une liste complète de règles et pour vérifier votre balisage pour ces problèmes, voir DOMLint.
j'utilise $("form")[0].submit()
ici $("form") renvoie un tableau D'éléments DOM de sorte qu'en accédant à l'index pertinent, nous pouvons obtenir L'objet DOM pour l'élément de forme et exécuter submit() fonction à l'intérieur de cet élément DOM.
si vous avez plusieurs éléments de forme dans une page html, vous devez avoir une idée de l'ordre correct de "forme"s
j'ai eu un problème similaire, a pris un certain temps pour comprendre. jQuery .la fonction submit () devrait déclencher un formulaire submit si vous ne lui passez pas un gestionnaire, mais la raison pour laquelle il ne le fait pas est que votre bouton submit s'appelle "submit" et supplante la fonction submit du formulaire.
i.e. jQuery appelle le <form>.submit() fonction de L'objet DOM, mais toutes les entrées d'une forme peuvent aussi être accessibles en appelant <form>.<inputname>. Donc, si l'un de vos commentaires est nommé "soumettre" il remplace le <form>.submit() fonction avec <form>.submit - étant l'élément DOM d'entrée.... si cela a du sens? Alors quand jQuery appelle!--0--> cela ne fonctionne pas car les soumettre n'est plus une fonction. Donc, si vous modifiez le nom de votre bouton, il doit travailler.
Je ne sais pas pourquoi la console n'enregistre pas une 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.
j'ai ajouté un bouton submit invisible au formulaire, et au lieu d'appeler la fonction submit (), j'appelle la fonction click() sur le bouton submit =)
le bouton:
<div style="display:none"><input id="alternateSubmit" type="submit" /></div>
la façon folle de contourner la soumission du formulaire:
$("#alternateSubmit").click();
effacer l'attribut "nom" de votre bouton envoyer :
voici votre code:
<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />
devrait être comme ceci :
<input type="button" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />
on dirait que vous avez le submit happening dans un callback qui ne tourne qu'après un post ajax dans votre handler onclick.
en d'autres termes, lorsque vous cliquez sur soumettre, le navigateur doit d'abord sortir et cliquer sur l'action checkForReplace.
son appel Ajax, pourquoi vous devez soumettre votre formulaire alors que vous avez déjà traiter en utilisant ajax. Vous pouvez naviguer loin de la page en utilisant
window.location.href = "/somewhere/else";