Comment empêcher les boutons de soumettre des formulaires

vous utilisez un élément de bouton HTML5. Rappelez-vous la raison est ce bouton a un comportement par défaut de soumettre, comme indiqué dans la spécification W3 comme vu ici: W3C HTML5 bouton

ainsi vous devez spécifier son type explicitement:

<button type="button">Button</button>

afin de remplacer le type submit par défaut. Je veux juste souligner la raison pour laquelle ce qui se passe =)

=)

définissez le type sur vos boutons:

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

...qui va les empêcher de déclencher une action soumettre lorsqu'une exception se produit dans le gestionnaire d'événements. Puis, fixez votre fonction removeItem() pour qu'elle ne déclenche pas une exception:

function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    // change: work on filtered jQuery object
    rows.filter(":last").html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}

Notez le changement: votre code original a extrait un élément HTML de l'ensemble jQuery, puis a essayé d'appeler une méthode jQuery sur elle - cela a jeté une exception, résultant dans le comportement par défaut pour bouton.

FWIW, il y a une autre façon de faire... Connectez vos gestionnaires d'événements en utilisant jQuery, et utilisez la méthode preventDefault () sur l'objet event "1519140920 de jQuery pour annuler le comportement par défaut:

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

cette technique garde toute votre logique au même endroit, la rendant plus facile à déboguer... il vous permet également de mettre en œuvre un repli en changeant le type sur le boutons Retour à submit et la manipulation de l'événement côté serveur-cela est connu comme JavaScript discret .

il y a quelque temps, j'avais besoin de quelque chose de similaire... et je l'ai eu.

donc ce que je mets ici est comment je fais les trucs pour avoir un formulaire capable d'être soumis par JavaScript sans aucune validation et exécuter la validation seulement lorsque l'utilisateur appuie sur un bouton (typiquement un bouton Envoyer).

Pour l'exemple, je vais utiliser une forme minimale, seulement avec deux champs et un bouton envoyer.

rappelez-vous ce qu'on veut: À partir de JavaScript, il doit peut être soumis sans aucune vérification. Toutefois, si l'utilisateur appuie sur ce bouton, la validation doit être faite et formulaire envoyé uniquement si le test de validation.

