.serializeArray()

Get the values from a form, iterate through them, and append them to a results display.

HTML

<p><b>Array Results:</b> <span id="results"></span></p>

  <form id="test">
            <input type="hidden" value="id_01" name="id[]">
            <input type="hidden" value="Tom" name="name[]">
            <input type="hidden" value="1" name="sales[]">
            <input type="hidden" value="10" name="price[]">
            <input type="hidden" value="id_02" name="id[]">
            <input type="hidden" value="Jerry" name="name[]">
            <input type="hidden" value="1" name="sales[]">
            <input type="hidden" value="20" name="price[]">
            <input type="hidden" value="id_01" name="id[]">            
            <input type="hidden" value="Tom" name="name[]">
            <input type="hidden" value="1" name="sales[]">
            <input type="hidden" value="10" name="price[]">
            <input type="hidden" value="id_02" name="id[]">      
            <input type="hidden" value="Jerry" name="name[]">
            <input type="hidden" value="1" name="sales[]">
            <input type="hidden" value="20" name="price[]">      
  </form>

<table>
    <tr>
        <th>Salesman</th>
        <th>Products Sold</th>
        <th>Total Sale Price</th>
        <th>Commission (10% of Total Sale Price)</th>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>2</td>
        <td>40</td>
        <td>4</td>
    </tr>    
    <tr>
        <td>Tom</td>
        <td>2</td>
        <td>20</td>
        <td>2</td>
    </tr>   
</table>

CSS

body, select { font-size:14px; }
  form { margin:5px; }
  p { color:red; margin:5px; }
  b { color:blue; }
table,tr, td,th {border: 1px solid;padding:5px;}

JavaScript

function showValues() {
      var fields = $("#test").serializeArray();
      alert(fields + "");
        console.log(fields);
      $("#results").empty();
      jQuery.each(fields, function(i, field){
        $("#results").append(field.value + " ");
      });
    }