How can you solve getElementById Returns Null in Apex Form on Visualforce Page error effectively?

1.2K Asked by AnushriSingh in Salesforce , Asked on Apr 23, 2021

I'm attempting to make a form on a Visualforce page that will, when a button is clicked, grab the contents of a SelectList and 2 InputFields and then perform some actions with those values via a function in Javascript.

However, the contents of these fields are always returned as null by document.getElementById(). I have tried using both the '{!$Component.path.to.id}' and the 'path.to.id' approaches with no luck

For privacy reasons I've obfuscated/shortened some of the code below, but I hope it will suffice:

Visualforce Page:

Filters

Platform

Product

Client

<button type="button" class="btn btn-primary" onclick="override()" fdprocessedid="eeqbsm">Click Dat Button</button>

[removed][removed] [removed] function override(){ //grab the contents of our fields by using their unique IDs var override_plat = document.getElementById('page1.block1.form1.overr_plat'); //returns null var override_prod = document.getElementById('{!$Component.page1.block1.form1.overr_prod}'); //also returns null } [removed]

Any insight is greatly appreciated.

Answered by Carl Paige

You do not include the page's ID to solve getelementbyid returns null:

            var override_prod = document.getElementById('{!$Component.block1.form1.overr_prod}');

How can you solve getElementById Returns Null in Apex Form on Visualforce Page error effectively?

Your Answer