保存數組中的輸入並顯示所有項目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> 

Answer 2

這應該工作

<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="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> 

var names = [], 
    tbody = $("#table tbody"); 

function getInfo(e) { 
    var nameObj = { 
     first: e.target.form[0].value, 
     last: e.target.form[1].value 
    }; 

    names.push(nameObj); 

    e.target.form[0].value = ""; 
    e.target.form[1].value = ""; 
    tbody.empty(); 

    names.forEach(function (name) { 
     var tr = $("<tr>"); 

     tr.append($("<td>").text(name.first)); 
     tr.append($("<td>").text(name.last)); 

     tbody.append(tr); 
    }); 
} 

$("#submit-button").on("click", getInfo); 

對jsfiddle