You need to sign in to do that
Don't have an account?
Subhasini Bhosal 9
here when I input unit price and quantity total price should populate automatically.
Thanks in advance!!
How to input two numbers in text box and show the value in third textbox in visualforce using Javascript
here when I input unit price and quantity total price should populate automatically.
Thanks in advance!!
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.
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
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.
Thanks!! its working :)
Thanks for the update.
Please mark it as Solved, so that other can have benefit from the same.
Regards,
Jiten.