Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
DJ 367DJ 367 

after click command button,VF page gets refreshed which I dont want

Hello All,
whenever I click command button it works properly however it refreshed immediately which I want to prevent. 
<apex:page id="pgId" controller="calculateBMICon">
    <script language="JavaScript">
        function calculateBmi() {
             var weight =   document.getElementById('pgId:bmiForm:pb:pbs:we').value;
               
            var height =document.getElementById('pgId:bmiForm:pb:pbs:he').value;

            if(weight > 0 && height > 0){   
                var finalBmi = weight/(height/100*height/100)
                document.getElementById('pgId:bmiForm:pb:pbs1:bm').innerHTML =   finalBmi;
              
                if(finalBmi < 18.5){
                    document.getElementById('pgId:bmiForm:pb:pbs1:bw').innerHTML = "UNDER-WEIGHT"
                }
                if(finalBmi > 18.5 && finalBmi < 25){
                    document.getElementById('pgId:bmiForm:pb:pbs1:bw').innerHTML = "NORMAL-WEIGHT"
                }
                if(finalBmi > 25){
                    document.getElementById('pgId:bmiForm:pb:pbs1:bw').innerHTML = "OVER-WEIGHT"
                }
            }
            else{
                alert("Please Fill everything correctly")
            }
        }
    </script>

    <apex:form id="bmiForm">
        <apex:pageblock mode="mainDetail" id="pb">
            <apex:pageBlockSection columns="1" id="pbs">
                <apex:inputText label="{!$objectType.Volunteer__c.fields.Name.label}" />
                <apex:inputText label="{!$objectType.Volunteer__c.fields.Height_in_CMs__c.label}" id="he"/>
                <apex:inputText label="{!$objectType.Volunteer__c.fields.Weight_in_KGs__c.label}" id="we"/>
            </apex:pageBlockSection>
            <apex:pageblockSection id="pbs1">
                <apex:outputLabel id="bm" value=""/>
                 <apex:outputLabel id="bw" value=""/>
            </apex:pageblockSection>
            <apex:pageBlockButtons >
                <apex:commandButton value="Calculate BMI" onclick="calculateBmi()"/>
            </apex:pageBlockButtons>
        </apex:pageblock>

    </apex:form>
         
</apex:page>



Thanks 
Best Answer chosen by DJ 367
PINKY REGHUPINKY REGHU
Hi,

   You need to add return false; to your onclick function. Without that the page will reload after clicking.
Another solution is to add an rerender="none" tparameter to the command button.
So it will look like this:
<apex:commandButton value="Do Something" onclick="abc(); return false;" />
or like this:
<apex:commandButton value="Do Something" onclick="abc(); reRender="none" />

Please let me know if that helps you.
If it helps don't forget to mark this as a best answer!!!
 

All Answers

PINKY REGHUPINKY REGHU
Hi,

   You need to add return false; to your onclick function. Without that the page will reload after clicking.
Another solution is to add an rerender="none" tparameter to the command button.
So it will look like this:
<apex:commandButton value="Do Something" onclick="abc(); return false;" />
or like this:
<apex:commandButton value="Do Something" onclick="abc(); reRender="none" />

Please let me know if that helps you.
If it helps don't forget to mark this as a best answer!!!
 
This was selected as the best answer
Asitha_RajuAsitha_Raju
Hi,
Try the code below: 
<apex:page id="pgId" controller="calculateBMICon">
    <script language="JavaScript">
        function calculateBmi() {
             var weight =   document.getElementById('pgId:bmiForm:pb:pbs:we').value;
               
            var height =document.getElementById('pgId:bmiForm:pb:pbs:he').value;

            if(weight > 0 && height > 0){   
                var finalBmi = weight/(height/100*height/100)
                document.getElementById('pgId:bmiForm:pb:pbs1:bm').innerHTML =   finalBmi;
              
                if(finalBmi < 18.5){
                    document.getElementById('pgId:bmiForm:pb:pbs1:bw').innerHTML = "UNDER-WEIGHT"
                }
                if(finalBmi > 18.5 && finalBmi < 25){
                    document.getElementById('pgId:bmiForm:pb:pbs1:bw').innerHTML = "NORMAL-WEIGHT"
                }
                if(finalBmi > 25){
                    document.getElementById('pgId:bmiForm:pb:pbs1:bw').innerHTML = "OVER-WEIGHT"
                }
            }
            else{
                alert("Please Fill everything correctly")
            }
        }
    </script>

    <apex:form id="bmiForm">
        <apex:pageblock mode="mainDetail" id="pb">
            <apex:pageBlockSection columns="1" id="pbs">
                <apex:inputText label="{!$objectType.Volunteer__c.fields.Name.label}" />
                <apex:inputText label="{!$objectType.Volunteer__c.fields.Height_in_CMs__c.label}" id="he"/>
                <apex:inputText label="{!$objectType.Volunteer__c.fields.Weight_in_KGs__c.label}" id="we"/>
            </apex:pageBlockSection>
            <apex:pageblockSection id="pbs1">
                <apex:outputLabel id="bm" value=""/>
                 <apex:outputLabel id="bw" value=""/>
            </apex:pageblockSection>
            <apex:pageBlockButtons >
                <apex:commandButton rerender="none" value="Calculate BMI" onclick="calculateBmi()"/>
            </apex:pageBlockButtons>
        </apex:pageblock>

    </apex:form>
         
</apex:page>

Thanks,
Asitha​
DJ 367DJ 367
Thanks for your replies.