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.

Answer 2

您可以使用JQuery-Selectors获取所有输入字段。你们已经给了他们一堂课。之后，您可以将所有必要的信息提取到阵列中。 JQuery-Selector应该类似于：

$('.input-field')

使用forEach循环来获取每个选定的元素。

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

2 个答案: