jQuery - Erstellen Sie versteckte Formularelemente im laufenden Betrieb

333

Was ist der einfachste Weg, um ein verstecktes Eingabeformularfeld mit jQuery dynamisch zu erstellen ?

— Mithun Sreedharan
quelle

613

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

So beantworten Sie Ihre zweite Frage:

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar'
}).appendTo('form');

— David Hellsing
quelle

56

Beachten Sie, dass der IE erstickt, wenn Sie versuchen, den Eingabetyp nach seiner Erstellung zu ändern. Verwenden Sie $('<input type="hidden">').foo(...)als Behelfslösung.

— Roy Tinker

4

In der jQuery-Dokumentation wird außerdem vorgeschlagen, dass, da die DOM-Manipulation teuer ist, wenn Sie mehrere Eingaben hinzufügen müssen, alle einmal hinzugefügt werden müssen, indem Sie so etwas wie $ (this) .append (hidden_element_array.join ('')) verwenden.

— Kedar Mhaswade

1

Ich habe diese Methode gerade mit jQuery 1.6.2 ausprobiert und diesen Fehler mit Firefox 7.0.1 erhalten: "Nicht erfasste Ausnahme: Typeneigenschaft kann nicht geändert werden" Es scheint, dass Sie die attr-Methode nicht verwenden können, um die Typeneigenschaft unter diesen Bedingungen zu ändern. Ich versuche jetzt die Methode unten ...

— Mikepote

Funktioniert dieser Ansatz mit der neueren .propFunktion in der neueren API-Version?

— SpaceBison

3

@SpaceBison .propist nicht "das Neue .attr", wie viele Leute zu denken scheinen. Sie sollten weiterhin .attrAttribute festlegen.

— David Hellsing

138

$('#myformelement').append('<input type="hidden" name="myfieldname" value="myvalue" />');

— Mark Bell
quelle

1

Hat jemand diese Antwort auf dem alten IE getestet?

— Arthur Halma

11

Persönlich glaube ich, dass dies ein viel besserer Ansatz ist als die akzeptierte Antwort, da weniger DOM-Manipulationen / Funktionsaufrufe erforderlich sind.

— PaulSkinner

3

@PaulSkinner Für den gegebenen Fall sind Sie ja richtig, aber es ist nicht immer so. Werfen

— Fernando Silva

34

Das gleiche wie bei David, aber ohne attr ()

$('<input>', {
    type: 'hidden',
    id: 'foo',
    name: 'foo',
    value: 'bar'
}).appendTo('form');

— Sergey Onishchenko
quelle

3

Gibt es einen Namen für diese Art, ein Tag zu füllen?

— DLF85

Wie füge ich die Eingabe nur einmal hinzu? Wenn es existiert, gibt es immer wieder einen neuen Wert mit demselben Attribut ein

— Snow Bases

Sehr stromlinienförmig, ich liebe es.

— Jacques

27

Wenn Sie weitere Attribute hinzufügen möchten, gehen Sie wie folgt vor:

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

Oder

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

— Windschatten
quelle

Dies führt zu einem Konsolenfehler Unexpected identifier.

— Prafulla Kumar Sahu

Zweiter Code, scheint, dass die "ID" dynamisch generiert werden muss, etwa foo1, foo2 usw.

— 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
quelle

2

Was ist das 'name-as-seen-at-the-server'?

— SaAtomic

1

Arbeits JSFIDDLE

Wenn Ihr Formular wie ist

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

Sie können versteckte Eingaben und Textbereiche hinzufügen, um diese Form zu erhalten

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

});

Überprüfen Sie hier die funktionierende jsfiddle

— Subodh Ghulaxe
quelle