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?

— Mithun Sreedharan
source

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