J'ai un formulaire qui, une fois soumis, je dois effectuer un traitement supplémentaire avant de pouvoir le soumettre. Je peux empêcher le comportement de soumission de 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 masqués au formulaire) - puis j'ai besoin du formulaire pour le soumettre.

Existe-t-il un moyen "d'empêcher la valeur par défaut", puis un peu plus tard "continuer par défaut?"

Lorsque vous liez l' .submit()événement au formulaire et que vous faites les choses que vous voulez faire avant de retourner (vrai), ces choses se produisent avant la soumission réelle.

Par exemple:

$('form').submit(function(){
    alert('I do something before the actual submission');
    return true;
});

Exemple simple

Un autre exemple sur jquery.com: http://api.jquery.com/submit/#entry-examples

Utilisation jQuery.one()

Attachez un gestionnaire à un événement pour les éléments. Le gestionnaire est exécuté au plus une fois par élément et par type d'événement

$('form').one('submit', function(e) {
    e.preventDefault();
    // do your things ...

    // and when you done:
    $(this).submit();
});

L'utilisation de oneprevent également une boucle infinie car cet submitévénement personnalisé est détaché après la première soumission.

Je ferais juste:

 $('#submiteButtonID').click(function(e){
     e.preventDefault();
     //do your stuff.
     $('#formId').submit();
 });

Appelez d' preventDefaultabord et utilisez la submit()fonction plus tard, si vous avez juste besoin de soumettre le formulaire

En utilisant cette méthode, vous ferez une boucle sans fin sur votre JS. pour mieux faire, vous pouvez utiliser les éléments suivants

var on_submit_function = function(evt){
    evt.preventDefault(); //The form wouln't be submitted Yet.
    (...yourcode...)

    $(this).off('submit', on_submit_function); //It will remove this handle and will submit the form again if it's all ok.
    $(this).submit();
}

$('form').on('submit', on_submit_function); //Registering on submit.

J'espère que ça aide! Merci!

C'est, à mon humble 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é check, l'OMS l'a déclenché:
  • si un utilisateur l'a fait tigger - faites votre travail, puis déclenchez-le à nouveau (si vous le souhaitez) - par programme
  • sinon - ne rien faire (= "continuer par défaut")

A titre d'exemple, notez cette solution élégante pour ajouter "Êtes-vous sûr?" popup à n'importe quel bouton simplement en décorant un bouton avec un attribut. Nous continuerons conditionnellement le comportement par défaut si l'utilisateur ne se désiste pas.

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

<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.

$('#myform').on('submit',function(event){
  // block form submit event
  event.preventDefault();

  // Do some stuff here
  ...

  // Continue the form submit
  event.currentTarget.submit();
});

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

Points importants à garder à l'esprit:

• .one(...) plutôt sur .on(...) or .submit(...)
• namedfonction au lieu de anonymous functionpuisque nous le référencerons 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 la allIsWellvariable dans l'extrait ci-dessous en trueou falsepour 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...

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

C'est parce que HTMLFormElement.submit() n'appelle jamais le onSubmit(). Nous nous appuyons donc sur cette bizarrerie de spécification pour soumettre le formulaire comme s'il n'avait pas de gestionnaire onsubmit personnalisé ici.

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

Voir ce violon pour une requête 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 un exemple de requête asynchrone.

Et si vous n'avez pas 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 cette demande .

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

que tu peux faire$("#form").submit();

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

"Injection de validation sans boucle d'envoi":

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

$(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();

   });
});