我有一个按钮,只要我点击添加更多按钮,就会添加一组文字字段。 实际上,每当我添加新文本字段时,它都会附加在添加更多按钮上方,当我再次按下该按钮时,它会添加最近添加的文本字段上方的文本字段。
必须在最近添加的文本字段上方的**添加更多**按钮上方添加精确内容。
下面是我的代码,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>
正如您可以看到下面的图片,在评论字段中我添加了数字只是为了引用它如何添加,希望序列如上添加更多按钮但是它被添加到顶部
提前谢谢!
答案 0 :(得分:1)
您必须以不同方式添加模板。而不是
$('<br><div style="marg (...) of ></a></a></div>').insertBefore(add_button)
像这样添加
button.ts
答案 1 :(得分:0)
$(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).append('<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\
}
});
$(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--;
})
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="col-md-8 col-sm-12 col-24">
<div class="input_fields" style="color:black">
<div>
<input type="text" name="mytextt[]" hidden="" ></div>
</div>
<button class="add_field btn " onclick="" >Add More</button>
</div>
&#13;