Question

我想点击我的按钮并插入每次点击新输入，当最多10点时停止。我已完成一个输入让我检查我的代码： HTML代码

    <div class="form-group ">
    <label for="email2" class="col-sm-3 control-label">Occupants Email Address :</label>
    <div class="col-sm-3">
        <input type="email" class="form-control" id="email2" placeholder="Email">
    </div>
    <div class="col-sm-2">
        <span class="addMore">ADD</span>
    </div>
</div>
<div class="form-group addmore2">
    <label for="emailOccup2" class="col-sm-3 control-label">Occupants Email Address 2 :</label>
    <div class="col-sm-3">
        <input type="email" class="form-control" id="emailOccup2" placeholder="Email">
    </div>
    <div class="col-sm-2 removeEmail">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> remove
    </div>

CSS

.addmore2 {
    display: none;
}

jQuery

$('.addMore').click(function() {
    $('.addmore2').slideDown();
})

$('.removeEmail').click(function() {
    $('.addmore2').slideUp();
});

我知道如何插入一个，有人帮助我需要使用什么功能来使它成为10。谢谢！

Answer 1

查看下面的实施，该实施大量改编自Add/Remove Input Fields Dynamically with jQuery。

您的目标是跟踪已添加的字段数。一旦字段数（由x表示）超过10，append方法将不再起作用。

每次点击，我们都会将字段数增加一个。

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initial 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(
                '<div class="form-group"><label>Occupants Email Address :</label><div class="col-sm-3"><input type="text" name="mytext[]"/></div><a href="#" class="remove_field">Remove</a></div>'
            ); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

这里是相应的HTML

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div class="form-group"><label>Occupants Email Address :</label><div class="col-sm-3"><input type="text" name="mytext[]"/></div>
</div>

这是一个有效的jsFiddle：jsFiddle

Answer 2

这是一个基本的例子

var iteration = 0,
    addEmail = document.querySelector("#addEmail");

addEmail.addEventListener("click", function(){
  if(iteration < 10){
    var input =document.createElement("input");
    input.type = "email"; 
    input.placeholder = "Email"
    document.body.appendChild(input);
    iteration++
  }
},false);

<input id=addEmail type=button value="add Email input" />

使用jquery，您可以执行类似

的操作

var iteration = 0;

$("#addEmail").click(function() {
  if (iteration < 10) {
    var input = document.createElement("input");
    input.type = "email";
    input.placeholder = "Email"
    document.body.appendChild(input);
    iteration++
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id=addEmail type=button value="add Email input" />

如何jQuery - 添加按钮插入最多10个新输入

2 个答案: