Empêcher l'envoi d'un champ de saisie dans un formulaire


114

J'écris du javascript (un greasemonkey / userscript) qui insérera des champs de saisie dans un formulaire sur un site Web.

Le fait est que je ne veux pas que ces champs de saisie affectent le formulaire de quelque manière que ce soit, je ne veux pas qu'ils soient soumis lorsque le formulaire est soumis, je veux seulement que mon javascript ait accès à leurs valeurs.

Existe-t-il un moyen d'ajouter des champs de saisie au milieu d'un formulaire et de ne pas les envoyer lorsque le formulaire est soumis?

De toute évidence, l'idéal serait que les champs de saisie ne soient pas dans l'élément de formulaire, mais je veux que la mise en page de ma page résultante fasse apparaître mes champs de saisie insérés entre les éléments du formulaire d'origine.


2
quel est le problème s'ils sont soumis? Vous pouvez choisir les champs à traiter dans la langue côté serveur.
Sarfraz

6
Je ne pense pas que des éléments de formulaire non nommés apparaissent lorsqu'un formulaire est soumis - si vous pouvez écrire votre JS pour y faire référence par ID, vous pouvez laisser leurs noms vides, ce qui les empêche de se soumettre.
gddc

2
laissez le champ d'attribut de nom vide
deostroll

@Sarfraz Ahmed: J'écris un script greasemonkey, donc je n'ai aucun contrôle sur le site.
Acorn

11
Selon le w3: à inclure dans la soumission d'un formulaire. un champ (élément de formulaire) doit être défini dans l'élément de formulaire et doit avoir un attribut de nom. Les éléments sans nom, ou non contenus dans le formulaire, ne sont pas soumis au serveur.
kennebec

Réponses:


159

Vous pouvez insérer des champs de saisie sans attribut "nom":

<input type="text" id="in-between" />

Ou vous pouvez simplement les supprimer une fois le formulaire soumis (en jQuery):

$("form").submit(function() {
   $(this).children('#in-between').remove();
});

7
Omettre le nom l'empêche d'être soumis? Cool, je ne savais pas ça. Cela fonctionne-t-il sur tous les navigateurs? Cela fait-il partie d'une norme ou est-ce une bizarrerie de mise en œuvre?
BlairHippo

2
@Acorn Je ne suis pas tout à fait sûr, mais cela vaut la peine d'être lu. Essentiellement, si vous omettez la valeur d'attribut "nom", vous ne pouvez accéder à cette valeur par aucune méthode ... il se peut donc que la valeur soit simplement supprimée par le navigateur. S'il est essentiel d'être sûr pour vous, optez pour l'option jquery / javascript (notez simplement que les champs seront soumis lorsque javascript sera facilement désactivé - alors ne comptez pas sur vos mécanismes de sécurité).
Gal

17
J'ai testé en laissant de côté l'attribut name avec chrome, firefox, safari et il semble que les champs du formulaire soient soumis au serveur avec une chaîne vide pour le nom. J'ai inspecté les données de publication à l'aide de WebScarab et j'ai constaté que les données étaient envoyées. Pour l'instant, je suppose que je vais devoir désactiver les champs pour les empêcher d'être soumis.
kldavis4

1
@ kldavis4 - il semble que stripe (stripe.js) et Braintree (braintree.js) [link] braintreepayments.com/docs/python/guide/getting_paid utilisent le concept d'attribut " omettre le nom" pour empêcher les données d'atteindre les serveurs réduisant ainsi le besoin de conformité "PCI" ... si vous dites que les "données" sont envoyées sont-elles par erreur?
Rahul Dighe


57

La chose la plus simple à faire serait d'insérer les éléments avec l' disabledattribut.

<input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />

De cette façon, vous pouvez toujours y accéder en tant qu'enfants du formulaire.

Les champs désactivés ont l'inconvénient que l'utilisateur ne peut pas du tout interagir avec eux - donc si vous avez un disabledchamp de texte, l'utilisateur ne peut pas sélectionner le texte. Si vous avez une disabledcase à cocher, l'utilisateur ne peut pas changer son état.

Vous pouvez également écrire du javascript à déclencher lors de la soumission du formulaire pour supprimer les champs que vous ne souhaitez pas soumettre.


L'idée est que mes champs insérés soient utilisables afin que l'utilisateur puisse modifier les cases à cocher, etc., puis les soumettre à mon javascript.
Acorn

3
Désactivé peut toujours fonctionner si vous désactivez uniquement les champs lors de la soumission ou en fonction d'une case à cocher sélectionnée. De cette façon, vous ne jetez pas simplement la namepropriété, que vous voudrez peut-être conserver si vous voulez qu'elle soit utilisée plus tard.
JMTyler

C'est génial lorsque vous devez soumettre le formulaire en utilisant AJAX et que vous ne voulez pas supprimer vos entrées du formulaire ou supprimer leur nameattribut.
Nolonar

15

Essayez simplement de supprimer l' attribut de nom de l'élément d'entrée.
Donc ça doit ressembler à

<input type="checkbox" checked="" id="class_box_2" value="2">

Cela devrait être la réponse :))
Máxima Alekz

1
Cela fonctionne pour les cases à cocher. Notez cependant que cela interrompra la désélection automatique de l'autre bouton radio lorsqu'il est utilisé avec des boutons radio.
anre

10

Je voulais juste ajouter une option supplémentaire: dans votre entrée, ajoutez la balise form et spécifiez le nom d'un formulaire qui n'existe pas sur votre page:

<input form="fakeForm" type="text" readonly value="random value" />

1
bien que cela fonctionne probablement (pas testé), à moins que vous ne définissiez réellement fakeFormailleurs (pas besoin de soumettre) cela entraîne un HTML invalide.
Brian H.

