Comment empêcher les boutons de soumettre des formulaires
Dans la page suivante, avec Firefox, le bouton Supprimer soumet le formulaire, mais pas le bouton Ajouter. Comment empêcher le bouton Supprimer 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>
Vous utilisez un élément de bouton HTML5. Rappelez-vous que la raison pour laquelle ce bouton a un comportement par défaut de soumission, comme indiqué dans la spécification W3, comme indiqué ici: Bouton HTML5 pour le W3C
Vous devez donc spécifier explicitement son type:
<button type="button">Button</button>
afin de remplacer le type de soumission par défaut. Je veux juste souligner la raison pour laquelle cela se produit =)
=)
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 les empêcheront de déclencher une action d'envoi lorsqu'une exception se produit dans le gestionnaire d'événements. Ensuite, corrigez votre fonction removeItem() pour 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 provoqué une exception, ce qui a entraîné le comportement par défaut du bouton.
FWIW, il existe un autre moyen de procéder avec ceci ... Connectez vos gestionnaires d’événements avec jQuery et utilisez la méthode preventDefault () sur l’objet event de jQuery pour annuler la valeur par défaut. comportement dès le départ:
$(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 permet de conserver toute votre logique au même endroit, ce qui facilite le débogage. Elle vous permet également de mettre en œuvre un repli en modifiant le type des boutons sur submit et en gérant le event-side-side - cela s'appelle JavaScript non intrusif .
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 astuces pour avoir un formulaire pouvant être soumis par JavaScript sans aucune validation et exécuter la validation uniquement lorsque l'utilisateur appuie sur un bouton (généralement un bouton d'envoi).
Pour l'exemple, je vais utiliser un formulaire minimal, avec seulement deux champs et un bouton d'envoi.
Rappelez-vous ce qui est recherché: à partir de JavaScript, il doit pouvoir être soumis sans aucune vérification. Toutefois, 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 commencerait à partir de quelque chose de proche (j'ai enlevé tout ce qui était supplémentaire 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 la balise 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 renvoie true ou false.
Si je modifie type="submit" pour 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 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, le name="" est juste pour qu'il apparaisse sur les données POST.
De cette façon, cela fonctionne comme j'en ai besoin.
Je mets ceci juste pour les personnes qui n'ont pas besoin de la fonction onsubmit sur le formulaire, mais fais une validation quand un bouton est appuyé par l'utilisateur.
Pourquoi n'ai-je pas besoin de soumettre on tag? Facile, sur d'autres parties JavaScript, j'ai besoin d'effectuer une soumission mais je ne souhaite pas qu'il y ait de validation.
La raison: si l'utilisateur est celui qui effectue l'envoi que je veux et que la validation soit nécessaire, mais s'il s'agit de JavaScript, il est parfois nécessaire d'exécuter l'envoi alors que de telles validations l'éviteraient.
Cela peut sembler étrange, mais pas lorsque vous pensez par exemple: sur un login ... avec certaines restrictions ... comme ne pas autoriser l'utilisation PHP sessions et aucun cookie n'est autorisé!
Ainsi, tout lien doit être converti sous cette forme, afin que les données de connexion ne soient pas perdues. Lorsqu'aucune connexion n'est encore établie, cela doit également 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 saisi les deux champs, utilisateur et pass. 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é lorsqu'un champ est vide uniquement 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, il faudrait que je sache s'il s'agit de l'utilisateur ou d'un autre JavaScript. Comme aucun paramètre ne peut être passé, ce n'est pas possible directement, aussi certaines personnes ajoutent une variable pour indiquer si la validation doit être effectuée ou non. La première chose à faire avec la fonction de validation est de vérifier la valeur de la variable, etc. Trop compliqué et le code ne dit pas ce qui est vraiment souhaité.
Donc, la solution est de ne pas avoir à soumettre sur la balise de formulaire. Insead a mis le bouton là où il le fallait vraiment.
De l’autre côté, pourquoi mettre du code sur Soumettre puisque, conceptuellement, je ne veux pas de validation sur Soumettre. Je veux vraiment la validation du bouton.
Non seulement le code est plus clair, c'est là où il doit être. Rappelez-vous simplement 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 , qui nécessite JavaScript (côté client)
Alors pourquoi certaines personnes (pense ou me dit) cela doit être fait sur une validation onsbitbit? Non, conceptuellement, je ne fais pas de validation onsumbit du côté client. Je fais juste quelque chose sur un bouton pressé, alors pourquoi ne pas laisser cela être implémenté?
Eh bien, ce code et ce style font parfaitement l'affaire. Sur tout JavaScript dont j'ai besoin pour 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 simplement le formulaire et charge une page différente, etc.
Mais si l'utilisateur clique sur le bouton d'envoi (alias type="button" pas type="submit"), la validation est effectuée avant que le formulaire ne soit soumis et, si non valide, il n'est pas envoyé.
Espérons que cela aide les autres à ne pas essayer de code long et compliqué. N'utilisez pas onsubmit si vous n'en avez pas besoin, et utilisez onclick. Mais souvenez-vous simplement de changer type="submit" en type="button" et s'il vous plaît, n'oubliez pas de faire la submit() en JavaScript.
Je suis d'accord avec Shog9, même si je pourrais plutôt utiliser:
<input type = "button" onClick="addItem(); return false;" value="Add Item" />
Selon w3schools , la balise <button> a un comportement différent selon les navigateurs.
Supposons que votre formulaire HTML contienne id="form_id"
<form id="form_id">
<!--your HTML code-->
</form>
Ajoutez cet extrait de code jQuery à votre code pour voir le résultat,
$("#form_id").submit(function(){
return false;
});
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;
});});
$("form").submit(function () { return false; }); qui 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"/> qui ne fonctionnera que si ce bouton n'est pas le seul bouton dans ce formulaire.
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 l'utilisant comme:
<button type="submit" onclick="return false"> Register </button>
De cette façon, vous annulerez la soumission, mais vous ferez tout ce que vous ferez dans les fonctions jQuery ou jquascript et ferez la soumission pour les utilisateurs qui n’ont pas le javascript.
Je suis sûr que sur FF le
removeItem
la fonction rencontre une erreur JavaScript, ce n'est pas arrivé sur IE
Lorsque l'erreur javascript apparaît, le code "return false" ne s'exécute pas, ce qui rend la page à publier
Définissez votre bouton de manière normale et utilisez event.preventDefault comme ..
<button onclick="myFunc(e)"> Remove </button>
...
...
In function...
function myFunc(e){
e.preventDefault();
}
Le retour false empêche le comportement par défaut. mais le retour false interrompt le bouillonnement d'événements de clics supplémentaires. Cela signifie que s'il existe d'autres liaisons de clic après l'appel de cette fonction, les autres ne prennent pas en compte.
<button id="btnSubmit" type="button">PostData</button>
<Script> $("#btnSubmit").click(function(){
// do stuff
return false;
}); </Script>
Ou simplement tu peux mettre comme ça
<button type="submit" onclick="return false"> PostData</button>
return false;
Vous pouvez retourner false à la fin de la fonction ou après l'appel de la fonction.
Tant que c'est la dernière chose qui se passe, le formulaire ne sera pas soumis.
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;
});
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>
Il suffit d’ajouter e.preventDefault(); dans votre méthode afin d’empêcher votre page de soumettre des formulaires.
function myFunc(e){
e.preventDefault();
}
Selon le MDN Web Docs
La méthode preventDefault () de l'interface Event indique à l'agent utilisateur que, si l'événement n'est pas traité explicitement, son action par défaut ne doit pas être prise en compte, contrairement à ce qu'elle serait normalement. L'événement continue à se propager comme d'habitude, à moins que l'un de ses auditeurs appelle
stopPropagation ()oustopImmediatePropagation (), ce qui met fin à la propagation.
La fonction removeItem contient en réalité une erreur, ce qui amène le bouton de formulaire à adopter son comportement par défaut (soumission du formulaire). La console d'erreur javascript donnera généralement un pointeur dans ce cas.
Découvrez la fonction removeItem dans la partie javascript:
La ligne:
rows[rows.length-1].html('');
ne fonctionne pas. Essayez ceci à la place:
rows.eq(rows.length-1).html('');
Je ne suis pas en mesure de le tester pour le moment, mais je pense que vous pouvez utiliser la méthode preventDefault de jQuery.