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

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.

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

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.

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

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

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;

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.

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

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

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.

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.

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