title: Store HTML Table Data into Javascript Array
body: <p>I'm trying to store table data to Javascript array and send the array to php.</p>
  
  <pre><code>&lt;div&gt;
    &lt;h5&gt;PUT SOMETHING 1&lt;/h5&gt;
    &lt;input type="text" id="sample1" palceholder="SOMETHING" required&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;h5&gt;PUT SOMETHING 2&lt;/h5&gt;
    &lt;input type="text" id="sample2" palceholder="SOMETHING" required&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;h5&gt;PUT SOMETHING 3&lt;/h5&gt;
    &lt;input type="text" id="sample3" palceholder="SOMETHING" required&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button style="margin-top: 20px;" type="button" onclick="output();"&gt;OUTPUT&lt;/button&gt;
  &lt;/div&gt;
  &lt;div style="margin-top: 10px;"&gt;
    &lt;table class="table table-striped projects" id="table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;sample1&lt;/th&gt;
          &lt;th&gt;sample2&lt;/th&gt;
          &lt;th&gt;sample3&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button type="button" onclick="submit();"&gt;SUBMIT&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my script</p>
  
  <pre><code>function delete_row(r) {
    var result = confirm("Are you sure? Delete row from order?");
    if (result) {
      var i = r.parentNode.parentNode.rowIndex;
      document.getElementById("table").deleteRow(i);
    }//if(result)
  }//delete_row();
  
  function output() {
    var sample1 = document.getElementById("sample1").value;
    var sample2 = document.getElementById("sample2").value;
    var sample3 = document.getElementById("sample3").value;
  
    var table = document.getElementById("table");
    var row = table.insertRow(table).outerHTML = "&lt;tr id='row'&gt;&lt;td&gt;" + sample1 
              + "&lt;/td&gt;&lt;td&gt;" + sample2 + "&lt;/td&gt;&lt;td&gt;" + sample3 +
              "&lt;/td&gt;&lt;td&gt; &lt;a href='#' onclick='delete_row(this)'&gt;Remove &lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
  }//output();
  
  function submit() {
    //Store HTML Table Values into Multidimensional Javascript Array Object
    var TableData = new Array();
    $('#table tr').each(function(row, tr) {
      TableData[row] = {
        "sample1": $(tr).find('td:eq(0)').text(),
        "sample2": $(tr).find('td:eq(1)').text(),
        "sample3": $(tr).find('td:eq(2)').text()
      }//tableData[row]
    });
    TableData.shift(); // first row will be empty - so remove
  
    alert(TableData);
  
    var Data;
    Data = $.toJSON(TableData);
  
    $.ajax({
      type: "POST",
      url: "getInfo.php",
      data: "pTableData=" + TableData,
      success: function(msg) {
          //return value stored in msg variable "success";
      }//success
    });
  }//submit();
  </code></pre>
  
  <p>my php</p>
  
  <pre><code>&lt;?php
    // Unescape the string values in the JSON array
    $tableData = stripcslashes($_POST['pTableData']);
  
    // Decode the JSON array
    $tableData = json_decode($tableData,TRUE);
  
    // now $tableData can be accessed like a PHP array
    echo $tableData[1]['sample1'];
  ?&gt;
  </code></pre>
  
  <p>The submit function isn't working for me, even if i remove the $.ajax, the alert(TableData) isn't showing. thus I cant verify if my php code and storing html table data is correct, could you please take a look at my submit function and php code to see where did I go wrong?</p>
  
  <p>Thank You in Advance.</p>