Form Debugging Assistant

Some forms have an abundance of HTML and JavaScript code interspersed among the form field tags. The amount of code may make it difficult to find and read the details of the various form fields. This is especially true with large or complex forms.

Therefore, it can be difficult to find form mistakes that slip through during development. There are many things to look for, perhaps even things a person isn't aware should be looked for.

There may be a duplicate field name. A field name with a space in it or between the name and an enclosing quote. Perhaps there is no value tag for a hidden field. Perhaps an id tag is needed. Or, a dropdown is missing a select tag. There may be a hyphen in a field name that had been meant as the id value.

A set of radio buttons may have different names rather than all the same. Maybe there's an extra <form...> or </form> tag somewhere within the form.

If you want to see what the form submits, you can use the Data Dump. If that doesn't help, or if what you are dealing with is not a data-submission issue, then the tool in this article may help.

The Form Debugging Assistant is a tool designed to present all the form data that may be relevant in your quest to find a mistake. The idea is to present only what may be useful. It eliminates distractions like HTML and JavaScript code.

What you see with Form Debugging Assistant is the form details. It does not attempt to find mistakes. Its purpose is to present an uncluttered view of what your form is constructed with.

Tap the link below this paragraph. Form Debugging Assistant will present what it finds within the test form (including any hidden fields).

Link: Form Debugging Assistant

Using Form Debugging Assistant With Your Form

There are four pieces to be aware of.

1. Your form.

   That would be the form you're having trouble with.

2. The JavaScript.

   The JavaScript is a function that will scan your form and obtain information about it. Then it will post that information in a div you provide.

3. The div you provide.

   You provide a blank div for the JavaScript function to post its information into.

4. A link.

   You create a link that calls the JavaScript function. The link tells the function the ID of your form and the ID of the div where the JavaScript function is to post information into.

That's it. The following is a broader view, intended to give you everything you need to use the system.

To use Form Debugging Assistant, the following JavaScript needs to be available to the page with the form. It may be pulled in from an external file, or it may be pasted directly into the web page source code.

<script type="text/javascript">
// October 21, 2025
// Will Bontrager Software LLC
// https://www.willmaster.com/
function FormDebuggingAssistant(fm,dv)
{
   var fields = false;
   var div = document.getElementById(dv);
   var frm = document.getElementById(fm);
   div.innerHTML = "";
   fields = Array.from(frm.elements);
   for( var i=0; i<fields.length; i++ )
   {
      var ta = Array();
      ta.push("Field Type: "+fields[i].type);
      ta.push("Name: "+fields[i].name);
      ta.push("ID: "+fields[i].id);
      if( fields[i].id.length )
      {
         ta.push("Value: "+(fields[i].type.match(/^select/i)?"(see Options)":fields[i].value));
         switch(fields[i].type)
         {
            case "checkbox" :
            case "radio"    :
               if(fields[i].id)
               {
                  ta.push("Checked? "+(document.getElementById(fields[i].id).checked?"Yes":"No"));
               }
               break;
            case "select-one" :
            case "select-multiple" :
               if(fields[i].id)
               {
                  ta.push("Options:");
                  for(var k=0; k<fields[i].options.length; k++)
                  {
                     ta.push("&nbsp;&nbsp;&nbsp;"+fields[i].options[k].value+" - "+(fields[i].options[k].selected?"Selected":"Unselected"));
                  }
                  ta.push("how many options: " + fields[i].options.length);
               }
               break;
         }
      }
      else
      {
         ta.push("Unable to continue processing this field without an id value.");
      }
      div.innerHTML += "<div style='border:1px solid black; padding:.5em; border-radius:.5em; margin:1em;'>" + ta.join("\n<br>") + "</div>";
   }
}
</script>

When the above FormDebuggingAssistant function is available to your web page, it is good to go. No customizations are required.

In addition to the above JavaScript function being available on your page, there are two other requirements.

1. Your form must have an id value.
2. You must have a div with an id value that Form Debugging Assistant can use for displaying its output.

I'll paste the source code of the entire example further below. But first, let me mention you use Form Debugging Assistant with a link. Here is an example:

<a href="javascript:FormDebuggingAssistant('FORM-ID','DIV-ID')">Link Text</a>

Customizations to the above example:

