web-dev-qa-db-de.com

Dynamisches Hinzufügen von HTML-Formularfeldern mit jQuery

Da ich div innerhalb von Formularen nicht verwenden kann, frage ich mich, wie ich ein neues Feld in der Mitte des Formulars hinzufügen kann (und ich kann .append() hier nicht verwenden), ohne die Seite neu zu laden oder das Formular neu zu schreiben. (mit jQuery)

EDIT: Dies ist der HTML-Code:

<form id="form-0" name="0">
<b>what is bla?</b><br>
<input type="radio" name="answerN" value="0"> aaa <br>
<input type="radio" name="answerN" value="1"> bbb <br>
<input type="radio" name="answerN" value="2"> ccc <br>
<input type="radio" name="answerN" value="3"> ddd <br>
//This is where I want to dynamically add the new radio or text line

<input type="submit" value="Submit your answer">
//but HERE is where .append() will put it!

</form>
33
ilyo

Was diesen Thread zu verwirren scheint, ist der Unterschied zwischen:

$('.selector').append("<input type='text'/>"); 

Damit wird das Zielelement als untergeordnetes Element des Selektors angehängt.

Und

$("<input type='text' />").appendTo('.selector');

Damit wird das Zielelement als untergeordnetes Element des Selektors angehängt.

Beachten Sie, wie sich die Position des Zielelements und des Selektors ändert, wenn Sie die verschiedenen Methoden verwenden.

Was Sie wollen, ist folgendes:

$(function() {

  // append input control at start of form
  $("<input type='text' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .prependTo("#form-0");

  // OR

  // append input control at end of form
  $("<input type='text' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .appendTo("#form-0");

  // OR

  // see .after() or .before() in the api.jquery.com library

});
64
thastark

Dadurch wird ein neues Element hinter dem Eingabefeld mit der ID "Kennwort" eingefügt.

$(document).ready(function(){
  var newInput = $("<input name='new_field' type='text'>");
  $('input#password').after(newInput);
});

Nicht sicher, ob dies Ihre Frage beantwortet.

13
Fredrik

Sie können jeden HTML-Typ mit Methoden wie append und appendTo (ua) hinzufügen:

jQuery-Manipulationsmethoden

Beispiel:

$('form#someform').append('<input type="text" name="something" id="something" />');
8
Rob

so etwas könnte funktionieren:

<script type="text/javascript">
$(document).ready(function(){
    var $input = $("<input name='myField' type='text'>");
    $('#section2').append($input);
});
</script>

<form>
    <div id="section1"><!-- some controls--></div>
    <div id="section2"><!-- for dynamic controls--></div>
</form>
6
pixelbobby

Es scheint einen Fehler zu geben, wenn appendTo eine Frameset-ID verwendet, die an eine FORM in Chrome angehängt ist

0
Datadimension