0

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.

  • The answers here are great, but you'll probably want to use onblur instead of onclick, otherwise it'll happen before the user gets to input a value. – sfdcfox Feb 1 '17 at 18:02
  • Right ! I was just testing that . – Dexter D Feb 1 '17 at 18:07
1

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;
}
  • there's a problem in the code, to get the value from element you need to use "value" attribute. "document.getElementById" will return the element itself. – Anshul Feb 1 '17 at 17:27
  • @Anshul you are correct, updated my ans – Santanu Boral Feb 1 '17 at 17:30
  • Thanks Santanu . However if I am trying to get the value in an Alert message , it's not showing up: function restrictCurrencyValue() { alert("Function called"); ---------- >This is shown . var amountValue = document.getElementById("{!$Component.deposit.amtsec.amt}").value; alert("xxx"+amountValue); – Dexter D Feb 1 '17 at 18:18
  • did you take the first approach? – Santanu Boral Feb 1 '17 at 18:30
  • Yes . With only the inputField id. – Dexter D Feb 1 '17 at 18:46
2

In addition to Santanu's response, you can further simplify this by simply using the component's reference ("this"), as:-

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

and JS code can be:-

function restrictCurrencyValue(val) {
    var enteredAmount = val;
    /* YOUR CODE */
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.