web-dev-qa-db-fra.com

Comment envoyer un formulaire en cliquant sur un bouton lorsque j'utilise preventDefault ()?

J'utilise .preventDefault() de jQuery pour empêcher l'envoi de formulaire lorsque les utilisateurs cliquent sur la touche [ENTRER]. Le problème est qu'il arrête également la soumission du formulaire lorsque je clique sur le bouton Soumettre.

Je vois qu'il y a beaucoup de threads sur Stackoverflow en ce qui concerne .preventDefault(), mais aucun d'entre eux ne résout mon problème.

Voici le code sur lequel je travaille actuellement.

// Part of my form
<form id="subscription_order_form" class=""  method="post" action="some_url"> 
  <button id="btn_order" type="submit">Order</button>
</form>

// Prevent the form to be submitted on ENTER
$('#subscription_order_form').submit(function(e){
  e.preventDefault();
});

// Controll data
$('#btn_order').click(function(){
  checkMandatoryFields();
});


// Check mandatory fields before subitting:
function checkMandatoryFields(e){

  // Code for testing here

  // Set "error" message and abort submission
  if(msg.length > 0) {
    // Do something
  } else {

    //submit or trigger is not recognized as functions
    $('#subscription_order_form').submit(); //.trigger('submit');

  }
}

Quelqu'un peut-il me dire quel est son code pour envoyer le formulaire en cliquant sur le bouton?

jqueryformssubmit
9
Steven

Déclenchez l'événement submit sur le nœud DOM, et non sur un objet jQuery.

$('#subscription_order_form')[0].submit();

ou

$('#subscription_order_form').get(0).submit();

ou

document.getElementById("subscription_order_form").submit();

Cela contourne l'événement lié à jQuery permettant au formulaire de se soumettre normalement.

28
Kevin B

Remplacez le bouton d'envoi par un bouton normal et gérez la soumission dans son événement onClick.

Pour autant que je sache, il n'y a aucun moyen de savoir si le formulaire a été envoyé par la touche Entrée ou le bouton Envoyer.

5
Hans Hohenfeld

Remplacez ceci:

$('#subscription_order_form').submit(function(e){
  e.preventDefault();
});

avec ça:

$('#subscription_order_form').on('keydown', function(e){
    if (e.which===13) e.preventDefault();
});

VIOLON

Cela empêchera le formulaire de se soumettre lorsque la touche Entrée est enfoncée car elle empêche l'action par défaut de la touche, mais le formulaire se soumettra normalement au clic.

5
adeneo

Vous devez utiliser

$(this).parents('form').submit()
4
Romain

Ok, d'abord e.preventDefault(); ce n'est pas un élément Jquery, c'est une méthode de javascript, maintenant ce qui est vrai c'est que si vous ajoutez cette méthode vous évitez de soumettre l'événement, maintenant ce que vous pourriez faire c'est envoyer le formulaire par ajax quelque chose comme ça

$('#subscription_order_form').submit(function(e){
    $.ajax({
     url: $(this).attr('action'),
     data : $(this).serialize(),
     success : function (data){

      }
   });
    e.preventDefault();
});
0
Jorge