web-dev-qa-db-fra.com

action de formulaire avec javascript

J'ai un formulaire qui doit exécuter une fonction javascript lors de l'envoi, la fonction publie ensuite des données sur mon fichier d'envoi de courrier php et le courrier est envoyé. Mais cela ne fonctionne que dans le renard de feu. L'action de formulaire ne semble rien faire dans IE, ma question est la suivante: est-ce la bonne façon d'appeler une fonction à partir d'un fichier externe à partir de l'action de formulaire:

action="javascript:simpleCart.checkout()"

simpleCart est le fichier .js et checkout () est la fonction.

Conseils appréciés, peinant à comprendre pourquoi cela fonctionnerait dans Firefox mais pas dans IE, chrome ou safari.

<form name=form onsubmit="return validateFormOnSubmit(this)" enctype="multipart/form-data" action="javascript:simpleCart.checkout()" method="post">
javascriptforms
25
whispering_Jack

Une action de formulaire définie sur une fonction JavaScript n'est pas largement prise en charge. Je suis surpris que cela fonctionne dans FireFox.

Le mieux est de simplement définir le formulaire action dans votre script PHP; si vous devez faire quelque chose avant la soumission, vous pouvez simplement ajouter à onsubmit

Edit s'est avéré que vous n'aviez besoin d'aucune fonction supplémentaire, juste un petit changement ici:

function validateFormOnSubmit(theForm) {
    var reason = "";
    reason += validateName(theForm.name);
    reason += validatePhone(theForm.phone);
    reason += validateEmail(theForm.emaile);

    if (reason != "") {
        alert("Some fields need correction:\n" + reason);
    } else {
        simpleCart.checkout();
    }
    return false;
}

Puis sous votre forme:

<form action="#" onsubmit="return validateFormOnSubmit(this);">
46
Ja͢ck

Absolument valide.

<form action="javascript:alert('Hello there, I am being submitted');">
    <button type=submit>
        Let's do it
    </button>
</form>
<!-- Tested in Firefox, Chrome, Edge and Safari -->

Donc, pour une réponse courte: yes , ceci est une option et une option intéressante. Il dit "une fois soumis, veuillez ne pas aller ailleurs, exécutez simplement ce script" - tout à fait.

MAIS

Il y a un inconvénient mineur lorsque vous essayez de faire ceci:

<form action="javascript:myFunction(this)">  <!-- won't give you the sender -->

Ce n'est pas ce que vous attendez; this devrait vous donner l'objet émetteur, mais ce n'est pas le cas. Par conséquent, je suggérerais le format suivant, il ne contient que quelques caractères de plus et fonctionne à merveille:

manière recommandée

<form action="javascript:;" onsubmit="myFunction(this)">  <!-- now you have it! -->

... vous pouvez maintenant accéder correctement au formulaire d'envoi. (Vous pouvez écrire un simple "#" comme action, c'est assez courant, mais cela a pour effet secondaire de faire défiler vers le haut lors de la soumission.)

Encore une fois, j'aime cette approche car elle s'explique sans effort et sans explication. Pas de "retour faux", pas de jQuery/domReady, pas d'armes lourdes. Il fait juste ce qu'il semble faire. Certes, d'autres méthodes fonctionnent aussi, mais pour moi, c'est The Way Of The Samurai.

ne note sur la validation

Si vous avez juste besoin d'une validation et allez sur une autre page si et seulement si le formulaire était correctement rempli, c'est la chose la plus simple à faire:

<form action="/something.php" onsubmit="return myFunction(this)">

Maintenant, votre fonction sera exécutée avant la soumission aura lieu; et si elle retourne vrai (-ish), /quelquechose.php aura votre contenu. Les valeurs faussement conservent le navigateur sur la page et vous pouvez commencer à crier à l'utilisateur pour une entrée non valide.

30
dkellner

J'inclus toujours les fichiers js dans l'en-tête du document html et dans l'action, il suffit d'appeler la fonction javascript. Quelque chose comme ça:

action="javascript:checkout()"

Vous essayez ça?

N'oubliez pas d'inclure la référence du script dans la tête html.

Je ne sais pas pourquoi cela fonctionne dans Firefox. Cordialement.

1
vfabre