getElementById Returns Null in Apex Form on Visualforce Page

Question

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>
            </a>
        </div>
    </div>
    <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">
                            <label>Platform</label>
                            <apex:inputField value="{!thing.Custom_Obj1__c}" id="overr_plat" styleClass="form-control input-platform" />
                        </div>
                        <div class="form-group col-xs-6">
                            <label>Product</label>
                            <apex:selectList value="{!thing.Custom_Obj2__c}" multiselect="false" size="1" id="overr_prod" styleClass="form-control input-product">
                                <apex:selectOptions value="{!productList}" />
                            </apex:selectList>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-xs-6">
                            <label>Client</label>
                            <apex:inputField value="{!thing.Custom_Obj3__c}" id="overr_client" styleClass="form-control input-client" />
                        </div>
                        <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>
                        </div>
                    </div>
                </apex:form>
            </apex:pageBlock>
        </div>
    </div>
</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>

<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
    }
</script>

</apex:page>

Any insight is greatly appreciated.

Answer 1

You do not include the page's ID:

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

Answer 2

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.

i.e.:

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