Question

Is there a way to return a list / array of all the field names that are contained within a form? I.e if i made a form with 10 fields (‘name’, ’email’ etc…) on submit i can determine what the element names are?

Answer 1

In JavaScript we can get the name attribute of each form element like this:

$('form').on('submit', function () {
    var names = [];
    $.each($(this).find('input, textarea'), function () {
        names.push(this.name);
    });
});

This gathers the name attribute of each input or textarea element in the form and puts them in an array, names.

Note that .on() is new as of jQuery 1.7 and in this case is the same as using .bind(): http://api.jquery.com/on

In PHP you can loop through each of the $_GET or $_POST variables:

<?php
$names = array();
if (isset($_POST) && !empty($_POST)) {
    foreach ($_POST as $key => $val) {
        //$key is the name you wanted, and $val is the value of that input
        $names[] = $key;
    }
}
?>

And again, the $names variable is an array of all the names of form elements.

Update

If you want to create an associative array of names : values in JS you can do this:

$('form').on('submit', function () {
    var names = {};
    $.each($(this).find('input, textarea'), function () {
        names[this.name] = this.value;
    });
});

Now you can access the names variable like this:

alert(names.email);//this will alert the value of the input who's name is `email`