les - rendre un champ non saisissable javascript




Comment empêcher les boutons de soumettre des formulaires (10)

Réglez votre bouton normalement et utilisez event.preventDefault comme ..

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

   In function...

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

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>

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.


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 souhaité: 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 de 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 change type="submit" pour type="button" , cela semble fonctionner mais 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 la 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);
   }
}

L' 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'ai besoin.

Je mets ceci juste pour les gens qui n'ont pas onsubmit fonction onsubmit sur le formulaire, mais fais une certaine 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 le tag de formulaire, je devrais savoir s'il s'agit de l'utilisateur ou d'un 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 (qui 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, ce qui nécessite JavaScript côté)

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 (aka type="button" pas type="submit" ) la validation est faite avant de laisser le formulaire être soumis et s'il n'est pas valide pas envoyé.

Eh bien, espérons que cela aide les autres à ne pas essayer un code long et compliqué. Il suffit de ne pas utiliser onsubmit si ce n'est pas nécessaire, et utilisez onclick . Mais n'oubliez pas de changer type="submit" en type="button" et n'oubliez pas de faire le submit() par JavaScript.


Je ne suis pas capable de tester cela maintenant, mais je pense que vous pourriez utiliser la méthode preventDefault() de jQuery.


Je suis sûr que sur FF le

removeItem 

fonction rencontrer une erreur JavaScript, ce n'est pas arrivé sur IE

Lorsque l'erreur javascript apparaît, le code "return false" ne sera pas exécuté, ce qui rendra la page postback


L'exemple de code suivant vous montre comment empêcher le bouton de cliquer sur le formulaire de soumission.

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>

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;
});

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;

});

$("form").submit(function () { return false; }); cela empêchera le bouton de se 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.


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 arrive, le formulaire ne sera pas soumis.





submit