web-dev-qa-db-fra.com

Empêcher la soumission d'un champ de saisie d'un formulaire

J'écris du javascript (greasemonkey/userscript) qui insère 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.

Est-il possible d'ajouter des champs de saisie au milieu d'un formulaire et de ne pas les soumettre lors de l'envoi du formulaire?

Évidemment, l'idéal serait que les champs de saisie ne soient pas dans l'élément de formulaire, mais je souhaite que la mise en page de ma page résultante fasse en sorte que les champs de saisie insérés apparaissent entre les éléments du formulaire d'origine.

javascripthtmlformsuserscripts
96
Acorn

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

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

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

$("form").submit(function() {

   $(this).children('#in-between').remove();

});
141
Gal

Le plus simple serait d'insérer les éléments avec l'attribut disabled.

<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 de la fiche.

Les champs désactivés ont l'inconvénient que l'utilisateur ne peut pas interagir avec eux. Si vous avez un champ de texte disabled, l'utilisateur ne peut pas sélectionner le texte. Si vous avez une case à cocher disabled, l'utilisateur ne peut pas modifier son état.

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

44
Johrn

Essayez simplement de supprimer name attribute de l’élément input.
Il doit donc ressembler à 

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

Vous pouvez écrire un gestionnaire d'événements pour onsubmit qui supprime l'attribut name 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;
8
Jacob Relkin

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

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

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

Mettez ceci avant votre soumission:

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

Dans l’ensemble, votre fonction de soumission pourrait ressembler à ceci:

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

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

1
Will

Vous devez ajouter onsubmit à votre formulaire:

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

Et le script sera comme ça:

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

0
Vasilakakis Anastasios

Gérez le formulaire du formulaire dans une fonction via onSubmit () et procédez comme suit pour supprimer l'élément de formulaire: Utilisez getElementById() du DOM, puis utilisez [object].parentNode.removeChild([object]).

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

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

Avez-vous même besoin d'eux pour être des éléments d'entrée en premier lieu? Vous pouvez utiliser Javascript pour créer de façon dynamique des divs, des paragraphes, des éléments de liste ou tout autre élément contenant 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 bloc <form>, il devrait être possible de supprimer ces éléments du formulaire lorsque la page est soumise. 

0
BlairHippo
$('#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>
0
Denis Lukyanov