javascript - 将输入保存在数组中并显示所有项目 jquery\javascript

Question

我是 jQuery 的初学者。我希望我的表单的所有输入值都在数组中 =(项目 01，项目 02 和)保存 ..

它应该在表格中显示项目吗？

我做了什么但它不起作用:

<form id="form_id">
    <label for="firstname">First Name:</label>
    <input type="text" id="firstname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <label for="lastname">Last Name:</label>
    <input type="text" id="lastname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <input type="submit" value="submit" id="submit-button" />
</form>

<div id="table">
<h2>List of all person</h2>
<table class="footable">
    <thead>
        <tr>
            <th data-class="expand"> First Name </th>
            <th> Last Name </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>e.g --> array[1].firstname</td>
            <td>e.g --> array[1].lastname</td>
        </tr>
    </tbody>
</table>
</div>

Javascript 代码:

  $(function() {
    $('#submit-button').click(function() {
        var formInputs = new Array();
        //Get the form ID
        var id = $(this).parent().attr('id');
        $('#' + id + ' input').each(function() {
            //Get the input value
            var inputValue = $(this).val();
            //Get the input id
            var inputId = $(this).attr('id');
            //Add them to the array
            formInputs[inputId] = inputValue;
        });

        show....
    });
});

Answer 1

试试这个

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
    $("#submit-button").click(function(){
      var data = $('#form_id').serializeArray();
      var obj = {};
      for (var i = 0, l = data.length; i < l; i++) {
          obj[data[i].name] = data[i].value;
      }
      $('table.footable tbody').append('<tr><td>'+obj['firstname']+'</td><td>'+obj['lastname']+'</td></tr>');
      $("#firstname").val('');
      $("#lastname").val('');
    })
  })
 </script>
<form id="form_id">
    <label for="firstname">First Name:</label>
    <input type="text" id="firstname" name="firstname" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <label for="lastname">Last Name:</label>
    <input type="text" id="lastname" name="lastname" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <input type="button" value="submit" id="submit-button" />
</form>

<div id="table">
<h2>List of all person</h2>
<table class="footable">
    <thead>
        <tr>
            <th data-class="expand"> First Name </th>
            <th> Last Name </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>