jQuery - empêcher le défaut, puis continuer le défaut

Question

J'ai un formulaire qui, lorsqu'il est soumis, doit faire l'objet d'un traitement supplémentaire avant que le formulaire ne soit soumis. Je peux empêcher le comportement de soumission du formulaire par défaut, puis effectuer mon traitement supplémentaire (il s'agit essentiellement d'appeler l'API Google Maps et d'ajouter quelques champs cachés au formulaire) - et j'ai ensuite besoin que le formulaire soit soumis.

Existe-t-il un moyen d'"empêcher le défaut", puis un peu plus tard de "poursuivre le défaut" ?

Answer 1

C'est, à mon avis, la solution la plus générique et la plus robuste (si vos actions sont déclenchées par l'utilisateur, par exemple "l'utilisateur clique sur un bouton") :

• la première fois qu'un gestionnaire est appelé, vérifiez qui l'a déclenché :
  • si un utilisateur l'a déclenché - faites votre travail, puis déclenchez-le à nouveau (si vous le souhaitez) - de manière programmatique.
  • sinon - ne rien faire (= "continuer par défaut")

À titre d'exemple, notez cette solution élégante qui permet d'ajouter la fenêtre contextuelle "Are you sure ?" à n'importe quel bouton en décorant simplement un bouton avec un attribut. Nous poursuivrons conditionnellement le comportement par défaut si l'utilisateur ne se désinscrit pas.

1. Ajoutons un texte d'avertissement à chaque bouton pour lequel nous voulons une fenêtre popup "Êtes-vous sûr" :

<button class="btn btn-success-outline float-right" type="submit"  ays_text="You will lose any unsaved changes... Do you want to continue?"                >Do something dangerous</button>

2. Attachez des gestionnaires à TOUS ces boutons :

$('button[ays_text]').click(function (e, from) {
    if (from == null) {  // user clicked it!
        var btn = $(this);
        e.preventDefault();
        if (confirm() == true) {
            btn.trigger('click', ['your-app-name-here-or-anything-that-is-not-null']);
        }
    }
    // otherwise - do nothing, ie continue default
});

C'est tout.

Answer 2

Avec jQuery et une petite variation de la réponse de @Joepreludian ci-dessus :

Points importants à garder à l'esprit :

• .one(...) au lieu de .on(...) or .submit(...)
• named au lieu de la fonction anonymous function puisque nous y ferons référence dans le callback .

---

$('form#my-form').one('submit', function myFormSubmitCallback(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var $this = $(this);
    if (allIsWell) {
        $this.submit(); // submit the form and it will not re-enter the callback because we have worked with .one(...)
    } else {
        $this.one('submit', myFormSubmitCallback); // lets get into the callback 'one' more time...
    }
});

Vous pouvez modifier la valeur de allIsWell dans l'extrait ci-dessous pour true o false pour tester la fonctionnalité :

$('form#my-form').one('submit', function myFormSubmitCallback(evt){
  evt.stopPropagation();
  evt.preventDefault();
  var $this = $(this);
  var allIsWell = $('#allIsWell').get(0).checked;
  if(allIsWell) {
    $this.submit();
  } else {
    $this.one('submit', myFormSubmitCallback);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" id="my-form">
  <input name="./fname" value="John" />
  <input name="./lname" value="Smith" />
  <input type="submit" value="Lets Do This!" />
  <br>
  <label>
    <input type="checkbox" value="true" id="allIsWell" />
    All Is Well
  </label>
</form>

Bonne chance...

Answer 3

"Injection de validation sans boucle de soumission" :

Je veux juste vérifier reCaptcha et d'autres choses avant la validation HTML5, donc j'ai fait quelque chose comme ça (la fonction de validation renvoie true ou false) :

$(document).ready(function(){
   var application_form = $('form#application-form');

   application_form.on('submit',function(e){

        if(application_form_extra_validation()===true){
           return true;
        }

        e.preventDefault();

   });
});

Answer 4

D'une manière purement Javascript, vous pouvez soumettre le formulaire après avoir empêché le défaut.

Cela s'explique par le fait que HTMLFormElement.submit() n'appelle jamais le site onSubmit() . Nous nous appuyons donc sur cette spécification étrange pour soumettre le formulaire comme s'il n'avait pas de gestionnaire onsubmit personnalisé.

var submitHandler = (event) => {
  event.preventDefault()
  console.log('You should only see this once')
  document.getElementById('formId').submit()
}

Voir ce violon pour une demande synchrone.

---

Attendre la fin d'une requête asynchrone est tout aussi simple :

var submitHandler = (event) => {
  event.preventDefault()
  console.log('before')
  setTimeout(function() {
    console.log('done')
    document.getElementById('formId').submit()
  }, 1400);
  console.log('after')
}

Vous pouvez consulter mon violon pour une exemple d'une demande asynchrone.

---

Et si vous êtes en panne de promesses :

var submitHandler = (event) => {
  event.preventDefault()
  console.log('Before')
    new Promise((res, rej) => {
      setTimeout(function() {
        console.log('done')
        res()
      }, 1400);
    }).then(() => {
      document.getElementById('bob').submit()
    })
  console.log('After')
}

Et voici que demande .

Answer 5

Vous pouvez utiliser e.preventDefault() qui arrêtera l'opération en cours.

que vous pouvez faire $("#form").submit();

 $('#form').submit(function (e)
{
    return !!e.submit;
});
if(blabla...)
{...
}
else
{
    $('#form').submit(
    {
        submit: true
    });
}