[SalesForce] Calling Javascript function from InputField

Below is how I am calling JS function from inputField :

<apex:inputField id="InputFieldId" onclick="restrictCurrencyValue('{!$Component.pageBlockId.PageBlockSectionItemId.InputFieldId}')" value="{!TelecomMap[key].Amount__c}" />

Below is my JS :

function restrictCurrencyValue() {
    alert("Function called");
        var amountValue = document.getElementById("{!$Component.pageBlockId.PageBlockSectionItemId.InputFieldId}");
        var enteredAmount = amountValue;
        if(enteredAmount == '')
        return false;
        var regExp = /^(?!\.?$)\d{0,6}(\.\d{0,2})?$/; //Declare Regex
        var amountVal = enteredAmount.match(regExp); 
        if (amountVal == null){
            alert("Error");
        }
}

Please let me know if that is the current format of calling JS.
Also any help on JS is also appreciated since I am complete rookie in that.

Best Answer

Correct way of doing this as follows. {!$Component.InputFieldId} will consider entire DOM hierarchy, since you are passing that as a parameter of onclick event of that field.

Also, that approach is specially helpful when you are displaying records dynamically and building a table. So there will be array of components. Now if you do not pass as a parameter to javascript function then you need to loop through the array and find out the field value.

If you do not pass fieldId as parameter and if you try to access that inputField from Javascript function then you have to specify entire DOM hierarchy explicitly.

<apex:inputField id="InputFieldId" 
    onclick="restrictCurrencyValue('{!$Component.InputFieldId}')" 
    value="{!TelecomMap[key].Amount__c}" />

Javascript

function restrictCurrencyValue(fieldId) {
    alert("Function called");
        var amountValue = document.getElementById(fieldId).value;
        var enteredAmount = amountValue;

}

Also it will work

<apex:inputField id="InputFieldId" 
    onclick="restrictCurrencyValue()" 
    value="{!TelecomMap[key].Amount__c}" />

Javascript

function restrictCurrencyValue() {
    alert("Function called");
        var amountValue = document.getElementById("{!$Component.pageBlockId.PageBlockSectionItemId.InputFieldId}").value;
        var enteredAmount = amountValue;
}

Related Solutions

[SalesForce] calling or using javascript function inside actionSupport

You need to use onsubmit event of the actionSupport and remove onRowClick from the pageBlockTable:

<script>
var lastRow;
function highlight(elem){
    if(lastRow != undefined)
        lastRow.style.backgroundColor = 'white';

    elem.style.backgroundColor = 'yellow';
    lastRow = elem;
}
</script>

<apex:pageBlock >
<apex:pageBlockTable value="{!list1}" var="item" rules="rows" id="myTable1">
    <apex:column value="{!item.id}" />
    <apex:column value="{!item.name}"/>
    <apex:actionSupport event="onRowClick" reRender="" onsubmit="highlight(this);">
        <apex:param name="cId" value="{!item.id}" assignTo="{!myStringValue}"/>
    </apex:actionSupport>
</apex:pageBlockTable>    
</apex:pageBlock>

[SalesForce] Return Boolean From Action Function called from JS

You could wrap a script in an outputPanel and rerender it on every save. Then you'd have the most up-to-date value of the variable. eg:

<apex:outputPanel id="saveResultScript">
    <script>
    function confirmProceed (){
        var dataSaved = "{!JSENCODE(dataSaved)}";
        if(dataSaved == 'false' && !isDirty) {
            if(confirm('Are you sure you wish to continue - any unsaved changes will be lost.')) {
            }
        }else {
            return false;
        }
    }
    </script>
    </apex:outputText>
</apex:outputPanel>

Outside this block we have another script tag which we'll put the isDirty variable (so it doesn't get rerendered on save)

<script>
var isDirty = false;
</script>

As long as this entire panel is rerendered on every save, we can check the newly updated dataSaved variable and the locally updated isDirty variable (you said you had a variable that performs this function on any onenter event)

This way, we don't need to talk to the controller for confirmProceed to work. Hopefully this helps a little. I feel a little unsure of your requirements, but this is something that I have done several times myself and it works pretty well.

Oh and using a RemoteAction as suggested in the comments would probably work too, as long as you keep in mind that RemoteAction methods need to be static. They definitely return a value immediately for you to act on.

Update One last thought - you could use a RemoteAction to save your data and then (depending on the result) call an actionFunction to update the dataSaved var on the controller non-statically - while you can do what you want without waiting for a rerender - this should be very performant.

Best Answer

Related Solutions

[SalesForce] calling or using javascript function inside actionSupport

[SalesForce] Return Boolean From Action Function called from JS

Related Topic