2015-12-21 32 views
1
<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另一個金額,定期的另一個金額等。我在提交值並將它們保存到數組時遇到了如何獲取這些輸入值的問題。

+0

是否要將值保存到事件中的數組並將其傳遞給服務器,還是要將值傳遞給服務器中的方法並保存在數組中? – Luna

+0

我想將值傳遞給我的服務器中的方法並將其保存在那裏 – lagfvu

回答

2

你會使用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. 
0

您可以使用JQuery選擇器來獲取所有輸入字段。你已經給他們上了一堂課。之後,您可以將所有必要的信息提取到您的數組中。 的jQuery的選擇應該是這個樣子:

$('.input-field') 

使用foreach循環讓每一個選擇的元素。

相關問題