jQuery - Erstellen Sie versteckte Formularelemente im laufenden Betrieb

333

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

javascript jquery forms hidden-field Mithun Sreedharan
quelle

Antworten:

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