Form Debug Helper

If you have made numerous large forms, you know how hard it can be to find a mistake that slipped through.

Two name attributes with the same value, for example. A hyphen in a name value that had been meant as an id value. A set of radio buttons with different names rather than all the same. Maybe there's an extra form tag somewhere on the page.

Those are a sampling of possibile bugs.

It requires a lot of detailed reading of code to find some of those elusive mistakes, especially with large forms.

If you've used a data dump to submit the form, and still were unable to find the problem, consider using the Form Debug Helper for a view of the elements.

The helper prints a list containing each form and its fields. The field's attributes name, id, type, and value, and its checked state, are listed when they are available.

That's all it does, list the forms and fields and field attributes found on the web page. It does not attempt to find bugs. It's purpose is to present an uncluttered view of what your form(s) are constructed with.

Form Debug Helper's output is intended to help you see where bugs or mistakes might be.

Here is the source code for Form Debug Helper.

<pre id="poss-js-poss_form-data" style="border:6px dashed #ccc; padding:9px; display:table;"></pre>
<script type="text/javascript">
let poss_OutputDiv = document.getElementById("poss-js-poss_form-data");
let poss_forms = document.getElementsByTagName("poss_form");
for( var poss_form=0; poss_form<poss_forms.length; poss_form++ )
{
   if(poss_form) { poss_OutputDiv.innerHTML += "\r\n\r\n\r\n"; }
   poss_OutputDiv.innerHTML += "<b style='font-size:125%;'>poss_form # " + (poss_form+1) + "</b>";
   poss_OutputDiv.innerHTML += "\r\nposs_form ID: " + poss_forms[poss_form].id ;
   poss_OutputDiv.innerHTML += "\r\nposs_form action: " + poss_forms[poss_form].action;
   for( var i=0; i<poss_forms[poss_form].length; i++ )
   {
      var type = poss_forms[poss_form][i].type;
      var ta = new Array();
      ta.push("ID: "+poss_forms[poss_form][i].id);
      ta.push("Type: "+type);
      ta.push("Name: "+poss_forms[poss_form][i].name);
      if( type=="select-multiple" ) { ta.push("First selected value: "+poss_forms[poss_form][i].value); }
      else { ta.push("Value: "+poss_forms[poss_form][i].value); }
      if(type=="checkbox" || type=="radio") { ta.push("Checked: "+(poss_forms[poss_form][i].checked?"Yes":"No")); }
      poss_OutputDiv.innerHTML += "\r\n\r\n" + ta.join("\r\n");
   }
}
</script>

Temporarily paste the above code into the end of the page, or at least somewhere below the last form. No customization required. Before going live with the page, remove the temporary code.

Form Debug Helper prints the data uncluttered. It is possible that you may see the glitch you are looking for with your first scan through the output.

The only code you need is the above source code.

To illustrate how it works, here are 2 forms and the output of the Form Debug Helper.

The Form Debug Helper tool lists every form field on a web page to help you debug the things. Use it when you need it.

To reiterate, temporarily paste the code into the end of a web page. When done debugging, remove the temporary code and you're good to go.

(This content first appeared in Possibilities newsletter.)

Will Bontrager