Form Development Time Saver

Sometimes, large forms can be a challenge to develop – the order of the field names, misspelled field names, and keeping track of them all.

The JavaScript in this article lists all field names for you, right on the page with the form.

The JavaScript-generated list gives you a quick visual of what the form contains.

The form fields are printed in the order they appear. The list allows you to compare what the form has with what you thought it had.

Further, field names can be copied from the generated list for pasting into your JavaScript or other scripts, like PHP and Perl CGI.

Here's how to set it up.

The form tag needs an id value. Example:

<form id="my-form" method="post" action="/script.php">

The form id value is colored blue for easy recognition.

And here's the JavaScript. Customization and implementation notes follow.

<script type="text/javascript">
// Specify the id value of the form tag.

var FormIDvalue = "my-form";

// End of customization.
var form = document.getElementById(FormIDvalue);
for( var i=0; i<form.length; i++ )
{
   document.write(form[i].name + "<br>");
}
</script>

The JavaScript has one place to customize. Specify the id value of the form tag where indicated. The example id value is colored blue for easy recognition.

To implement, paste the JavaScript somewhere below the form. That's it.

Reload the page and you'll have your list of form field names.

When done with development, remove the JavaScript.

Will Bontrager