cfform Creates javascript Variables for HTML Elements

This post is about JavaScript and ColdFusion. Few days ago, I caught an issue in HTML form post data.

I received [object HTMLInputElement] as form HTML form data. Later I figured out that when my JavaScript variable propertyID is assigned with correct numeric value, then there is no problem. I tried to find where I declared this JavaScript variable. 

I tried to search by finding "var propertyID", but it wasn’t declared in page. Also, the page was having 2-3 JavaScript include files. I checked them tool but it wasn’t declared anywhere. So I considered that it was directly assinged by a value, and the variable becomes global. Now I have to find where it is initially assigned. Trust me this is a challenging task, I don’t know if firebug has capability of watching and start debugging JavaScript from first time variable usage, If someone knows, he can inform me by comment. When I google it, I only find one thread [here and see the first comment] and funny thing is,google always giving me links for "How to check if JavaScript variable is defined or not"!!!

Anyway, later I found when I write propertyID in console, it gave me hidden HTML element. I used this element in cfform. I was having two forms on same page, and it was returning an array of two hidden HTML element. I got my solution by declaring propertyID variable in JavaScript, but eventually I explored that cfform creates JavaScript global variable which is pointing to an element.

Here is a sample code for testing your ColdFusion page. Run the page in your ColdFusion server, one JavaScript console and type propertyID.

Conclusion: Please follow the best practices. Declare the variable before you use it.