我有个问题。下面的代码用于通过.append()和.remove()动态添加和删除文本框。我希望占位符为的文本框中的所有数据都将被内爆，并将被放置在我设置的名为textbox的文字框中。此外，占位符为box的占位符将被放置在为其分配的文本框中。如何做到这一点？
这是我的代码：
HTML
<form class="form-horizontal" method= "Post">
<div class="control-group">
<div class="inc">
<div class="controls">
<input type="text" class="form-control" name="textbox" placeholder="textbox"/>
<input type="text" class="form-control" name="text" placeholder="text"/>
<button style="margin-left: 50px" class="btn btn-info" type="submit" id="append" name="append">
Add Textbox</button>
<br>
<br>
</div>
</div>
<input type="submit" class="btn btn-info" name="submit" value="submit"/>
<input type="text" class="form-control" name="textbox" placeholder="texbox"/>
<input type="text" class="form-control" name="text" placeholder="text"/>
</div>
</form>
JavasScript:
<script type="text/javascript">
jQuery(document).ready( function () {
$("#append").click( function() {
$(".inc").append('
<div class="controls">
<input class="form-control" type="text" name="textbox" placeholder="textbox">
<input class="form-control" type="text" name="text" placeholder="text">
<a href="#" class="remove_this btn btn-danger">remove</a>
<br>
<br>
</div>');
return false;
});
jQuery('.remove_this').live('click', function() {
jQuery(this).parent().remove();
return false;
});
});
</script>
jQuery(document).ready( function () {
$("#append").click( function(e) {
e.preventDefault();
$(".inc").append('<div class="controls">'
<input class="form-control" type="text" name="textbox" placeholder="textbox">'
<input class="form-control" type="text" name="text" placeholder="text">'
<a href="#" class="remove_this btn btn-danger">remove</a>'
<br>'
<br>'
</div>');
return false;
});
jQuery(document).on('click', '.remove_this', function() {
jQuery(this).parent().remove();
return false;
});
$("input[type=submit]").click(function(e) {
e.preventDefault();
$(this).next("[name=textbox]")
.val(
$.map($(".inc :text"), function(el) {
return el.value
}).join(",'n")
)
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form class="form-horizontal" method= "Post">
<div class="control-group">
<div class="inc">
<div class="controls">
<input type="text" class="form-control" name="textbox" placeholder="textbox"/>
<input type="text" class="form-control" name="text" placeholder="text"/>
<button style="margin-left: 50px" class="btn btn-info" type="submit" id="append" name="append">
Add Textbox</button>
<br>
<br>
</div>
</div>
<input type="submit" class="btn btn-info" name="submit" value="submit"/>
<input type="text" class="form-control" name="textbox" placeholder="texbox"/>
<input type="text" class="form-control" name="text" placeholder="text"/>
</div>
</form>jQuery(document).ready( function () {
$("#append").click( function(e) {
e.preventDefault();
$(".inc").append('<div class="controls">'
<input class="form-control" type="text" name="textbox" placeholder="textbox">'
<input class="form-control" type="text" name="text" placeholder="text">'
<a href="#" class="remove_this btn btn-danger">remove</a>'
<br>'
<br>'
</div>');
return false;
});
jQuery(document).on('click', '.remove_this', function() {
jQuery(this).parent().remove();
return false;
});
$("input[type=submit]").click(function(e) {
e.preventDefault();
$(this).next("[name=textbox]")
.val(
$.map($(".inc :text"), function(el) {
return el.value
}).join(",'n")
)
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form class="form-horizontal" method= "Post">
<div class="control-group">
<div class="inc">
<div class="controls">
<input type="text" class="form-control" name="textbox" placeholder="textbox"/>
<input type="text" class="form-control" name="text" placeholder="text"/>
<button style="margin-left: 50px" class="btn btn-info" type="submit" id="append" name="append">
Add Textbox</button>
<br>
<br>
</div>
</div>
<input type="submit" class="btn btn-info" name="submit" value="submit"/>
<input type="text" class="form-control" name="textbox" placeholder="texbox"/>
<input type="text" class="form-control" name="text" placeholder="text"/>
</div>
</form>