1
Si vous ne souhaitez pas ajouter de javascript et que vous avez besoin de l'entrée dans le formulaire avec interaction de l'utilisateur. C'est de loin la solution la plus simple de mon point de vue.
yannisalexiou

1
REMARQUE: cette solution ne fonctionne pas avec IE . Vérifiez ici
Harvey le

@Harvey Yikes! Merci pour l'information!
Joshua Pinter

9

Vous pouvez écrire un gestionnaire d'événements pour onsubmitqui supprime l' nameattribut de tous les champs d'entrée que vous ne souhaitez pas inclure dans la soumission du formulaire.

Voici un exemple rapide non testé:

var noSubmitElements = [ 'someFormElementID1', 'someFormElementID2' ]; //...
function submitForm() {
    for( var i = 0, j = noSubmitElements.length; i < j; i++ ) {
        document.getElementById(noSubmitElements[i]).removeAttribute('name');
    }
}
form.onsubmit = submitForm;

2

Je sais que ce post est ancien, mais je répondrai quand même. Le moyen le plus simple / le meilleur que j'ai trouvé est simplement de définir simplement le nom en blanc.

Mettez ceci avant votre soumission:

document.getElementById("TheInputsIdHere").name = "";

Dans l'ensemble, votre fonction d'envoi pourrait ressembler à ceci:

document.getElementById("TheInputsIdHere").name = "";
document.getElementById("TheFormsIdHere").submit();

Cela soumettra toujours le formulaire avec tous vos autres champs, mais ne soumettra pas celui sans nom.


Simple et direct. Je l'aime!
pbarney

2

Add disabled = "disabled" dans l'entrée et pendant que jquery supprime l'attribut désactivé lorsque vous souhaitez le soumettre en utilisant .removeAttr ('disabled')

HTML:

<input type="hidden" name="test" value="test" disabled='disabled'/>

jquery:

$("input[name='test']").removeAttr('disabled');


2

Toutes les réponses ci-dessus ont déjà tout dit sur (ne pas) nommer les contrôles de formulaire ou les supprimer par programme avant de soumettre votre formulaire.

Bien que, au cours de mes recherches, j'ai trouvé une autre solution que je n'ai pas vue mentionnée dans cet article:
si vous encapsulez les contrôles de formulaire que vous souhaitez ne pas être traités / envoyés, dans une autre <form>balise sans methodattribut ni path(et évidemment pas de contrôle de type d' envoi comme un bouton ou soumettre une entrée imbriquée), la soumission du formulaire parent n'inclura pas ces contrôles de formulaire encapsulés.

<form method="POST" path="/path">
  <input type="text" name="sent" value="..." />
  <form>
    <input type="text" name="notSent" value="..." />
  </form>
  <input type="submit" name="submit" value="Submit" />
</form>

La valeur de contrôle [name = "notSent"] ne sera ni traitée ni envoyée au point de terminaison POST du serveur, mais celle de [name = "sent"] le sera.

Cette solution est peut-être anecdotique mais je la laisse encore à la postérité ...


Observation intéressante mais avez-vous testé cela dans différents navigateurs? Je me demande si c'est par conception, par spécification ou simplement par une bizarrerie du comportement du navigateur. Sera-ce une méthode fiable à l'avenir à mesure que les navigateurs changent?
scipilot

1

Gérez la soumission du formulaire dans une fonction via onSubmit () et effectuez quelque chose comme ci-dessous pour supprimer l'élément de formulaire: Utilisation getElementById()du DOM, puis utilisation[object].parentNode.removeChild([object])

supposons que votre champ en question ait un code d'attribut id "my_removable_field":

var remEl = document.getElementById("my_removable_field");
if ( remEl.parentNode && remEl.parentNode.removeChild ) {
remEl.parentNode.removeChild(remEl);
}

Cela vous donnera exactement ce que vous recherchez.


0

Avez-vous même besoin qu'ils soient des éléments d'entrée en premier lieu? Vous pouvez utiliser Javascript pour créer dynamiquement des divs ou des paragraphes ou des éléments de liste ou tout ce qui contient les informations que vous souhaitez présenter.

Mais si l'élément interactif est important et qu'il est difficile de placer ces éléments en dehors du <form>bloc, il devrait être possible de supprimer ces éléments du formulaire lorsque la page est soumise.


Oui, j'en ai besoin pour être des éléments d'entrée parce que j'essaie d'obtenir l'entrée de l'utilisateur.
Acorn

0
$('#serialize').click(function () {
  $('#out').text(
    $('form').serialize()
  );
});

$('#exclude').change(function () {
  if ($(this).is(':checked')) {
    $('[name=age]').attr('form', 'fake-form-id');
  } else {
    $('[name=age]').removeAttr('form');    
  }
  
  $('#serialize').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/">
  <input type="text" value="John" name="name">
  <input type="number" value="100" name="age">
</form>

<input type="button" value="serialize" id="serialize">
<label for="exclude">  
  <input type="checkbox" value="exclude age" id="exclude">
  exlude age
</label>

<pre id="out"></pre>

Malheureusement, l'attribut de formulaire ne fonctionne pas dans IE / Edge. caniuse.com/#search=form%20attribute
George Helyar

0

Vous devez ajouter onsubmit à votre formulaire:

<form action="YOUR_URL" method="post" accept-charset="utf-8" onsubmit="return validateRegisterForm();">

Et le script sera comme ceci:

        function validateRegisterForm(){
        if(SOMETHING IS WRONG)
        { 
            alert("validation failed");
            event.preventDefault();
            return false;

        }else{
            alert("validations passed");
            return true;
        }
    }

Cela fonctionne pour moi à chaque fois :)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.