+ Start a Discussion
Subhasini Bhosal 9Subhasini Bhosal 9 

How to input two numbers in text box and show the value in third textbox in visualforce using Javascript

User-added image
here when I input unit price and quantity total price should populate automatically.

Thanks in advance!!
G10G10
Hi,
 
You can use custom contoller to populate it automatically, use javascript event handler (on Tabout) to pass your field value to controlller and at the same time reRender the Total Price Field. 

If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.
Nikhil Sharma 17Nikhil Sharma 17
Hi,

You can simply do this with jQuery each function. Just pass the id to the fields and call a jQuery each function and get the values from the fields and add the fields value in the third field.

 
Subhasini Bhosal 9Subhasini Bhosal 9
User-added image

just for understanding a created a vf page as given above. So once I select City, Area is auto populated. I input a value tto code. So Total field should get calculated on change. However it is not calculated. in console it is showing that document.getElementById("--Area ID--") is not defined`l

Please refer the VF page and Controller class below:

-----------------------------------
<apex:page controller="dynamicpicklist1" sidebar="false" >
<apex:form >
<script>
function myFunction(){

debugger;

var a= parseInt(document.getElementById('newvalue').value);
var b=parseInt(document.getElementById("it").value);
var c= a*b;
document.getElementById("total").value=c;
}

</script>
<apex:sectionHeader title="Dynamic Picklist" subtitle="Reusable code"/>
<apex:pageblock >
<apex:pageBlockSection title="Dynamic picklist" columns="1">
      <apex:pageblocksectionItem >
          <apex:outputlabel value="City" for="values" />
          <apex:selectList value="{!city}" size="1" id="values">
              <apex:actionSupport event="onchange" reRender="newvalue" action="{!saverec}"/>
              <apex:selectOptions value="{!citynames}"/>
          </apex:selectList>
      </apex:pageblocksectionItem>      
        <apex:pageblocksectionItem >
          <apex:outputlabel value="Area" for="newvalue" />
          <apex:selectList value="{!area}" size="1" id="newvalue">
              <apex:selectOptions value="{!areas}"/>
          </apex:selectList>         
           </apex:pageblocksectionItem>
           <apex:pageBlockSection >
      <apex:inputText label="Code" id="it" onchange="myFunction()" />
      </apex:pageBlockSection>       
      <apex:pageBlockSection >
      <apex:inputText label="Total" id="total" />
      </apex:pageBlockSection>                                 
         
  </apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>

-------------------
controller
---------------------

public class dynamicpicklist1
{
public String city{get; set;}
public String area{get; set;}
public  List<SelectOption> areas{get; set;}

public dynamicpicklist1(){
    areas = new List<SelectOption>();
    areas .add(new SelectOption('--None--','--None--'));
    
}
public List<SelectOption> getcitynames()
{
  List<SelectOption> options = new List<SelectOption>();
  options.add(new SelectOption('--None--','--None--'));
  options.add(new SelectOption('Kolkata','Kolkata'));
  options.add(new SelectOption('Bangalore','Bangalore'));
  return options;
}
public String newpicklistvalue{get; set;}

public void saverec()
{
  areas = new List<SelectOption>();
  if(city == 'Kolkata'){
      areas.add(new SelectOption('1','1'));
      areas.add(new SelectOption('2','2'));
      areas.add(new SelectOption('3','3'));
  }
  else if(city == 'Bangalore'){
      areas.add(new SelectOption('4','4'));
      areas.add(new SelectOption('5','5'));
      areas.add(new SelectOption('6','6'));
  }
  else{
      areas .add(new SelectOption('--None--','--None--'));
  }
}

}
-----------------------
Please let me know if you can find a solution

 
G10G10
Hi,

You are not following a proper DOM Structure , hence getting an warning in console.
As Best practice ,please assign ID to each component in visualForce Page.
Here is the working code,

VF page :
<apex:page controller="dynamicpicklist1" sidebar="false" id ='mypage'>
<apex:form id="myForm">
<script>
function myFunction(){

debugger;

var a= parseInt(document.getElementById('mypage:myForm:myPageBlock:myPageBlockSection1:sectionItem2:newvalue').value);

var b=parseInt(document.getElementById("mypage:myForm:myPageBlock:myPageBlockSection1:myPageBlockSection2:it").value);

var c= a*b;

document.getElementById("mypage:myForm:myPageBlock:myPageBlockSection1:myPageBlockSection3:total").value=c;
}

</script>
<apex:sectionHeader title="Dynamic Picklist" subtitle="Reusable code" id="sectionHeader"/>
<apex:pageblock id="myPageBlock">
<apex:pageBlockSection title="Dynamic picklist" columns="1" id="myPageBlockSection1">
      <apex:pageblocksectionItem id="sectionItem1">
          <apex:outputlabel value="City" for="values" />
          <apex:selectList value="{!city}" size="1" id="values">
              <apex:actionSupport event="onchange" reRender="newvalue" action="{!saverec}"/>
              <apex:selectOptions value="{!citynames}"/>
          </apex:selectList>
      </apex:pageblocksectionItem>      
        <apex:pageblocksectionItem id="sectionItem2">
          <apex:outputlabel value="Area" for="newvalue" />
          <apex:selectList value="{!area}" size="1" id="newvalue">
              <apex:selectOptions value="{!areas}"/>
          </apex:selectList>         
           </apex:pageblocksectionItem>
           <apex:pageBlockSection id="myPageBlockSection2">
      <apex:inputText label="Code" id="it" onchange="myFunction()" />
      </apex:pageBlockSection>       
      <apex:pageBlockSection id="myPageBlockSection3">
      <apex:inputText label="Total" id="total" />
      </apex:pageBlockSection>                                 
         
  </apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>

Apex class : 

Same.

Hope this is helpful to you :)
happy coding.

Regards,
Jiten.
Subhasini Bhosal 6Subhasini Bhosal 6
Hey,

Thanks!! its working :)
G10G10
Hey Subhasini,

Thanks for the update.
Please mark it as Solved, so that other can have benefit from the same.

Regards,
Jiten.