Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
RustyboyRustyboy 

getElementById returning null using onmouseout

Hi,

I am trying to call a simple js function to default a field value in VF from another field, but the js keeps telling me that the field I am trying to get is null. I have tried various ways to make this work; the current code is below.

The message I get is: TypeError: userNameFld is null​ 
</apex:form>
 <apex:pageBlock rendered="{!validPermissions}" mode="edit">

  <apex:pageBlockSection title="Create a New User" collapsible="false" columns="1">
                
     <apex:pageBlockSectionItem helptext="The User's email address" 
           rendered="{!NOT(fromEditPerson)}">          
        <apex:outputLabel value="Email Address"/>	
        <apex:inputField id="newEmailFld" value="{!newUser.Email}" 
  	            		onmouseout="defaultUsername();"
  	            		style="width: 250px !important;" required="true" />
      </apex:pageBlockSectionItem>

      <apex:pageBlockSectionItem helptext="The the user ID that the user will log in with">          
        <apex:outputLabel value="User Name"/>	
        <apex:inputField id="userNameFld" value="{!newUser.Username}" style="width: 250px !important;" required="true" />
      </apex:pageBlockSectionItem>
               							
  </apex:pageBlockSection>
               
 </apex:pageBlock>
</apex:form>

<script type="text/javascript">
  function defaultUsername() {

        	var userNameFld = document.getElementById("userNameFld");
        	var newEmailFLD = document.getElementById("newEmailFld");

        	if (userNameFld.value === null) {
        		userNameFld.value = newEmailFLD.Value;
       		}
        }

</Script>

Any ideas?

Thanks
 
Best Answer chosen by Rustyboy
Alex SelwynAlex Selwyn
My bad! even in $Component you need use all the nested ids. Provide an id for all the parent and use as $Component.Parent1.Parent2.Parent3.Id

Here is component reference.
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_variables_global_component.htm

And on the javascript '=== null' is for object. You need use (userNameFld === null)  or (userNameFld.value == '')
          

All Answers

Alex SelwynAlex Selwyn
When VF renders, the id of the elements are prepended with parent element ids. Either you have to provide a Id for all the parent element and refer it as document.getElementById("parent1:parent2:userNameFld") OR the simpler approach below.

User $Component reference

document.getElementById('{!$Component.userNameFld}')

Use chrome's developer tools to see the DOM structures.
RustyboyRustyboy
Thanks Alex, I couldn't get the Component Reference to work as per your post. In Chrome I got:

Uncaught SyntaxError: Invalid or unexpected token
Alex SelwynAlex Selwyn
My bad! even in $Component you need use all the nested ids. Provide an id for all the parent and use as $Component.Parent1.Parent2.Parent3.Id

Here is component reference.
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_variables_global_component.htm

And on the javascript '=== null' is for object. You need use (userNameFld === null)  or (userNameFld.value == '')
          
This was selected as the best answer
RustyboyRustyboy
I finally got this to work, but it's not straight forward...
RustyboyRustyboy
Thanks Alex - that's how I got it to work.

Although I have to say it seems to defeat the object of getElementById...