Question Comment empêcher les boutons de soumettre des formulaires


Dans la page suivante, avec Firefox, le bouton de suppression soumet le formulaire, mais pas le bouton d'ajout. Comment puis-je empêcher le bouton de suppression de soumettre le formulaire?

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function addItem() {
  var v = $('form :hidden:last').attr('name');
  var n = /(.*)input/.exec(v);
  var newPrefix;
  if ( n[1].length == 0 ) {
    newPrefix = '1';
  } else {
    newPrefix = parseInt(n[1])+1;
  }
  var oldElem = $('form tr:last');
  var newElem = oldElem.clone(true);
  var lastHidden = $('form :hidden:last');
  lastHidden.val(newPrefix);
  var pat = '=\"'+n[1]+'input';
  newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"'+newPrefix+'input'));
  newElem.appendTo('table');
  $('form :hidden:last').val('');
}
function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    rows[rows.length-1].html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}
</script>
</head>
<body>
<form autocomplete="off" method="post" action="">
<p>Title:<input type="text" /></p>
<button onclick="addItem(); return false;">Add Item</button>
<button onclick="removeItem(); return false;">Remove Last Item</button>
<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>
</body>
</html>

683
2018-05-31 19:16


origine


Réponses:


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: Bouton W3C HTML5

Vous devez donc spécifier son type explicitement:

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

afin de remplacer le type de soumission par défaut. Je veux juste indiquer la raison pour laquelle cela arrive =)

=)


1266
2018-05-31 14:56



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>

... cela les empêchera de déclencher une action de soumission lorsqu'une exception se produit dans le gestionnaire d'événements. Ensuite, corrigez votre removeItem() fonction de sorte qu'elle ne déclenche pas d'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 d'origine a extrait un élément HTML du jeu jQuery, puis a essayé d'appeler une méthode jQuery dessus - cela a généré une exception, entraînant le comportement par défaut du bouton.

FWIW, il y a une autre façon d'y aller ... Connectez vos gestionnaires d'événements en utilisant jQuery, et utilisez le preventDefault () méthode sur jQuery un événement objet d'annuler le comportement par défaut à l'avance:

$(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 conserve toute votre logique au même endroit, ce qui facilite le débogage ... elle vous permet également de mettre en place une solution de repli en modifiant type sur les boutons de retour à submit et la gestion de l'événement côté serveur - cela est connu comme JavaScript discret.


551
2018-05-31 19:22



Il y a quelque temps j'avais besoin de quelque chose de très similaire ... et je l'ai eu.

Donc ce que je mets ici, c'est comment je fais les trucs pour avoir un formulaire capable d'être soumis par JavaScript sans valider et exécuter une validation seulement quand l'utilisateur appuie sur un bouton (généralement un bouton d'envoi).

Pour l'exemple, je vais utiliser un formulaire minimal, seulement avec deux champs et un bouton de soumission.

Rappelez-vous ce qui est recherché: De JavaScript, il doit pouvoir être soumis sans vérification. Cependant, si l'utilisateur appuie sur un tel bouton, la validation doit être effectuée et le formulaire envoyé uniquement si la validation est réussie.

Normalement, tout commence à partir de quelque chose de proche (j'ai enlevé toutes les choses supplémentaires sans importance):

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

Voyez comment le tag de formulaire n'a pas onsubmit="..." (Rappelez-vous que c'était une condition pour ne pas l'avoir).

Le problème est que le formulaire est toujours soumis, peu importe si onclick résultats true ou false.

Si je change type="submit" pour type="button", ça a l'air de marcher mais ça ne marche 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 aussi une phrase de soumission JavaScript, 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, la name="" est juste pour qu'il apparaisse sur les données POST.

De cette façon, cela fonctionne comme j'ai besoin.

Je mets ça juste pour les gens qui n'ont pas besoin onsubmit fonction sur le formulaire, mais faire une validation quand un bouton est pressé par l'utilisateur.

Pourquoi n'ai-je pas besoin d'activer la diffusion sur le tag de formulaire? Facile, sur d'autres parties JavaScript, je dois effectuer une soumission mais je ne veux pas de validation.

La raison: Si l'utilisateur est celui qui effectue la soumission je veux et ai besoin de la validation à faire, mais si c'est JavaScript parfois je dois effectuer le soumettre 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'utiliser des sessions PHP et aucun cookie n'est autorisé!

Ainsi, tout lien doit être converti en un tel formulaire, de sorte que les données de connexion ne sont pas perdues. Quand aucune connexion n'est encore faite, elle doit aussi fonctionner. Donc, aucune validation ne doit ê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 passe. Donc, s'il en manque un, le formulaire ne doit pas être envoyé! il y a le problème.

Voir le problème: le formulaire ne doit pas être envoyé quand un champ est vide seulement si l'utilisateur a appuyé sur un bouton, s'il s'agit d'un code JavaScript, il doit pouvoir être envoyé.

Si je fais le travail sur onsubmit sur la balise de formulaire, j'aurais besoin de savoir si c'est l'utilisateur ou autre JavaScript. Comme aucun paramètre ne peut être transmis, il n'est pas possible de le faire directement. Certaines personnes ajoutent donc une variable pour indiquer si la validation doit être effectuée ou non. La première chose sur la fonction de validation est de vérifier cette valeur de variable, etc ... Trop compliqué et le code ne dit pas ce que l'on veut vraiment.

La solution est donc de ne pas avoir d'onsubmit sur l'étiquette de formulaire. Insead l'a mis 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 de sous-diffusion. Je veux vraiment la validation du bouton.

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

Alors pourquoi certaines personnes (penser ou me dire) cela doit-il être fait sur une validation d'onsumbit? Non, sur le plan conceptuel, je ne suis pas en train de valider un onsumbit chez un client. Je suis juste en train de faire quelque chose sur un bouton pressé, alors pourquoi ne pas laisser cela être mis en œuvre?

Eh bien, le code et le style font parfaitement l'affaire. Sur tout JavaScript que j'ai besoin d'envoyer le formulaire que je viens de mettre:

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

Et cela saute la validation 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 type="button" ne pas type="submit") la validation est faite avant que le formulaire soit soumis et s'il n'est pas valide, il n'est pas envoyé.

Eh bien, espérons que cela aide les autres à ne pas essayer un code long et compliqué. Ne pas utiliser onsubmit si non nécessaire, et utiliser onclick. Mais souvenez-vous de changer type="submit" à type="button" et s'il vous plaît ne pas oublier de faire le submit() par JavaScript.


27
2018-03-21 09:29



Je suis d'accord avec Shog9, bien que je pourrais utiliser à la place:

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

Selon w3schools, la <button> tag a un comportement différent sur les différents navigateurs.


22
2018-05-31 19:28



Supposons que votre formulaire HTML a id="form_id"

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

Ajoutez cet extrait jQuery à votre code pour voir le résultat,

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

17
2018-06-24 16:46



$("form").submit(function () { return false; });  cela empêchera le bouton de soumettre ou vous pouvez simplement 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 bouton de ce formulaire.


13
2018-06-27 15:39



Ceci est une erreur html5 comme cela a été dit, vous pouvez toujours avoir le bouton en tant que soumission (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 pouvez annuler le soumettre mais toujours faire ce que vous faites dans jquery ou javascript et faire la soumission pour les utilisateurs qui n'ont pas javascript.


9
2018-01-17 01:27