jQuery - Créer un élément de formulaire caché à la volée

333

Quelle est la façon la plus simple de créer dynamiquement un champ de formulaire de saisie masqué à l' aide de jQuery?

javascript jquery forms hidden-field Mithun Sreedharan
la source

Réponses:

613 
$('<input>').attr('type','hidden').appendTo('form');

Pour répondre à votre deuxième question:

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar'
}).appendTo('form');
David Hellsing
la source
56
Notez qu'IE s'étouffe si vous essayez de changer le type d'entrée après sa création. Utiliser $('<input type="hidden">').foo(...)comme solution de contournement.
Roy Tinker
4
De plus, la documentation de jQuery suggère que puisque la manipulation DOM est coûteuse, si vous avez plusieurs entrées à ajouter, ajoutez-les toutes une fois en utilisant quelque chose comme $ (this) .append (hidden_element_array.join (''));
Kedar Mhaswade
1
Je viens d'essayer cette méthode avec jQuery 1.6.2 et j'ai reçu cette erreur avec Firefox 7.0.1: "exception non interceptée: la propriété de type ne peut pas être modifiée" Il semble que vous ne pouvez pas utiliser la méthode attr pour changer la propriété de type dans ces conditions. J'essaie maintenant la méthode ci-dessous ...
Mikepote
Cette même approche fonctionnera-t-elle avec la nouvelle .propfonction dans la nouvelle version de l'API?
SpaceBison
3
@SpaceBison .propn'est pas "le nouveau .attr" comme beaucoup de gens semblent le penser. Vous devez toujours utiliser .attrpour définir les attributs.
David Hellsing
138 
$('#myformelement').append('<input type="hidden" name="myfieldname" value="myvalue" />');
Mark Bell
la source
1
Quelqu'un at-il testé cette réponse sur l'ancien IE?
Arthur Halma
11
Personnellement, je pense que c'est une bien meilleure approche que la réponse acceptée car elle implique moins de manipulation DOM / appels de fonction.
PaulSkinner
3
@PaulSkinner Pour le cas donné, oui, vous avez raison, mais ce n'est pas toujours le cas. Jetez un œil ici stackoverflow.com/a/2690367/1067465
Fernando Silva
34

Identique à David, mais sans attr ()

$('<input>', {
    type: 'hidden',
    id: 'foo',
    name: 'foo',
    value: 'bar'
}).appendTo('form');
Sergey Onishchenko
la source
3
Y a-t-il un nom pour cette façon de remplir une balise?
DLF85
comment ajouter l'entrée une seule fois? s'il existe, il continue de saisir une nouvelle valeur avec le même attribut
Snow Bases
Très épuré, j'adore.
Jacques
27

si vous voulez ajouter plus d'attributs, faites comme:

$('<input>').attr('type','hidden').attr('name','foo[]').attr('value','bar').appendTo('form');

Ou

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'foo[]',
    value: 'bar'
}).appendTo('form');
Slipstream
la source
cela donne une erreur de console Unexpected identifier.
Prafulla Kumar Sahu
Deuxième code, semble que "l'id" doit être généré dynamiquement quelque chose comme foo1, foo2 etc
Web_Developer
5 
function addHidden(theForm, key, value) {
    // Create a hidden input element, and append it to the form:
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;'name-as-seen-at-the-server';
    input.value = value;
    theForm.appendChild(input);
}

// Form reference:
var theForm = document.forms['detParameterForm'];

// Add data:
addHidden(theForm, 'key-one', 'value');
Saurabh Chandra Patel
la source
2
C'est quoi 'name-as-seen-at-the-server'?
SaAtomic
1

JSFIDDLE de travail

Si votre formulaire est comme 

<form action="" method="get" id="hidden-element-test">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit">
</form> 
    <br><br>   
    <button id="add-input">Add hidden input</button>
    <button id="add-textarea">Add hidden textarea</button>

Vous pouvez ajouter une entrée et une zone de texte masquées pour former comme ceci

$(document).ready(function(){

    $("#add-input").on('click', function(){
        $('#hidden-element-test').prepend('<input type="hidden" name="ipaddress" value="192.168.1.201" />');
        alert('Hideen Input Added.');
    });

    $("#add-textarea").on('click', function(){
        $('#hidden-element-test').prepend('<textarea name="instructions" style="display:none;">this is a test textarea</textarea>');
        alert('Hideen Textarea Added.');
    });

});

Vérifiez le travail jsfiddle ici

Subodh Ghulaxe
la source