我有问题。以下代码用于通过.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>
答案 0 :(得分:0)
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")
)
})
});
&#13;
<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>
&#13;
答案 1 :(得分:0)
<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>
{{1}}