Comment faire quelque chose avant de soumettre ?

Question

J'ai un formulaire qui a un bouton qui soumet le formulaire. J'ai besoin de faire quelque chose avant que le formulaire ne soit soumis. J'ai essayé de faire onClick sur ce bouton, mais cela se produit après l'envoi.

Je ne peux pas partager le code mais, en général, que dois-je faire dans jQuery ou JS pour gérer cela ?

Answer 1

Si vous disposez d'un formulaire en tant que tel :

<form id="myform">
...
</form>

Vous pouvez utiliser le code jQuery suivant pour effectuer une action avant que le formulaire ne soit soumis :

$('#myform').submit(function() {
    // DO STUFF...
    return true; // return false to cancel form action
});

Mise à jour ; pour les versions plus récentes de JQuery (afin d'éviter les avertissements de dépréciation), essayez :

$('#myform').on('submit', function() {

    // ...

    return true;
});

Answer 2

Supposons que vous ayez un formulaire comme celui-ci :

<form id="myForm" action="foo.php" method="post">
   <input type="text" value="" />
   <input type="submit" value="submit form" />

</form>

Vous pouvez joindre un onsubmit -avec jQuery comme ceci :

$('#myForm').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

Si vous return false le formulaire ne sera pas soumis après la fonction, si vous renvoyez true ou rien, il sera soumis comme d'habitude.

Voir le Documentation jQuery pour plus d'informations.

Answer 3

Vous pouvez utiliser onclick pour exécuter du code JavaScript ou jQuery avant de soumettre le formulaire comme ceci :

<script type="text/javascript">
    beforeSubmit = function(){
        if (1 == 1){
            //your before submit logic
        }        
        $("#formid").submit();            
    }
</script>
<input type="button" value="Click" onclick="beforeSubmit();" />

Answer 4

Assurez-vous que le bouton de soumission n'est pas de type "submit", faites-en un bouton. Ensuite, utilisez l'événement onclick pour déclencher du javascript. Vous pouvez alors faire ce que vous voulez avant de poster vos données.

Answer 5

Forme :

<form id="formId" action="/" method="POST" onsubmit="prepareForm()">
   <input type="text" value="" />
   <input type="submit" value="Submit" />
</form>

Fichier Javascript :

function prepareForm(event) {
  event.preventDefault();
  // Do something you need
  document.getElementById("formId").requestSubmit();
}

Note : Si vous soutenez Safari (ce qui est sans doute le cas), vous devrez faire appel à un polyfill para requestSubmit()