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>
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
});
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.
Sie können jeden HTML-Typ mit Methoden wie append
und appendTo
(ua) hinzufügen:
Beispiel:
$('form#someform').append('<input type="text" name="something" id="something" />');
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>
Es scheint einen Fehler zu geben, wenn appendTo eine Frameset-ID verwendet, die an eine FORM in Chrome angehängt ist