2
我有一個按鈕，添加一組文本字段，每當我點擊添加更多按鈕。 其實發生的事情是，每當我添加新的文本字段，它會附加在的更多按鈕上，當我再次按下該按鈕時，它會在最近添加的文本字段上添加文本字段。動態添加的字段添加隨機序列JS？
它必須添加確切的**添加更多**按鈕不在最近添加的文本字段上方。
下面是我的代碼，JST檢查我要去的地方錯了
new.php
. . . . .
<div class="col-md-8 col-sm-12 col-24">
<div class="input_fields" style="color:black">
<button class="add_field btn " onclick="incrementValue()" >Add More</button>
<div>
<input type="text" name="mytextt[]" hidden="" ></div>
</div>
</div>
</div>
. . . . . . .
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields"); //Fields wrapper
var add_button = $(".add_field"); //Add button ID
var wrapper_pre1 = $(".present_fields_1"); //Fields wrapper
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).prepend('<br><div style="margin-left:50%;"><div class="form-group"><label class="control-label type" for="selectbasic" style="">Type of work</label><div class="col-md-6"><select id="type_of_work[]" name="type_of_work[]" class="form-control type_of_work" style=""><option value="Audit Report">Audit Report</option><option value="ITR filing">ITR filing</option><option value="VAT Filing">VAT Filing</option><option value="Accounting">Accounting</option><option value="Registration">Registration</option><option value="Certification">Certification</option><option value="Others">Others</option></select></div></div><div class="form-group"> <label class="col-md-4 control-label status" for="selectbasic" style="">Status</label><div class="col-md-6"><select id="status1' + x + '" name="status[]" class="form-control status"><option value="Pending">Pending</option><option value="Work in process">Work in process</option><option value="Completed">Completed</option></select></div></div><div class="form-group row"><label for="example-date-input" class="col-2 col-form-label date">DATE</label><div class="col-10 col"><input class="form-control datepicker pickers" id="date" name="date[]" style="" type="text" readonly></div></div><div class="form-group"><label class="col-md-4 control-label comment" for="textinput" style="">Comment</label><div class="col-md-4"><input id="comments' + x + '" name="comment[]" type="text" placeholder="" class="form-control input-md comment" style=""></div></div></center><a href="#" class="remove_field" style=""><img src="images/del24.png" ></a></a></div>'); //add input box\
var newInput=$("#date").datepick({dateFormat: 'dd/mm/yyyy'});
newInput.datepick({dateFormat: 'dd/mm/yyyy'}).datepick("setDate", new Date());
$("#status1" + x).click(function() {
if ($("#status1" + x).val() == "Completed") {
$("#comments" + x).attr("required", "required");
}
else
$("#comments" + x).attr("required", false);
});
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
$(wrapper_pre1).on("click",".remove_field_pre1", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
正如你可以看到下面的圖片，在註釋字段我已經添加號碼，只爲請參考如何添加，想要的序列如上增加更多按鈕，但它增加在頂部
謝謝 提前 ！
當您插入領域的新組，只需將其添加到容器div的末尾所有現場組。追加而不是前置.... –
@SloanThrasher不，但當我這樣做時，添加更多按鈕上升，當添加新的字段 – aiffin
然後移動字段組容器外的添加更多按鈕。或者在添加更多按鈕之前結束的字段組周圍添加一個包含div的div。 –