title: convert form data using serializeArray() and sending php via .Ajax
body: <p>This is my first post. I have searched for other solutions and what I've found only deals with components of this question. Basically this is what I'd like to do:</p>
  
  <ul>
  <li>Capture form data (tested, working); </li>
  <li>Convert form data using serializeArray() or serialize() (tested both options, working and outputs to console correctly);</li>
  <li>Send this information to the server through Ajax (not working); and</li>
  <li>PHP saves array as a CSV (not yet started).</li>
  </ul>
  
  <p>Bellow is the code I'm using. But first, here are some alternatives I've tried. Usually I get this: <strong>array(0) { }</strong></p>
  
  <ul>
  <li>'dataType' as Json - returns error;</li>
  <li>'GET', 'POST' and 'REQUEST' - PHP shows empty array;</li>
  <li>use form.serialize() - PHP shows empty array;</li>
  <li>use form.serializeArray() - PHP shows empty array; and</li>
  <li><p>var_dump($_POST), var_dump($_GET), var_dump($_REQUEST).</p>
  
  <pre><code>var serialisedForm = $(form).serializeArray();
  
  var serialisedData = JSON.stringify(serialisedForm);
  console.log(serialisedData); //working
  console.log(serialisedForm); //working
  
  $.ajax({
      type: "POST",
      url: "datacapture.php",
      data: {
          serialisedForm, //tested using serialisedData as well
      },
      success: function() {
          window.open('datacapture.php');
      },
      error: function() {
          alert("the form data has not been sent to the server");
      }
  })  
  </code></pre></li>
  </ul>
  
  <p>and here is the datacapture.php script I'm using to test the information flow.</p>
  
  <pre><code>&lt;?php 
  
  var_dump($_POST);
  
  ?&gt;
  </code></pre>
  
  <p>EDIT - and here is a sample form item, reading .text and .name from my settings.json file:</p>
  
  <pre><code>&lt;tbody&gt;
                  {
                  this.props.settings.schemes[0].questions.map((q, i)=&gt; {
                      return &lt;tr&gt;&lt;td&gt;{q.text}&lt;/td&gt;&lt;td&gt;&lt;div class="YesNo"&gt;&lt;input type="radio" required name={q.name} value="yes"&gt;Yes&lt;/input&gt;&lt;input type="radio" required name={q.name} value="no"&gt;No&lt;/input&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
                  })
                  }
              &lt;/tbody&gt;
  </code></pre>