web-dev-qa-db-fra.com

Fonction JQuery AVANT la soumission du formulaire

J'essaie d'activer une fonction à l'aide de JQuery lorsque l'utilisateur clique sur le bouton d'envoi de formulaire, mais la fonction doit être activée AVANT que le formulaire soit effectivement soumis.

J'essaie de copier certains attributs de balises div dans des champs de texte masqués lors de la soumission, puis de soumettre le formulaire.

J'ai réussi à faire en sorte que cela fonctionne à l'aide de la fonction mouseover (lorsque le bouton d'envoi est survolé), mais cela ne fonctionnera pas sur les appareils mobiles utilisant le toucher.

$("#create-card-process.design #submit").on("mouseover", function () {
    var textStyleCSS = $("#cover-text").attr('style');
    var textbackgroundCSS = $("#cover-text-wrapper").attr('style');
    $("#cover_text_css").val(textStyleCSS);
    $("#cover_text_background_css").val(textbackgroundCSS);
});

J'ai joué avec la fonction .submit, mais les valeurs ne sont pas enregistrées dans les champs car la fonction est activée lorsque le formulaire est soumis et non avant.

Merci beaucoup

jqueryformsform-submit
54
Matt Price

Vous pouvez utiliser la fonction onsubmit.

Si vous renvoyez false, le formulaire ne sera pas envoyé. Lisez à ce sujet ici .

$('#myform').submit(function() {
  // your code here
});
85
kartikluke
$('#myform').submit(function() {
  // your code here
})

Ce qui précède, c'est PAS travaillant dans Firefox. Le formulaire sera simplement soumis sans exécuter votre code au préalable. Les questions similaires sont également mentionnées ailleurs ... telles que cette question . Le travail sera autour

$('#myform').submit(function(event) {

 event.preventDefault(); //this will prevent the default submit

  // your code here (But not asynchronous code such as Ajax because it does not wait for response and move to next line.)

 $(this).unbind('submit').submit(); // continue the submit unbind preventDefault
})
44
Waqas Bukhary

Aghhh ... il me manquait du code quand j'ai essayé la fonction .submit .....

Cela marche:

$('#create-card-process.design').submit(function() {
var textStyleCSS = $("#cover-text").attr('style');
var textbackgroundCSS = $("#cover-text-wrapper").attr('style');
$("#cover_text_css").val(textStyleCSS);
$("#cover_text_background_css").val(textbackgroundCSS);
});

Merci pour tous vos commentaires. 

2
Matt Price

Vous pouvez utiliser un div ou un span au lieu d'un bouton, puis cliquer sur une fonction qui envoie le formulaire à la fin.

<form id="my_form">
   <span onclick="submit()">submit</span>
</form>

<script>
   function submit()
   {   
       //do something
       $("#my_form").submit();
   }
</script>
2
Skriptotajs

Sur la base de la réponse de Wakas Bukhary, vous pouvez la rendre asynchrone en insérant la dernière ligne dans l'étendue de la réponse.

$('#myform').submit(function(event) {

  event.preventDefault(); //this will prevent the default submit
  var _this = $(this); //store form so it can be accessed later

  $.ajax('GET', 'url').then(function(resp) {

    // your code here 

   _this.unbind('submit').submit(); // continue the submit unbind preventDefault
  })  
}
0
SoMa

Tout simplement parce que j'ai fait cette erreur à chaque fois lorsque j'utilisais la fonction d'envoi.

C'est le code complet dont vous avez besoin: 

Ajoutez l’ID " yourid " à la balise de formulaire HTML. 

<form id="yourid" action='XXX' name='form' method='POST' accept-charset='UTF-8' enctype='multipart/form-data'>

le code jQuery: 

$('#yourid').submit(function() {
  // do something
});
0
meck373