+ Start a Discussion
anup-prakashanup-prakash 

Javascript isue

The javascript is not working no matter what.. I have been quite troubled now...

 

<apex:page controller="UploadFileController" >

<apex:form id="formID" >
       <apex:pageBlock id="pageBlockID">
           <apex:pageBlockButtons >
               <apex:commandButton action="{!saveAttachment}" value="Upload File"/>
           </apex:pageBlockButtons>
           <apex:pageBlockSection columns="1" id="pageBlockSectionID" >
               <apex:pageBlockSectionItem >
                   <apex:outputLabel value="Division" />
                   <apex:selectList multiselect="false" required="true" size="1" value="{!divisionID}">
                       <apex:selectOptions value="{!divisionList}"></apex:selectOptions>
                   </apex:selectList>
               </apex:pageBlockSectionItem>
               <apex:pageblocksectionItem >
                    <apex:outputlabel value="Fiscal Year" />
                    <apex:inputText value="{!fiscalYearName}" id="fiscID" onchange="checkExtension();"/>
               </apex:pageblocksectionItem>
               <apex:pageBlockSectionItem >
                   <apex:outputlabel value="File" />
                   <apex:inputFile accept="pdf,jpg" fileName="{!attachmentFile.name}" value="{!attachmentFile.body}" id="attachmentFileID" onchange="checkExtension();" />
               </apex:pageBlockSectionItem>
               
               <apex:pageBlockSectionItem >
                   <apex:outputLabel value="To Account"/>
                   <apex:selectList value="{!accountID}" multiselect="false" size="1">
                       <apex:selectOptions value="{!accountList}" />
                   </apex:selectList>
               </apex:pageBlockSectionItem>
          </apex:pageBlockSection>
       </apex:pageBlock>
   </apex:form>
<script>
    function checkExtension(){
        var x = document.getElementById('{!$Component.formID.pageBlockID.pageBlockSectionID.attachmentFileID}').value;
        alert(x);
    }
</script>
</apex:page>

Best Answer chosen by Admin (Salesforce Developers) 
sfdcfoxsfdcfox

I found it.

 

The problem is that apex:inputFile's ID attribute points to the span that wraps the span that wraps the actual input tag (two layers of indirection). The easiest way to get at the value indirectly, then, is to use code similar to the following:

 

function checkExtension() {
  var x = document.querySelector('input[type="file"][name*="'{!$Component.formID.pageBlockID.pageBlockSectionID.attachmentFileID}"]')
  alert(x.value)
}

However, you could make your life easy by just passing the input field directly into the function:

 

function checkExtension(element) {
  alert(element.value)
}

You just need to change your onchange attribute:

 

onchange="checkExtension(this)"

Okay. That horse is dead. I'm moving on.

All Answers

sfdcfoxsfdcfox

I found it.

 

The problem is that apex:inputFile's ID attribute points to the span that wraps the span that wraps the actual input tag (two layers of indirection). The easiest way to get at the value indirectly, then, is to use code similar to the following:

 

function checkExtension() {
  var x = document.querySelector('input[type="file"][name*="'{!$Component.formID.pageBlockID.pageBlockSectionID.attachmentFileID}"]')
  alert(x.value)
}

However, you could make your life easy by just passing the input field directly into the function:

 

function checkExtension(element) {
  alert(element.value)
}

You just need to change your onchange attribute:

 

onchange="checkExtension(this)"

Okay. That horse is dead. I'm moving on.

This was selected as the best answer
anup-prakashanup-prakash
That was Just awesome. Thanks So much.