title: How to fix empty array from form-control w/o mySql (PHP, AJAX, JQuery, JS)
body: <p>I'm trying to create a PHP form to a nonprofit organization and would like to send an email via SMTP using PHPMailer.
  My problem is that the form contains a dynamic table, where I want to store/send data to a .php file via Ajax and JSON, but it doesn't fill the array with values (even if I type <code>$(tr).find('td:eq(0)').val()</code>. The Ajax data also contains two addition values.
  Also if I try to json_decode on the code below, the PHP breaks.</p>
  
  <ol>
  <li>I tried getting the data by variable, and it works.</li>
  <li>I tried to collect them in a single string which was converted to JSON, it didn't work.(The PHP doesn't send anything nor error feedbacks)</li>
  <li>Right now I'm trying to create multiple arrays from rows. But like 2. it doesn't work</li>
  </ol>
  
  <p>The HTML body:</p>
  
  <pre><code>&lt;html&gt;....
  &lt;input id="name" class="form-control" required&gt;
  &lt;input type="email" id="email"class="form-control" required&gt;
  &lt;table id="dynamic_field"&gt;
    &lt;tr&gt;
     &lt;td&gt;
      &lt;textarea id="value1" class="form-control" required&gt;&lt;/textarea&gt;&lt;/td&gt;
     &lt;td&gt;
      &lt;textarea id="value2" class="form-control" required&gt;&lt;/textarea&gt;&lt;/td&gt;
  .....
  &lt;/tr&gt;&lt;/table&gt;
  &lt;input type="button" onclick="sendEmail()" value="Send &amp;arr" class="btn btn-primary"&gt;
  </code></pre>
  
  <p>The Script:</p>
  
  <pre><code>function sendEmail() {
    var name = $("#name");
    var email = $("#email");
    var value1 = $("#value1");
    var value2 = $("#value2");
   ....  
    var TableData;
    TableData = JSON.stringify(storeTblValues());
  
    $.ajax({
            url: 'sendEmail.php',
            method: 'POST',
            dataType: 'json',
            data: {
                   name: name.val(),
                   email: email.val(),
                   value1: value1.val(),
                   value2: value2.val(),
                   TableData: TableData
     }, success:...
  
  function storeTblValues(){
   var TableData = new Array();
   $("#dynamic_field tr").each(function (row, tr) {
     TableData[row] = {"value1": $(tr).find('td:eq(0)').text() , "value2": $(tr).find('td:eq(1)').text() , ......}
    ;});return TableData;
  ;}
  </code></pre>
  
  <p>I expect the output of the array <code>TableData</code> to be <code>[{"value1":"Whatever in Value 1","value2":"Whatever in Value 2 ",....}]
  </code>
  , but what I read from this string is <code>[{"value1":"\n ","value2":"\n ",...}]</code></p>