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?

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?

• php
• javascript
• jquery
• forms
• field

• your problem could be solved in php and javascript... would be nice to know which one you prefer... – Neysor Commented Mar 14, 2012 at 18:42

8 Answers 8

JavaScript

The raw JS way to do that is:

const inputs = document['<your form name>'].getElementsByTagName("input");
for (const input in inputs) {
    if (inputs[input] && inputs[input].name) {
       console.log(inputs[input].name);
    }
}

PHP

Yes. They are all in the superglobals $_GET (for all of the GET variables), $_POST (if your form has method="POST"), and $_REQUEST ($_REQUEST is, by default Environment, Get, Post, Cookie, and Server (in that order) you can read more here).

If you want to just get the names, then you can use array_keys on any of the above.

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./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`

jQuery serialize: http://api.jquery./serialize/

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

Yes, they are the keys of your $_POST e.g:

$_POST['name'] = 'whatever name was in the form';

You can do a print_r($_POST) to see all keys.

(or $_GET depending on your forms submit method)

the $_POST array contains all the field that have been submitted if the form's method was post. If the method was get then $_GET has the form fields (as well as any other get params that happen to be in the URL)

With JQuery you can know it by selecting the input elements and using attr('name');

With PHP :

you can traverse $_GET, $_POST with foreach You can also get the list of keys by using array_keys($_POST);

:input selector will find form elements in client

http://api.jquery./input-selector/

demo http://jsfiddle/JBsbL/

$('form').submit(function() {
    var inputList = [];
    $(this).find(':input').each(function() {
        inputList.push(this.name);
    })
    alert(inputList.join(',  '))
    return false;
})​

These solutions fully solve your problem, but they wroted as use jQuery. jQuery is not a populer library nowadays. We can solve with pure JavaScript more easily.

[...document.querySelectorAll("form input, form textarea, form select")].map(el => el.name)