title: Why cant i get the value from this form using ajax and php?
body: <p>So I'm trying to get the values of this form by using ajax and PHP but for some reason I'm not getting it the way I want to get it. I have tried many ways but its not working.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="array.css"&gt;
          &lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
              &lt;form id="form" method="POST" action="array.php"&gt;
                      &lt;div class="form-row"&gt;
                            &lt;div class="form-group col-md-3"&gt;
                              &lt;label for="Date"&gt;My Birthday is&lt;/label&gt;
                              &lt;input type="date"  name="Date" class="form-control" id="Date" placeholder="MM/DD/YY"&gt;
                            &lt;/div&gt;
  
                            &lt;div class="form-group col-md-3"&gt;
                              &lt;label for="myName"&gt;My Name is&lt;/label&gt;
                              &lt;input type="text" class="form-control" name="myName" id="myName" placeholder="My Name"&gt;
                            &lt;/div&gt;
  
                            &lt;div class="form-group col-md-3"&gt;
                                &lt;label for="favColor"&gt;My Favorite Color is&lt;/label&gt;
                                  &lt;select name="favColor" class="form-control" id="favColor"&gt;
                                      &lt;option selected&gt;Choose&lt;/option&gt;
                                      &lt;option value="Red"&gt;Red&lt;/option&gt;
                                      &lt;option value="Blue"&gt;Blue&lt;/option&gt;
                                      &lt;option value="Green"&gt;Green&lt;/option&gt;
                                      &lt;option value="Yellow"&gt;Yellow&lt;/option&gt;
                                      &lt;option value="Orange"&gt;Orange&lt;/option&gt;
                                      &lt;option value="Pink"&gt;Pink&lt;/option&gt;
                                      &lt;option value="Black"&gt;Black&lt;/option&gt;
                                  &lt;/select&gt;
                            &lt;/div&gt;
  
                            &lt;div class="form-group col-md-3"&gt;
                                  &lt;label for="mySign"&gt;My Sign&lt;/label&gt;
                                  &lt;select name="mySign" class="form-control" id="mySign"&gt;
                                      &lt;option selected&gt;Choose&lt;/option&gt;
                                      &lt;option value="Aries"&gt;Aries&lt;/option&gt;
                                      &lt;option value="Taurus"&gt;Taurus&lt;/option&gt;
                                      &lt;option value="Gemini"&gt;Gemini&lt;/option&gt;
                                      &lt;option value="Cancer"&gt;Cancer&lt;/option&gt;
                                      &lt;option value="Virgo"&gt;Virgo&lt;/option&gt;
                                      &lt;option value="Libra"&gt;Libra&lt;/option&gt;
                                      &lt;option value="Scorpio"&gt;Scorpio&lt;/option&gt;
                                      &lt;option value="Sagittarius"&gt;Sagittarius&lt;/option&gt;
                                      &lt;option value="Capricorn"&gt;Capricorn&lt;/option&gt;
                                      &lt;option value="Aquarius"&gt;Aquarius&lt;/option&gt;
                                      &lt;option value="Pisces"&gt;Pisces&lt;/option&gt;
                                  &lt;/select&gt;
                            &lt;/div&gt;
                          &lt;button type="submit" class="btn btn-primary text-right"&gt;Submit&lt;/button&gt;
                      &lt;/div&gt;
              &lt;/form&gt;
  
  
              &lt;div id="test"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>ajax </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
                $(document).ready(function(){
                  $('#form').on('submit', function (e){
                    e.preventDefault();
                    var formData = $(this).serialize();
  
                    $.ajax({
                      type: "POST",
                      url: 'array.php',
                      data: {formData: formData},
                      success: function(data){
                        $('#test').append(data);
                      }
                    })
                  });
                });
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>$formData = array($_POST["formData"]);
  
  foreach($formData as $d =&gt; $d_value){
  echo "Key = " . $d . ", Value = " . $d_value;
  }
  </code></pre>
  
  <p>What it echo's out</p>
  
  <pre><code>Key = 0, Value = Date=2019-11-16&amp;myName=Marco&amp;favColor=Green&amp;mySign=Cancer
  </code></pre>
  
  <p>So what I'm trying to get it to echo out is:</p>
  
  <pre><code>Key = 0 , Value = Date=2019, 11, 26
  Key = 1 , Value = myName=Marco
  Key = 2 , Value = favColor=Green
  Key = 3 , Value = mySign=Cancer
  </code></pre>
  
  <p>So does anyone have any suggestions or clues on how I can fix this because I've tried other things but it still does not echo it the way I want it to. </p>