normalement tout partirait de quelque chose près de ceci (j'ai enlevé toutes les choses supplémentaires Pas important):

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

voir comment l'étiquette de formulaire n'a pas onsubmit="..." (rappelez-vous que c'était une condition de ne pas l'avoir).

le problème est que le formulaire est toujours soumis, Non peu importe si onclick retourne true ou false .

si je remplace type="submit" par type="button" , cela semble fonctionner mais ne fonctionne pas. Il n'envoie jamais le formulaire, mais cela peut être fait facilement.

donc finalement j'ai utilisé ceci:

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

et sur function Validator , où return True; est, j'ajoute également un JavaScript soumettre la phrase, quelque chose de similaire à ceci:

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

le id="" est juste pour JavaScript getElementById , le name="" est juste pour qu'il apparaisse sur les données de poste.

Sur une telle façon que j'en ai besoin.

j'ai mis ceci juste pour les gens qui n'ont pas besoin de la fonction onsubmit sur le formulaire, mais faire une validation quand un bouton est appuyé par l'utilisateur.

pourquoi je n'ai pas besoin de onsubmit sur l'étiquette de formulaire? Facile, sur D'autres parties de JavaScript je dois effectuer un submit mais je ne veux pas qu'il y ait de validation.

la raison: si l'utilisateur est celui qui exécute le submit je veux et j'ai besoin que la validation soit faite, mais si C'est JavaScript parfois je dois effectuer le submit tandis que de telles validations l'éviteraient.

cela peut sembler étrange, mais pas en pensant par exemple: sur un Login ... avec quelques restrictions... comme ne pas permettre d'être utilisé des sessions PHP et ni les cookies sont autorisés!

donc tout lien doit être converti en tel formulaire soumettre, de sorte que les données de connexion ne sont pas perdus. Quand aucune connexion n'est encore fait, il faut aussi travailler. Aucune validation ne doit donc être effectuée sur les liens. Mais je veux présenter un message à l'utilisateur si l'utilisateur n'a pas entré les deux champs, utilisateur et passer. Donc, s'il en manque un, le formulaire ne doit pas être envoyé! là est le problème.

Voir le problème: le formulaire ne doit pas être envoyé lorsqu'un champ est vide uniquement si l'utilisateur a appuyé sur une touche, si c'est un code JavaScript, il doit être en mesure d'être envoyé.

si je fais le travail sur onsubmit sur l'étiquette de formulaire, je dois savoir si c'est l'utilisateur ou un autre JavaScript. Comme aucun paramètre ne peut être passé, ce n'est pas possible directement, donc certaines personnes ajoutent une variable pour dire si la validation doit être faite ou non. La première chose sur la fonction de validation est de vérifier la valeur de la variable, etc... Trop compliqué et le code ne dit pas ce qu'on veut vraiment.

donc la solution n'est pas d'avoir onsubmit sur le formulaire balise. L'Insead mettre là où c'est vraiment nécessaire, sur le bouton.

pour l'autre côté, pourquoi mettre le code onsubmit puisque conceptuellement Je ne veux pas de validation onsubmit. Je veux vraiment une validation de bouton.

Non seulement le code est plus clair, c'est là où il doit être. Rappelez-vous juste ce: - Je ne veux pas que JavaScript valide le formulaire (qui doit toujours être fait par PHP du côté du serveur)) - Je veux montrer à l'utilisateur un message en disant que tous les champs ne doivent pas être vide, qui nécessite JavaScript (côté client)

alors pourquoi certaines personnes (pensez ou dites-moi) il doit être fait sur une validation onsumbit? Non, sur le plan conceptuel, Je ne fais pas une validation onsumbit côté client. Je fais juste quelque chose sur un bouton appuyez sur, Alors pourquoi ne pas laisser que pour être mis en œuvre?

ce code et ce style font parfaitement l'affaire. Sur tout JavaScript que je dois envoyer le formulaire je viens de mettre:

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

et que la validation Saute quand je n'en ai pas besoin. Il envoie juste le formulaire et charge une page différente, etc.

mais si l'utilisateur clique sur le bouton Soumettre (alias type="button" et non type="submit" ) la validation est faite avant de laisser le formulaire être soumis et si non valide pas envoyé.

espérons que cela aide les autres à ne pas essayer le code long et compliqué. Il suffit de ne pas utiliser onsubmit si ce n'est pas nécessaire, et utiliser onclick . Mais rappelez-vous juste de remplacer type="submit" par type="button" et n'oubliez pas de faire le submit() par JavaScript.

je suis D'accord avec Shog9, mais je pourrais utiliser à la place:

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

selon w3schools , l'étiquette <button> a un comportement différent sur différents navigateurs.

supposons que votre formulaire HTML contient id="form_id"

<form id="form_id">
<!--your HTML code-->
</form>

ajouter ce jQuery snippet à votre code pour voir le résultat,

$("#form_id").submit(function(){
  return false;
});

$("form").submit(function () { return false; }); cela empêchera le bouton de soumettre ou vous pouvez juste changer le type de bouton en "bouton " <input type="button"/> au lieu de <input type="submit"/> Ce qui ne fonctionnera que si ce bouton n'est pas le seul dans cette forme.

il s'agit d'une erreur html5 comme cela a été dit, Vous pouvez toujours avoir le bouton comme soumettre (si vous voulez couvrir à la fois les utilisateurs javascript et non javascript) en utilisant comme:

     <button type="submit" onclick="return false"> Register </button>

de cette façon, vous annulerez le soumettre, mais tout de même faire ce que vous faites dans les fonctions jQuery ou javascript et faire le soumettre pour les utilisateurs qui n'ont pas javascript.

je suis sûr que sur FF le

removeItem 

fonction rencontre une erreur JavaScript, ce qui ne se produit pas sur IE

lorsque l'erreur javascript apparaît, le code "return false" ne s'exécute pas, ce qui rend la page postback

vous pouvez simplement obtenir la référence de vos boutons en utilisant jQuery, et empêcher sa propagation comme ci-dessous:

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});

Voici une approche simple:

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});

return false;

Vous pouvez retourner false à la fin de la fonction ou après l'appel de fonction.

tant que c'est la dernière chose qui arrive, le formulaire ne sera pas soumis.

Réglez votre bouton de manière normale et utilisez l'événement.preventDefault comme..

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

   function myFunc(e){
       e.preventDefault();
   }

l'exemple de code suivant vous montre comment empêcher le clic de bouton de soumettre le formulaire.

vous pouvez essayer mon exemple de code:

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <table>
     <th>Name</th>

     <tr>
       <td>
         <input type="text" id="input1" name="input1" />
       </td>
       <td>
         <input type="hidden" id="input2" name="input2" />
       </td>
     </tr>
   </table>
   <input id="submit" type="submit" name="submit" value="Submit">
 </form>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>

Je ne suis pas en mesure de le tester pour le moment, mais je pense que vous pourriez utiliser la méthode preventDefault" 151920920 de jQuery.

la fonction removeItem contient en fait une erreur, ce qui fait que le bouton de formulaire fait son comportement par défaut (soumettre le formulaire). La console d'erreur javascript donne généralement un pointeur dans ce cas.

vérifier la fonction removeItem dans la partie javascript:

La ligne:

rows[rows.length-1].html('');

ne marche pas. Essayez plutôt ceci:

rows.eq(rows.length-1).html('');

j'avais résolu ce problème de trois façons il vous aidera

si nous utilisons jQuery validation plugin dans

$("form").validate({
      submitHandler: function (form) {
                     console.log('test');
                          }
                      });

2ème méthode à l'aide d'empêcher par défaut

    $( "form" ).submit(function( event ) {

      event.preventDefault();
console.log('test');
    });

de la 3ème à l'aide de javascript(événement onsubmit)

si nous utilisons l'événement onsubmit dans la balise form il déclenche l'url à la place, si nous utilisons le bouton onsubmit in ou input qui a le type = submit

<button type="submit" onsubmit="submitfunction()">submit</button>
    function submitfunction(event){
event.preventDefault();
console.log('test');
}

espère que ça va aide