1. Replace FORM-ID with the id value of your form.
2. Replace DIV-ID with the id value of the div for the output.

Publish the link, and you are good to go.

For completion, below is the source code of the entire example. It contains the test form, the div to display the details, the link, and the JavaScript function. To see how it works and to tweak it, paste the entire thing into a test web page.

<form id="for-testing" action="javascript:alert('not live'); return false;" style="border:3px solid #ccc; padding:0 1em; border-radius:1em;"> 
<h1>A Test Form</h1>
<p>
<input id="Form-Debugging-Assistant" type="hidden" name="Form_Debugging_Assistant" value="Form for testing the Form Debugging Assistant">
</p>
<p>
Your name: <input id="person-name" type="text" name="name_of_person" value="">
</p>
<p>
Your birth date: <input id="birth-date" type="date" name="birthdate" value="2026-12-01">
</p>
<p>
Check if you like blue. <label style="white-space:nowrap;"><input id="color-blue" type="checkbox" name="blue_color" value="blue">Blue</label>
</p>
<p>
Choose from red or green. 
<nobr><label><input id="choose-a-color-red" type="radio" name="colorchoice" value="red" checked="checked">Red</label> 
<label><input id="choose-a-color-green" type="radio" name="colorchoice" value="green">Green</label></nobr>
</p>
<p>
File to upload. <input id="file-upload-field" type="file" name="file">
</p>
<p>
Select a color. <select id="select-1-color" name="selected_color">
<option>Gray</option>
<option>Yellow</option>
<option>Green</option>
<option>Olive</option>
</select>
</p>
<p>
Select one or more colors. <select id="select-multi-colors" multiple="" size="3" name="multi_colors[]">
<option>Gray</option>
<option>Yellow</option>
<option>Green</option>
<option>Olive</option>
</select>
</p>
<p>
Submit button (non&minus;working). <input id="submitter" type="submit" name="submitter" value="Submit Button">
</p>
<p>
Tap to play. <input id="button" type="button" name="button" value="Form Button" onclick="alert('hi')">
</p>
</form>


<!-- The div where function FormDebuggingAssistant() will publish what it finds in the form. -->
<div id="put-here" style="border:3px solid #ccc; border-radius:1em;">
<div style="margin:.5in 0; text-align:center; color:gray;">[form details will be here]</div>
</div>


<p>
<a href="javascript:FormDebuggingAssistant('for-testing','put-here')">Form Debugging Assistant</a>
</p>


<script type="text/javascript">
function FormDebuggingAssistant(fm,dv)
{
   var fields = false;
   var div = document.getElementById(dv);
   var frm = document.getElementById(fm);
   div.innerHTML = "";
   fields = Array.from(frm.elements);
   for( var i=0; i<fields.length; i++ )
   {
      var ta = Array();
      ta.push("Field Type: "+fields[i].type);
      ta.push("Name: "+fields[i].name);
      ta.push("ID: "+fields[i].id);
      if( fields[i].id.length )
      {
         ta.push("Value: "+(fields[i].type.match(/^select/i)?"(see Options)":fields[i].value));
         switch(fields[i].type)
         {
            case "checkbox" :
            case "radio"    :
               if(fields[i].id)
               {
                  ta.push("Checked? "+(document.getElementById(fields[i].id).checked?"Yes":"No"));
               }
               break;
            case "select-one" :
            case "select-multiple" :
               if(fields[i].id)
               {
                  ta.push("Options:");
                  for(var k=0; k<fields[i].options.length; k++)
                  {
                     ta.push("&nbsp;&nbsp;&nbsp;"+fields[i].options[k].value+" - "+(fields[i].options[k].selected?"Selected":"Unselected"));
                  }
                  ta.push("how many options: " + fields[i].options.length);
               }
               break;
         }
      }
      else
      {
         ta.push("Unable to continue processing this field without an <code>id</code> value.");
      }
      div.innerHTML += "<div style='border:1px solid black; padding:.5em; border-radius:.5em; margin:1em;'>" + ta.join("\n<br>") + "</div>";
   }
}
</script>

Form Debugging Assistant is a handy tool. If you keep the JavaScript in a file on your server, it can be pulled into a web page whenever you need to debug a form.

(This content first appeared in Possibilities newsletter.)

Will Bontrager