function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Automate ProcessAutomate Process 

Use value entered in inputfield in javascript

Hello All,

I am new to visualforce programming and here I am stuck with something that looked pretty simple to me earlier(Well its not now obviously).
I am trying to use the inputs entered in two inputfields in my visualforce page, do some string operations(trim)/Concatenate, and use the resulting string as a value in a third inputbox. The auto-population of the field will happen when the third textbox gets the focus.

I thought this would be pretty simple to capture the values using javascript but unfortunatey, could not get away with a solution.

Appreciate any pointers towards a solution.

Regards,
Sudip
ShivaKrishna(Freelancer)ShivaKrishna(Freelancer)
Hi Sudip,

either you can use "{!bindvariable which is pointing to input Field}"
 eg : 
<apex:page>
<apex:form>
<apex:inputText value="{!field1}" id="fl1"/>
<apex:inputText value="{!field2}" id="fl2"/>
</apex:form>
<script>
function yourfunction(){
// option1 :
document.getElementById("{!$component.fl2}").value = document.getElementById("{!$component.fl1}").value;

//option2:
document.getElementById("{!$component.fl2}").value = "{!field1}";

}
</script>
</apex:page>

let me know, if it helps you or need any help :)
shiva.sfdc.backup@gmail.com
 
Naganjaneyulu KommanaNaganjaneyulu Kommana
Hi Sudip,

<apex:page id="page" standardController="Account">

<style type="text\css">
.myButton {
background:red;
border-left: 0px;
border-top: 0px;
border-bottom: 0px;
border-right: 0px;
width: 180px;
height: 22px;
}

</style>
 
 <div id="div1" align="center">
<apex:form id="form">
          <apex:inputtext id="text1" value="{!Account.Name}" style="background:#00ffcc;width:180px;color:tile;font-size:12px;text-decoration:underline"/><br/>
               <p>             </p>
          <apex:inputtext id="text2" value="{!Account.Type}" style="background:#00ffcc;width:180px;color:tile;text-decoration:underline"/><br/>
          <p>             </p>
          <apex:commandButton value="Call function" onclick="clicked()" style="color:blue;background:tile;width:180px"  reRender="dynamic"/>
</apex:form>  
</div>    

<apex:outputPanel id="dynamic">

</apex:outputPanel>

<script>
      function clicked(){
      var tst = document.getElementById('page:form:text1').value; 
     document.getElementById('page:form:text2').value=tst;          
          }          
 </script>

</apex:page>
I hope this helps.

Regards,
Anji
 
Rahul KhilwaniRahul Khilwani
Hi,

You can try the below code to call a javascript method on foucs of the inputtext box and capture the values from two other inputText box:
 
<apex:page id="page">
    <apex:form id="myform">
        <apex:inputText value="{!inputFieldOne}" id="ip1"/>
        <apex:inputText value="{!inputFieldTwo}" id="ip2"/>
        <apex:inputText value="{inputFieldThree}" onfocus="jsProcessVal();" id="ip3"/>
    </apex:form>
    <script>
        function jsProcessVal(){
            var valOne = document.getElementById('{!$component.id1}').value;
            var valTwo = document.getElementById('{!$component.id2}').value;
            //Write your javascript code
            //
            
            document.getElementById('{!$component.id3}').value = '<Final processed value>';
        }
    </script>
</apex:page>