我想在单击按钮时添加多个输入字段,但仅适用于单个输入字段。想要这些输入字段内联。在字段和删除按钮之间留有空格。
add.js
$(document).ready(function(){
var next = 1;
$(".add-more").click(function(e){
e.preventDefault();
var addto = "#field" + next;
var addRemove = "#field" + (next);
next = next + 1;
var newIn = '<input autcomplete="off" class="input form-control" id="field2' + next + '" name="field' + next + '" type="text">';
var newIn1= '<select class="select" id="field1' + next +'" name="field">';
var newInput = $(newIn+newIn1);
var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
var removeButton = $(removeBtn);
$(addto).after(newInput);
$(addRemove).after(removeButton);
$("#field" + next).attr('data-source',$(addto).attr('data-source'));
$("#count").val(next);
$('.remove-me').click(function(e){
e.preventDefault();
var fieldNum = this.id.charAt(this.id.length-1);
var fieldID = "#field" + fieldNum;
$(this).remove();
$(fieldID).remove();
});
});
});
form.html
<form class="form-inline input-append" role="form">
<button id="b1" class="btn add-more" type="button">Add Tax Component</button>
<div type="hidden" name="count" value="1">
<div class="controls" id="profs">
<div id="field" class="form-group col-md-12">
<select class="select col-md-4" id="field1" name="prof2" hidden>
<option>select Tax</option>
</select>
<input autocomplete="off" class="input col-md-8" id="field2" name="prof1" type="text" placeholder="Type something" hidden data-items="8"/>
</div>
</div>
</div>
</form>
我看了看您的代码,并从中得出了这一点。我不必每次添加都创建一个元素,而是自由地重写代码,以便它克隆一个初始元素(模板)并将其附加到您的文档中。
看看下面的代码片段。这可能是您要的吗?
$(".template:first").hide(); //hide template
/* Add new item based on hidden template */
$(".add-more").click(function() {
var newItem = $(".template:first").clone();
newItem.find("select").attr("id", "field" + ($(".template").length + 2)); //rewrite id's to avoid duplicates
newItem.find("input").attr("id", "field" + ($(".template").length + 2)); //rewrite id's to avoid duplicates
newItem.show(); //show clone of template
$(".template:last").after(newItem);
bindRemove();
});
/* Bind remove function to last added button*/
function bindRemove() {
$(".remove:last").click(function(e) {
if ($(".remove").length > 1)
$(this).parents(".template").remove();
});
}
/* Execute bind-function at startup */
bindRemove();
.template {
border: 2px solid black;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline input-append" role="form">
<button id="b1" class="btn add-more" type="button">Add Tax Component</button>
<div class="template">
<div class="controls" id="profs">
<div id="field" class="form-group col-md-12">
<select class="select col-md-4" id="field1" name="prof2">
<option>select Tax</option>
</select>
<br/>
<br/>
<input autocomplete="off" class="input col-md-8" id="field2" name="prof1" type="text" placeholder="Type something" data-items="8" />
<button class="remove" type="button">
X
</button>
</div>
</div>
</div>
</form>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句