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 is 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:

<apex:page title="Widget" standardController="thing" standardStylesheets="false" id="page1">

<div class="container-fluid reposition">
    <div class="row">
        <div class="col-xs-12">
            <a href="#" class="pull-right header-element" id="showHideFilters">
                <small>Filters <span class="glyphicon glyphicon-chevron-down"></span></small>
    <div class="row">
        <div class="col-xs-12">
            <!-- Override Form -->
            <apex:pageBlock id="block1">
                <apex:form id="form1" styleClass="knowledge-filters collapse">
                    <div class="row">
                        <div class="form-group col-xs-6">
                            <apex:inputField value="{!thing.Custom_Obj1__c}" id="overr_plat" styleClass="form-control input-platform" />
                        <div class="form-group col-xs-6">
                            <apex:selectList value="{!thing.Custom_Obj2__c}" multiselect="false" size="1" id="overr_prod" styleClass="form-control input-product">
                                <apex:selectOptions value="{!productList}" />
                    <div class="row">
                        <div class="form-group col-xs-6">
                            <apex:inputField value="{!thing.Custom_Obj3__c}" id="overr_client" styleClass="form-control input-client" />
                        <div class="form-group col-xs-6">
                            <br />
                            <div style="text-align:center;"><button type="button" class="btn btn-primary" onclick="override()">Click Dat Button</button></div>

<apex:includeScript value="{!$Resource.JQueryJs}"/>
<apex:includeScript value="{!$Resource.HandlebarsJS_4_0_6}"/>
<script src="{!URLFOR($Resource.Bootstrap_3_3_7, 'js/bootstrap.min.js')}"></script>

    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


Any insight is greatly appreciated.

2 Answers 2


You do not include the page's ID:

    var override_prod = document.getElementById('{!$Component.block1.form1.overr_prod}');
  • I'm afraid this doesn't seem to work. I've tried using just block1.form1.overr_prod, and just form1.overr_prod, but it always returns as null.
    – Rudy
    May 9, 2018 at 17:50
  • @Rudy Curious. You might want to look at the source code of the page to see what it should look like. This is one reason why I typically do not use getElementById, but instead query by way of a custom CSS class or data attribute.
    – sfdcfox
    May 9, 2018 at 17:56
  • I'm starting to think it might have something to do with an external resource, because this exact code worked before, before I started using Bootstrap JS and CSS. I'm still trying to narrow down the exact cause of the issue, or find a workaround for it.
    – Rudy
    May 9, 2018 at 18:51

Hmm, I've found that if I add ".value" to the end of the variable assignment, the script works. However, if I move the script to a Static Resource, it no longer works.


var override_plat = document.getElementById('{!$Component.page1.block1.form1.overr_plat}').value; //works in <script> tags on VF page, but not in Static Resource

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .