javascript - 我如何捕获多个表单输入并保存在数组中

Question

<template name="uploadTicket">
    <div class="row">
       <h3> Upload Ticket</h3>
        <form class="ticket-form col s12" enctype="multipart/form-data">
            <div class="row">
                <div class="input-field col s12">
                    <input id="name" type="text" class="validate">
                    <label for="name">Event Name</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input id="location" type="text" class="validate">
                    <label for="location">Location</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s4">
                    <input id="date" type="date" class="validate">
                    <label for="date"></label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <textarea id="description" class="materialize-textarea"></textarea>
                    <label for="Description">Description</label>
                </div>
            </div>
            <div class="row">
                <div class="col s6">
                    <h5>More Price Fields</h5>
                </div>
                <div class="col s6">
                    <a class="btn-floating btn-large waves-effect waves-light red" id="addField"><i class="mdi mdi-plus"></i></a>
                </div>

            </div>
            <div class="wrapper">

                <div class="row">
                <div class="input-field col s4">
                    <input name="priceClass[]" type="text" class="validate">
                    <label for="priceClass[]">Class</label>
                </div>
                <div class="input-field col s4">
                    <input name="priceAmount[]" type="text" class="validate">
                    <label for="priceAmount[]">Price</label>
                </div>

                <div class="input-field col s4">
                    <h6>Input Price Classes and Amounts.</h6>
                </div>
                </div>

                <br>
            </div>
            <br>
            <div class="row">
                <div >
                    <button class="waves-effect waves-light btn" type="submit">Upload</button>
                </div>
            </div>
        </form>
    </div>
</template>

这是我的模板

Template.uploadTicket.events({
    'click #addField': function (event) {
        event.preventDefault();
        var max_fields = 10;
        var wrapper = $(".wrapper");
        var add_button = $(".addField");
        var x = 1;


        if (x < max_fields)
        {
            x++; //text box increment
            $(wrapper).append(' <div class="row"> <div class="input-field col s4"> <input name="priceClass[]" type="text" class="validate"> <label for="priceClass[]">Class</label> </div> <div class="input-field col s4"> <input name="priceAmount[]" type="text" class="validate"> <label for="priceAmount[]">Price</label> </div>  <a class="btn-floating btn-large waves-effect waves-light red" id="removeField"><i class="mdi mdi-minus"></i></a></div> <br>'); //add input box

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


});

这是我为该模板编写的 JavaScript。我为用户提供了添加多个字段的选项，以便他们可以有不同的价格类别。比如一定金额的金级，另一个金额的VIP，另一个金额的普通等等。在提交值并将它们保存到数组中时，我遇到了如何获取这些输入值的问题。

Answer 1

您将使用 jquery 遍历您的输入并将它们的值发送到一个空数组中。然后获取带有数据的数组并将其发送到您的集合。

let valueStore = [];
console.log(valueStore) // an empty array

$('.input-field input').each(function(){
    if (this.value != ''){
        valueStore.push(this.value)
    }
})

console.log(valueStore) // will have your values.