web-dev-qa-db-fra.com

jQuery: formulaire ne soumettant pas avec $ ("# id"). submit (), mais soumettra-t-il avec un bouton "soumettre"?

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

c'est ma forme, qui me va bien. sous cette forme, je mets 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 le formulaire ne se soumet pas (c'est-à-dire que la page n'est pas rafraîchissante). pourquoi donc?

merci!

jqueryformsform-submit
37
Garrett

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

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

Je laisse intacte ma réponse ci-dessus pour indiquer où je me trouvais. Ce que je signifiait pour dire, c'est que si vous avez une fonction comme celle-ci, c'est déroutant pourquoi vous publieriez les valeurs dans une partie ajax, puis utilisez jQuery pour soumettre le formulaire. Dans ce cas, je lierais l'événement au clic du bouton, puis retournerais vrai si vous voulez qu'il revienne, sinon, retournez faux, comme ceci:

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

Si cette fonction renvoie true, elle compte comme un clic réussi sur le bouton d'envoi 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.

J'espère que cela a plus de sens.

17
NateDSaint

Remplacez le nom "soumettre" du bouton par autre chose. Cela cause 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 ():

Les formulaires et leurs éléments enfants ne doivent pas utiliser de noms ou d'ID d'entrée qui entrent en conflit avec les propriétés d'un formulaire, telles que la soumission, la longueur ou la méthode. Les conflits de noms peuvent provoquer des échecs déroutants. Pour une liste complète des règles et pour vérifier votre balisage pour ces problèmes, voir DOMLint.

76
Adam Berecz

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

ici $("form") renvoie un tableau d'éléments DOM donc en accédant à l'index approprié, nous pouvons obtenir l'objet DOM pour l'élément form et exécuter la fonction submit() dans cet élément DOM.

Le retour en arrière est que si vous avez plusieurs éléments de formulaire dans une page html, vous devez avoir une idée de l'ordre correct des "formulaires".

19
sahan maldeniya

J'ai eu un problème similaire, j'ai mis du temps à le comprendre. La fonction .submit () de jQuery devrait déclencher une soumission de formulaire si vous ne lui passez pas de gestionnaire, mais la raison est que votre bouton d'envoi est nommé "soumettre" et remplace la fonction d'envoi du formulaire.

c'est-à-dire que 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 n'enregistre pas d'erreur, peut-être que jQuery vérifie d'abord que la fonction de soumission existe et ignore simplement la demande si la fonction n'existe pas.

13
Donovan

j'ai ajouté un bouton d'envoi invisible au formulaire, et au lieu d'appeler la fonction submit (), j'appelle la fonction click () sur le bouton d'envoi =)

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

la façon folle de contourner la soumission du formulaire: $("#alternateSubmit").click();

4
Garrett

effacez l'attribut "nom" dans votre bouton d'envoi:

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" />
3
Robith Ritz