Capture Array Values from Dynamic input Fields using PHP and email them

Question

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.

One of the html dynamic form fields looks like this--

<div class="col-sm-1">
                <select id="about_you_dep-gender[]" name="about_you_dep-   gender[]" class="form-control">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select><div class="help">Gender</div>
            </div>

The php currently looks like this - if I submit the form now the content of that field just says:array

    <?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". 

}

The javascript is below , this part of the form seems to be working fine.

<script>
$(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   --> The field name
        // data.element --> The new field element
        // data.options --> The new field options

        if (data.field === 'about_you_dep-name[]') {
            if ($('#custom').find(':visible[name="about_you_dep-name[]"]').length >= 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 < MAX_OPTIONS) {
                $('#custom').find('.addButton').removeAttr('disabled');
            }
        }
    });

});

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 :)

Answer 1

You have to loop through the array

<?php
if(!isset($_POST['submit']))
{
    $dependents = array();

    foreach ($_POST['about_you_dep-gender'] as $key => $value) {
         $dependents[] = array(
             'name'   => $_POST['about_you_dep-name'][$key],
             'gender' => $_POST['about_you_dep-gender'][$key],
             'dob' => $_POST['about_you_dep-dob'][$key],
         );
   }

   $email_subject = "New Form submission";
   $email_body = "You have received a new filled out form from client.\n\n";
   $email_body .= "Name: " . $aboutYouName . "\n";

   foreach ($dependents as $dependent) {
       $email_body .= "Dependent Name: " . $dependent['name'] . "\n";
       $email_body .= "Dependent Gender: " . $dependent['gender'] . "\n";
       $email_body .= "Dependent DOB: " . $dependent['dob'] . "\n";
   }

   // Send Email
}