title: Capture Array Values from Dynamic input Fields using PHP and email them
body: <p>I have a very large form, in this form there are multiple dynamic form fields which can be added by the user. I need to capture these using php and email, there is no mysqli connection necessary. I use some javascript to handle the dynamic form fields appearing and disappearing. </p>
  
  <p>One of the html dynamic form fields looks like this--</p>
  
  <pre><code>&lt;div class="col-sm-1"&gt;
                  &lt;select id="about_you_dep-gender[]" name="about_you_dep-   gender[]" class="form-control"&gt;
                      &lt;option value="Male"&gt;Male&lt;/option&gt;
                      &lt;option value="Female"&gt;Female&lt;/option&gt;
                  &lt;/select&gt;&lt;div class="help"&gt;Gender&lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>The php currently looks like this - if I submit the form now the content of that field just says:array</p>
  
  <pre><code>    &lt;?php
  if(!isset($_POST['submit']))
  {
      echo "error; you need to submit the form!";
  
     $about_you_dep_gender = $_POST['about_you_dep-gender'];
  
     $email_subject = "New Form submission";
     $email_body = "You have received a new filled out form from client      $about_you_name.\n\n".
  
  "Dependant Gender: $about_you_dep_gender \n". 
  
  }
  </code></pre>
  
  <p>The javascript is below , this part of the form seems to be working fine.</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
  // The maximum number of options
  var MAX_OPTIONS = 3;
  
  $('#custom')
      .formValidation({
          framework: 'bootstrap',
          icon: {
              valid: 'glyphicon glyphicon-ok',
              invalid: 'glyphicon glyphicon-remove',
              validating: 'glyphicon glyphicon-refresh'
          }    
      })
  
      // Add button click handler
      .on('click', '.addButton', function() {
          var $template = $('#depTemplate'),
              $clone    = $template
                              .clone()
                              .removeClass('hide')
                              .removeAttr('id')
                              .insertBefore($template),
              $dep_name   = $clone.find('[name="about_you_dep-name[]"]')
              $dep_gender   = $clone.find('[name="about_you_dep-gender[]"]')
              $dep_dob   = $clone.find('[name="about_you_dep-dob[]"]')
              $dep_fin   = $clone.find('[name="about_you_dep-fin[]"]')
              $dep_until   = $clone.find('[name="about_you_dep-until[]"]');
  
          // Add new field
          $('#custom')
              .formValidation('addField', $dep_name) 
              .formValidation('addField', $dep_gender) 
              .formValidation('addField', $dep_dob)
              .formValidation('addField', $dep_fin)
              .formValidation('addField', $dep_until);
      })
  
      // Remove button click handler
      .on('click', '.removeButton', function() {
          var $row    = $(this).parents('.form-group'),
              $dep_name = $row.find('[name="about_you_dep-name[]"]')
              $dep_gender = $row.find('[name="about_you_dep-gender[]"]')
              $dep_dob = $row.find('[name="about_you_dep-dob[]"]')
              $dep_fin = $row.find('[name="about_you_dep-fin[]"]')
              $dep_until = $row.find('[name="about_you_dep-until[]"]');
  
          // Remove element containing the option
          $row.remove();
  
          // Remove field
          $('#custom')
              .formValidation('removeField', $dep_name) 
              .formValidation('removeField',  $dep_gender) 
              .formValidation('removeField', $dep_dob)
              .formValidation('removeField', $dep_fin)
              .formValidation('removeField', $dep_until);
      })
  
      // Called after adding new field
      .on('added.field.fv', function(e, data) {
          // data.field   --&gt; The field name
          // data.element --&gt; The new field element
          // data.options --&gt; The new field options
  
          if (data.field === 'about_you_dep-name[]') {
              if ($('#custom').find(':visible[name="about_you_dep-name[]"]').length &gt;= MAX_OPTIONS) {
                  $('#custom').find('.addButton').attr('disabled', 'disabled');
              }
          }
      })
  
      // Called after removing the field
      .on('removed.field.fv', function(e, data) {
         if (data.field === 'about_you_dep-name[]') {
              if ($('#custom').find(':visible[name="about_you_dep-name[]"]').length &lt; MAX_OPTIONS) {
                  $('#custom').find('.addButton').removeAttr('disabled');
              }
          }
      });
  </code></pre>
  
  <p>});
   </p>
  
  <p>Currently when I process the form it returns with the answer:array, instead of the actual input from the form field. Any help would be greatly appreciated. Thank you so much in advance :)</p>