Question

我有一个按钮。当用户点击“添加更多”时，会添加另一个输入字段，最多为10个。如何获取每个输入字段的值并在提交时将其放入字符串数组中？

<div class="input_fields_wrap">

        <div class ="delivery-num-container">
        <button class="add_field_button btn btn-info btn-sm">Add More Numbers</button>
        <input type="text" name="delivery_number" value="{{admissions.delivery_number}}" class="form-control delivery-num-input" required pattern="[0-9]+" placeholder="ex(1524587....)"></div>
 </div>

jq代码

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; //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('<div class="delivery-num-input"><input type="text" name="delivery_number" class="form-control delivery_number_plus"/><a href="#" class="remove_field btn btn-sm btn-danger">Remove</a></div>'); //add input box
        }
    }
);

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

Answer 1

您可以创建一个数组，遍历所有输入，然后将它们（即push）追加到新创建的数组中：

var array = [];
wrapper.find('input').each(function(){
    array.push($(this).val())
})

Answer 2

您可以按标签和名称进行查询，这样您可以更具体地了解要查看的字段，这是您可以使用的示例函数：

 function getValues(){

    var sample = [];
    $('input[name=delivery_number]').each(function(idx){
       sample.push($(this).val());
    });
   console.log(JSON.stringify(sample));
   return sample;
}

使许多输入字段的值与字符串数组相同

2 个答案: