javascript - 动态地将数据从表单保存到数组中并显示

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>