How can I create a php mail handler for a dynamically created form

Question

I am creating a form builder plugin for wordpress allowing users to build their own custom forms.

I have managed to design the form builder, now I am looking at the form submit handler. I'm using a php handler, something similar to this:

<?php
// process.php

$errors         = array();      // array to hold validation errors
$data           = array();      // array to pass back data

// validate the variables ======================================================
// if any of these variables don't exist, add an error to our $errors array

if (empty($_POST['name']))
    $errors['name'] = 'Name is required.';

if (empty($_POST['email']))
    $errors['email'] = 'Email is required.';

if (empty($_POST['superheroAlias']))
    $errors['superheroAlias'] = 'Superhero alias is required.';

// return a response ===========================================================

// if there are any errors in our errors array, return a success boolean of false
if ( ! empty($errors)) {

    // if there are items in our errors array, return those errors
    $data['success'] = false;
    $data['errors']  = $errors;
} else {

    // if there are no errors process our form, then return a message

    // DO ALL YOUR FORM PROCESSING HERE
    // THIS CAN BE WHATEVER YOU WANT TO DO (LOGIN, SAVE, UPDATE, WHATEVER)

    // show a message of success and provide a true success variable
    $data['success'] = true;
    $data['message'] = 'Success!';
}

// return all our data to an AJAX call
echo json_encode($data);

However, as mentioned, my forms are created dynamically, so I can't use hard coded variables.

I'm not sure of a good way forward with this, can anyone suggest a way I can use the dynamically created variables in my main form builder file as part of this handler file?

Here is my php builder code:

<form action="./includes/process.php" method="POST">
                    <?php foreach ( wp_parse_id_list( $widget[ 'form_builder_ids' ] ) as $form_builder_key ) {

....

<div class="media-body <?php echo ( isset( $item['design']['fonts'][ 'align' ] ) ) ? $item['design']['fonts'][ 'align' ] : ''; ?>">
                                            <?php if( $this->check_and_return( $item, 'label') ) { ?>
                                                <label>
                                                    <?php echo $item['label']; ?>
                                                        <?php if( $this->check_and_return( $item, 'required') ) { ?>
                                                            <span class="required" style="color:#c0392b;">*</span>
                                                        <?php } ?>
                                                </label>
                                            <?php } ?>

                                            <?php if( $this->check_and_return( $item, 'input_type') ) { ?>

                                            <?php
                                                $input_type_array = array('select', 'textarea', 'checkbox', 'radio');
                                                if( !in_array( $item['input_type'] ,$input_type_array ) ) {?>
                                                    <input type="<?php echo $item['input_type']; ?>" name="<?php echo $item['input_name']; ?>" <?php if( $this->check_and_return( $item, 'required') ) { echo 'required'; } ?>>

                                                <?php } else if ($item['input_type'] == 'textarea') { ?>
                                                    <textarea name="<?php echo $item['input_name']; ?>" <?php if( $this->check_and_return( $item, 'required') ) { echo 'required'; } ?>></textarea>

                                                <?php } else if ($item['input_type'] == 'select') { ?>
                                                    <select name="<?php echo $item['input_name']; ?>" <?php if( $this->check_and_return( $item, 'required') ) { echo 'required'; } ?>>
                                                        <?php foreach(explode("\n", $item['select_options']) as $select_option) { ?>
                                                            <option value="<?php echo preg_replace('/\s+/','', $select_option); ?>"><?php echo $select_option; ?></option>
                                                        <?php } ?>
                                                    </select>

                                                <?php } else if ($item['input_type'] == 'checkbox') { ?>
                                                        <?php foreach(explode("\n", $item['select_options']) as $select_option) { ?>
                                                            <input type="checkbox" name="<?php echo $item['input_name']; ?>" value="<?php echo preg_replace('/\s+/','', $select_option); ?>" <?php if( $this->check_and_return( $item, 'required') ) { echo 'required'; } ?>><?php echo $select_option; ?>
                                                        <?php } ?>


                                                <?php } else if ($item['input_type'] == 'radio') { ?>
                                                        <?php foreach(explode("\n", $item['select_options']) as $select_option) { ?>
                                                            <input type="radio" name="<?php echo $item['input_name']; ?>" value="<?php echo preg_replace('/\s+/','', $select_option); ?>" <?php if( $this->check_and_return( $item, 'required') ) { echo 'required'; } ?>><?php echo $select_option; ?>
                                                        <?php } ?>


                                                <?php } ?>
                                            <?php } ?>

                                    </div>

....
</form>

Answer 1

I'd achieve something like this by setting an incremental javascript global var:

var x = 0;


function addForm(){
    var formHTML = '<form onsubmit = "submitForm(' + x + '); return false;"> <input id = "name' + x + '" ...  </form>';
    x = x+1;
}

function submitForm(formIdentifier){
    var name = document.getElementById("name"+formIdentifier).value; //how you can get the form values from dynamic forms
    //process form with ajax from here
}

Where addForm() is that code that would add the form to the page, and submitForm is where you would process the data from a dynamic form submit event.

Let me know if you need some more clarification.