jquery无刷新添加和删除input输入框 增加减少input框
jquery无刷新添加和删除input输入框 增加减少input框
XML/HTML Code
- <a href="#" id="AddMoreFileBox" class="btn btn-info">添加更多的input输入框</a></span></p>
- <div id="InputsWrapper">
- <div><input type="text" name="mytext[]" id="field_1" value="Text 1"/><a href="#" class="removeclass">×</a></div>
- </div>
JavaScript Code
- <script>
- $(document).ready(function() {
- var MaxInputs = 8; //maximum input boxes allowed
- var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
- var AddButton = $("#AddMoreFileBox"); //Add button ID
- var x = InputsWrapper.length; //initlal text box count
- var FieldCount=1; //to keep track of text box added
- $(AddButton).click(function (e) //on add input button click
- {
- if(x <= MaxInputs) //max input box allowed
- {
- FieldCount++; //text box added increment
- //add input box
- $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" class="removeclass">×</a></div>');
- x++; //text box increment
- }
- return false;
- });
- $("body").on("click",".removeclass", function(e){ //user click on remove text
- if( x > 1 ) {
- $(this).parent('div').remove(); //remove text box
- x--; //decrement textbox
- }
- return false;
- })
- });
- </script>
相关推荐
开心就好 2020-06-10
huha 2020-10-16
TLROJE 2020-10-26
echoes 2020-08-20
nercon 2020-08-01
zhanghaibing00 2020-06-28
Aveiox 2020-06-25
henryzhihua 2020-06-21
zhoutaifeng 2020-06-17
liangzhouqu 2020-06-16
TONIYH 2020-06-11
x青年欢乐多 2020-06-06
KyrieHe 2020-06-03
bertzhang 2020-06-02
haokele 2020-05-29
niehanmin 2020-05-28
davidliu00 2020-05-26