Pass javascript variable to apex variable , error : cannot set value of null

Question

Apex controller :

public class NameController {
    public String acname {get;set;} 
    private final Account acct;
    public NameController(ApexPages.StandardController stdController) {
        this.acct = (Account)stdController.getRecord();
        acname = 'temp';
    }
}

Visualforce page:

<apex:pageBlock >
    <apex:pageBlockSection title="Account Information" columns="1" showHeader="false" collapsible="true" >

        <apex:form >
            <apex:inputHidden id="hdnField" value="{!acname}" />

        </apex:form>                    
        </apex:pageBlockSection>
</apex:pageBlock>

<script>
    var v = encodeURIComponent("{!Account.Name}");
     console.debug(document.getElementById("{!$Component.hdnField}"));
    var x = document.getElementById("{!$Component.hdnField}");
    x.value = v; // I am getting error here
</script>

Answer 1

Directly addressing the problem in the page as posted, the $Component documentation rather vaguely says:

If your component is nested, you might need to use a more complete component path specifier.

You can check what HTML Visualforce generates by using your browser's "View Source" on the resulting page to check that the $Component reference is "complete" and so generates a valid Id that is present in the HTML.

For your case adding the full path like this:

<apex:page standardController="Account" id="p">
<apex:pageBlock id="pb">
    <apex:pageBlockSection title="Account Information" columns="1" showHeader="false" collapsible="true" id="pbs">

        <apex:form id="f">
            <apex:inputHidden id="hdnField" value="{!Account.Name}" />

        </apex:form>                    
        </apex:pageBlockSection>
</apex:pageBlock>

<script>
    var v = encodeURIComponent("{!Account.Name}");
     console.debug(document.getElementById("{!$Component.p.pb.pbs.f.hdnField}"));
    var x = document.getElementById("{!$Component.p.pb.pbs.f.hdnField}");
    x.value = v; // I am getting error here
</script>
</apex:page>

works with this result visible via "View Source":

var x = document.getElementById("p:pb:pbs:f:hdnField");

Answer 2

You might have better luck using the ends with selector:

document.querySelector("[id$='hdnField']").value

Or better yet, use style classes:

<apex:inputHidden styleClass="hdnField" ... />

<script>
      var inputValue = document.getElementsByClassName('hdnField')[0].value;
 </script>

---

As for why what you have doesn't work, you have to reference all the parent tags as well. If they don't have id attributes specified, it's more of a pain and not worth the trouble in my opinion, hence the above recommendations. Have a look at the Visualforce Developer Guide (emphasis mine):

Using $Component to Reference Components from JavaScript

Use the $Component global variable to simplify referencing the DOM ID that is generated for a Visualforce component, and reduce some of the dependency on the overall page structure.

Every Visualforce tag has an id attribute. The id attribute for a tag can be used by another tag to bind the two tags together. For example, the <apex:outputLabel> tag’s for attribute can be used with the <apex:inputField> tag’s id attribute. The reRender and status attributes on , <apex:actionSupport>, and other action-oriented components also use the value of the id attribute from other components.

In addition to being used to bind Visualforce components together, this ID is used to form part of the document object model (DOM) ID for the component when the page is rendered.

To refer to a Visualforce component in JavaScript or another Web-enabled language, you must specify a value for the id attribute for that component. A DOM ID is constructed from a combination of the id attribute of the component and the id attributes of all components that contain the element.

See also:

Best Practices for Accessing Component IDs

To refer to a Visualforce component in JavaScript or another Web-enabled language, you must specify a value for the id attribute for that component. A DOM ID is constructed from a combination of the id attribute of the component and the id attributes of all components that contain the element.

Use the $Component global variable to simplify referencing the DOM ID that is generated for a Visualforce component, and reduce some of the dependency on the overall page structure. To reference a specific Visualforce component’s DOM ID, add a component path specifier to $Component, using dot notation to separate each level in the component hierarchy of the page. For example, use $Component.itemId to reference a component at the same level in the Visualforce component hierarchy, or use $Component.grandparentId.parentId.itemId to specify a more complete component path.

A $Component path specifier is matched against the component hierarchy: At the current level of the component hierarchy where $Component is used; and then At each successive higher level in the component hierarchy, until a match is found, or the top-level of the component hierarchy is reached.