Apex Code Development You need to sign in to do that
Don't have an account?
Javascript in Visualforce
I need to create a javascript in my vf page where in if one of the values of my inputfield is 0 once I save it, it will alert a confirmation button message if I want to continue or not. My problem is I don't know how to call my apex:inputfield to the javascript function.
1.) My main concern is I want to know how I can call my apex:inputfield to the javascript function
2.) and also. How can I cancel an action once the javascript function is triggered. As you can see with my code below. I have two checkboxes that locks a column. Now I have a java script function where in if two checkboxes are checked it will throw an alert where in it will tell the user that only 1 checkbox should be clicked, it runs but it still continue to check the checkbox.
This is my code for educational purposes.
<apex:page Controller="editLineItemSPRCOMM" cache="false" tabstyle="Opportunity" action="{!initAfter}">
<style type="text/css">
input{width:75px;}
.workingText{
color: #D8000C;
background-color: #FFBABA;
font-style: italic;
font-family:"serif";
}
.bPageBlock .requiredInput .requiredBlock{
background-color: #FFF;
}
.butt1{
width:110px;
}
}
</style>
<apex:form >
<apex:pageBlock title="Line Item Calculator">
<apex:pageMessages id="pmsg"/>
<apex:pageBlockButtons >
<apex:commandButton styleClass="butt1" value="Save and Return" action="{!saveLineItems}"/>
<!-- <apex:commandButton value="Refresh" action="{!refreshLineItems}"/> -->
</apex:pageBlockButtons>
<apex:outputPanel styleClass="workingText">
<apex:actionStatus startText=" Processing... " stopText="" id="counterStatus"
onStart="document.body.style.cursor = 'wait';return true;"
onStop="document.body.style.cursor = 'default';return true;"/>
</apex:outputPanel>
<apex:outputText id="panel1" value="{!message}"/>
<!--Check box-->
<apex:actionFunction name="method1" status="counterStatus" rerender="table2,panel1,counterStatus,pmsg" />
Lock Rec End User Price<apex:inputCheckbox html-data-single="" value="{!readOnly}" id="cb1" onclick="Check()" onchange="check(method1)">
</apex:inputCheckbox>
<!--Check box-->
<!--Check box-->
<apex:actionFunction name="method2" status="counterStatus" rerender="table2,panel1,counterStatus,pmsg" />
Lock Dist SPR Disc %<apex:inputCheckbox html-data-single="" value="{!readOnlyB}" id="cb2" onclick="Check()" onchange="check(method1)">
</apex:inputCheckbox>
<!--Check box-->
<apex:pageBlockTable value="{!Objects}" var="myVar" id="table" rendered="{!!showEMEA}">
<apex:column headerValue="Product">{!myVar.product.Name}</apex:column>
<apex:column headerValue="Product Code">{!myVar.product.ProductCode}</apex:column>
<apex:column headerValue="Quantity">
<apex:inputField value="{!myVar.item.Quantity}">
<apex:actionSupport event="onchange" action="{!calculatePrice}" status="counterStatus" rerender="table,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
<apex:column headerValue="List Price">{!myVar.item.ListPrice}</apex:column>
<apex:column headerValue="Sales Discount (%)">
<apex:inputField value="{!myVar.item.Discount_Percent_Off__c}">
<apex:actionSupport event="onchange" action="{!calculatePrice}" status="counterStatus" rerender="table,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
<apex:column headerValue="Dealer Discount Price">
<apex:inputField value="{!myVar.item.Dealer_Discount_Price__c}">
<apex:actionSupport event="onchange" action="{!calculateDiscount}" status="counterStatus" rerender="table,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
<apex:column headerValue="SPR Discount">
<apex:inputField value="{!myVar.item.SPR_Discount__c}">
<apex:actionSupport event="onchange" action="{!calculatePrice}" status="counterStatus" rerender="table,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
<apex:column headerValue="SPR Price">
<apex:inputField value="{!myVar.item.SPR_Price__c}">
<apex:actionSupport event="onchange" action="{!calculateDiscountSPR}" status="counterStatus" rerender="table,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
<!-- Removed 4/28
<apex:column headerValue="Guaranteed Margin ">
<apex:inputField value="{!myVar.item.Margin__c}">
<apex:actionSupport event="onchange" action="{!calculatePrice}" status="counterStatus" rerender="table,panel1,counterStatus"/>
</apex:inputField>
</apex:column>
-->
<!-- Removed 8/15 in order to fix issue where GM would be updated by updating Sales Price
<apex:column headerValue="Sales Price" id="Price">
<apex:inputField value="{!myVar.item.UnitPrice}">
<apex:actionSupport event="onchange" action="{!calculateMargin}" status="counterStatus" rerender="table,panel1,counterStatus"/>
</apex:inputField>
</apex:column>
-->
<!--
<apex:column headerValue="Discount">
<apex:outputText >{!myVar.item.Discount}</apex:outputText>
</apex:column>
<apex:column headerValue="Unit Price">
<apex:outputText >{!myVar.item.UnitPrice}</apex:outputText>
</apex:column>
<apex:column headerValue="Total Price">
<apex:outputText >{!myVar.item.TotalPrice}</apex:outputText>
</apex:column>
-->
<apex:column headerValue="Total Price">
<apex:outputText >{!myVar.b}</apex:outputText>
</apex:column>
<!-- Added on 04-15-2014 : Vinay -->
<apex:column headerValue="Commission">
<apex:inputField value="{!myVar.item.Commission__c}">
<apex:actionSupport event="onchange" action="{!calculateCommissionPercentage}" status="counterStatus" rerender="table,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
<!-- Added on 04-15-2014 : Vinay -->
<apex:column headerValue="Commission %">
<apex:inputField value="{!myVar.item.Commission_Percent__c}">
<apex:actionSupport event="onchange" action="{!calculateCommission}" status="counterStatus" rerender="table,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
</apex:pageBlockTable>
<!-- Line Calculator for EMEA users -->
<apex:pageBlockTable value="{!Objects}" var="myVar" id="table2" rendered="{!showEMEA}">
<apex:column headerValue="Product">{!myVar.product.Name}</apex:column>
<apex:column headerValue="Product Code">{!myVar.product.ProductCode}</apex:column>
<!--apex:column headerValue="Recommended End User Discount %"-->
<apex:column headerValue="Rec. End User Disc %">
<apex:inputField value="{!myVar.item.Rec_EndUser_Disc__c}">
<apex:actionSupport event="onchange" action="{!calculateRecEndUserPrice}" status="counterStatus" rerender="table2,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
<!--apex:column headerValue="Recommended End User Price"-->
<apex:column headerValue="Rec. End User Price">
<apex:inputField value="{!myVar.item.Recommended_end_user_price__c}" rendered="{!NOT(readOnly)}">
<apex:actionSupport event="onchange" action="{!calculateRecEndUserDiscount}" status="counterStatus" rerender="table2,panel1,counterStatus,pmsg"/>
</apex:inputField>
<apex:outputField value="{!myVar.item.Recommended_end_user_price__c}" rendered="{!readOnly}"/>
</apex:column>
<!--apex:column headerValue="Distributor Std Discount %"-->
<apex:column headerValue="Dist Standard Disc %">
<apex:inputField value="{!myVar.item.Discount_Percent_Off__c}">
<apex:actionSupport event="onchange" action="{!calculatePrice}" status="counterStatus" rerender="table2,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
<!--apex:column headerValue="Distributor Standard Price"-->
<apex:column headerValue="Dist Std Price">
<apex:inputField value="{!myVar.item.Dealer_Discount_Price__c}">
<apex:actionSupport event="onchange" action="{!calculateDiscount}" status="counterStatus" rerender="table2,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
<!--apex:column headerValue="Distributor SPR Discount %"-->
<apex:column headerValue="Dist SPR Disc %">
<apex:inputField value="{!myVar.item.SPR_Discount__c}" rendered="{!NOT(readOnlyB)}">
<apex:actionSupport event="onchange" action="{!calculatePrice}" status="counterStatus" rerender="table2,panel1,counterStatus,pmsg"/>
</apex:inputField>
<apex:outputField value="{!myVar.item.SPR_Discount__c}" rendered="{!readOnlyB}"/>
</apex:column>
<!--apex:column headerValue="Distributor SPR Price"-->
<apex:column headerValue="Dist SPR Price">
<apex:inputField value="{!myVar.item.SPR_Price__c}" html-placeholder="0.00000" >
<apex:actionSupport event="onchange" action="{!calculateDiscountSPR}" status="counterStatus" rerender="table2,panel1,counterStatus,pmsg,totalDiscount"/>
</apex:inputField>
</apex:column>
<!--apex:column headerValue="Distributor SPR Margin"-->
<apex:column headerValue="Dist SPR Margin">
<apex:inputField value="{!myVar.item.Distributor_SPR_Margin__c}">
<apex:actionSupport event="onchange" action="{!ChangeMargin}" status="counterStatus" rerender="table2,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
<apex:column headerValue="Quantity">
<apex:inputField value="{!myVar.item.Quantity}">
<apex:actionSupport event="onchange" action="{!calculatePrice}" status="counterStatus" rerender="table2,panel1,counterStatus,pmsg"/>
</apex:inputField>
</apex:column>
<apex:column headerValue="List Price">{!myVar.item.ListPrice}</apex:column>
<apex:column headerValue="Total Price">
<apex:outputText >{!myVar.b}</apex:outputText>
</apex:column>
<apex:column headerValue="Total Discount %">
<apex:outputText id="totalDiscount">{!myVar.Item.TotalDiscount__c}</apex:outputText>
</apex:column>
</apex:pageBlockTable>
<script>
function check(fn) {
if (document.querySelectorAll('[data-single]:checked').length===2) {
alert('Please choose only one.');
} else {
fn();
}
}
</script>
</apex:pageBlock>
</apex:form>
</apex:page>
do you mean calling a javascript function on apex:inputfield ?
refer to this for confirtmation box, and replace "x" with any field you want to update.
function myFunction() {
var x;
if (confirm("Press a button!") == true) {
x = "You pressed OK!";
} else {
x = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = x;
}
you can call this function on apex:inputfield as well as button
Well what I need to do is for example I have a <apex:inputfield value = "" id ="ip"/> now I want to call that inputfield to a javascript function like this
function test(){
if(ip)
confirm("It's working");
}
Now my question is how can I do that.
Thanks for the reply.