<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                submitForm($("#login-user-one"));
            });

            function submitForm(form) {
                console.log($(form).attr("method"));
                $(form).submit();
            };
        </script>
    </head>
    <body>
        <form id="login-user-one" name="login" method="POST" action="/test.html">
            <input name="userid" tabindex="1" value="MyUser">
            <input name="pass" type="password" tabindex="2" value="MyPass">
            <input type="submit" name="submit" value="1" tabindex="3">
        </form>
    </body>
</html>

Je n'arrive pas à comprendre pourquoi ce qui précède ne fonctionne pas. Le journal me montre la valeur de POST et pourtant il ne se soumettra pas. Il n'y a pas d'erreurs dans la console.

JS Fiddle : https://jsfiddle.net/t48hk9qx/

1
Bojan 14 mars 2019 à 01:49

2 réponses

Meilleure réponse

Eh bien, c'est un nouveau pour moi.

Étant donné que votre formulaire a un élément nommé avec name="submit", cette référence d'élément remplace le HTMLFormElement.prototype.submit() fonction.

De la documentation...

Les entrées nommées sont ajoutées à leur instance de formulaire propriétaire en tant que propriétés et peuvent écraser les propriétés natives si elles partagent le même nom (par exemple, un formulaire avec une entrée nommée action verra sa propriété action renvoyer cette entrée au lieu de l'attribut HTML action du formulaire).

JQuery tente d'exécuter cette fonction lors de la soumission par programme du formulaire avec quelque chose comme

if (typeof element.submit === 'function') {
  element.submit()
}

Mais dans votre cas, element.submit est un HTMLInputElement.

Solution rapide et facile, renommez votre élément submit, ou comme c'est plus souvent le cas avec les formulaires à un seul bouton, supprimez simplement l'attribut name.


Si vous devez conserver le bouton d'envoi nommé "soumettre", cela semble fonctionner

function submitForm(form) {
  // note, "form" is already a jQuery object
  console.log(form.attr("method"));

  HTMLFormElement.prototype.submit.call(form[0])
}
1
Phil 13 mars 2019 à 23:35

Supprimer le nom = soumettre dans votre entrée résoudra le problème. https://codesandbox.io/s/64kl2l3wvk. Je pense que parce que la fonction form.submit est remplacée par l'entrée avec le nom = soumettre.

1
duc mai 13 mars 2019 à 23:19