+ Start a Discussion
Pratik PawarPratik Pawar 

how to get inputField Value into javascript variable?

Hi,

I am a Trainee in VF development. Stucked in between one assignement. Please suggest me solution to fulfill below requirement. 

Requriment: User should be able to select an Account, based on the selected Account, show Account’s Name, Industry and Type in new section.
 
<apex:page controller="AccountDetails">

<script type="text/javascript">
    function getRemoteAccount(){
        alert(document.getElementById("form1.accName"));//Unable to access selected value
    }

</script>
 <apex:form id="form1">
 <apex:pageblock >
     <apex:pageblockSection >
         <apex:inputField value="{!acc.AccountId}" id="accName" onchange="getRemoteAccount()"/>
     </apex:pageblockSection>
     <apex:pageBlockSection >
     <span id="span1" />
     </apex:pageBlockSection>
 </apex:pageblock>
 </apex:form>
</apex:page>
 
/************Controller*********************/

public class AccountDetails {

    public contact acc { get; set; }
}

 
Best Answer chosen by Pratik Pawar
HemantJain0206HemantJain0206
The Id should be referenced using $Component, So in your case the Id would be reflect like this.

document.getElementById('{!$Component.form1.accName}');

Also try giving id value to pageblock and pageblocksection as well , so that exact path can be identified.

Like: document.getElementById('{!$Component.form1.pageblockId.pageblockSectionId.accName}');

Try to inspect the input field and fetch the exact path, if required.

All Answers

HemantJain0206HemantJain0206
The Id should be referenced using $Component, So in your case the Id would be reflect like this.

document.getElementById('{!$Component.form1.accName}');

Also try giving id value to pageblock and pageblocksection as well , so that exact path can be identified.

Like: document.getElementById('{!$Component.form1.pageblockId.pageblockSectionId.accName}');

Try to inspect the input field and fetch the exact path, if required.
This was selected as the best answer
Pratik PawarPratik Pawar
@Hemant Thank you very much.
Michael CasianoMichael Casiano

Thanks  @HemantJain0206

Your suggestion was a big help on our page.. 2 thumbs up

pan li 2pan li 2
this is my code ,but i can not get any result,always show null.Do you know why?
<apex:page controller="TestController">
    <apex:includeScript value="{! $Resource.jquery }"/>
    <script type="text/javascript">
    function getInputFieldValue() {
        var proName = document.getElementById('{!$Component.form1.pb.pbt.pro}');
        console.log("proName "+ proName);
    }
    </script>
    <apex:form id="form1">   
        <apex:pageBlock id="pb">
            <apex:pageBlockTable value="{!attach}" var="a" id="pbt">
                <apex:column headerValue="Project general">
                    <apex:inputField value="{!a.Project_general__c}" id="pro"/>
                </apex:column> 
                <apex:column headerValue="Project general">
                    <input type="Button" value="Attach" onclick="getInputFieldValue()"/>
                </apex:column> 
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>
priyanshu nema 2priyanshu nema 2
<apex:inputField value="{!acc.AccountId}" id="accName"onchange="getRemoteAccount()"/>

all the apex elements are kind of server side controls which will have some prefixes to their Ids when its rendered on the client side..
so your apex Input Text will have an Id something like this. j_id0:j_id1:accName

you can check this in your browser development tools.. just right click on the input text and do Inspect Element and you should see the Id..  you can then use the full Id in your javascript code