Get form field names with javascript or php?-ThrowExceptions

Exception or error:

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?

How to solve:

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`

###

JavaScript

The raw JS way to do that is:

var inputs = document['<your form name>'].getElementsByTagName("input");
for(var i in lst) 
  if(lst[i] && lst[i].name)console.log(lst[i].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.

###

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)

###

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

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

###

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.com/input-selector/

demo http://jsfiddle.net/JBsbL/

$('form').submit(function() {
    var inputList = [];
    $(this).find(':input').each(function() {
        inputList.push(this.name);
    })
    alert(inputList.join(',  '))
    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)

###

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)

Leave a Reply

Your email address will not be published. Required fields are marked *