將表單中的數據動態保存爲數組並顯示此數據

Question

<p><label for="id_book">Book:</label> <select id="id_book" name="book"> 
<option value="" selected="selected">---------</option> 
<option value="1">1</option> 
<option value="5">2</option> 
<option value="10">3</option> 
</select></p> 

<p><label for="id_category">Category:</label> <select id="id_category" name="category"> 
<option value="" selected="selected">---------</option> 
<option value="1">1</option> 
<option value="5">2</option> 
<option value="7">4</option> 
</select></p> 

<p><label for="id_pages">Pages:</label> <input id="id_pages" name="pages" type="number"/></p> 

<button type="button">Add</button> 

我有這些字段。如何在點擊Add按鈕後將我的表單中的所有數據保存到數組中並顯示它？我需要多次填寫此表單的可能性。最後，我需要將這些數據保存在後端腳本中。

Answer 1

你真的應該考慮至少使用一些庫，如backbone.js它有一個美妙的數據模型api。

然而，使用純jQuery的，這可能是這樣的：

http://jsbin.com/noxarufu/1/edit

<script type="text/javascript"> 

    var values = { 
     book: '', 
     category: '', 
     pages: 0 
    }; 

    function onAdd() { 
     values.book = $('#id_book').val(); 
     values.category = $('#id_category').val(); 
     values.pages = $('#id_pages').val(); 

     console.log(values) 
    } 
    </script> 

打開控制檯查看結果。

要添加值的新行爲每次點擊：

<script type="text/javascript"> 

    var values = []; 

    function onAdd() { 
     var addVal = { 
     book: $('#id_book').val(), 
     category: $('#id_category').val(), 
     pages: $('#id_pages').val() 
     } 
     values.push(addVal); 

     console.log(values) 
    } 
    </script>