我有个问题。下面的代码为通过dymically和.append()
.remove()
添加和删除文本框。我想所有的文本框的占位符文本框里面的数据会骤降,将被放置在我的文本框的名称设置文本框。另外随着框的占位符的将被放置在为它分配的文本。怎么做?
这里是我的代码:
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>
使用Javascript:
<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>