4

I've been searching this for a while and, despite being simple in original HTML, I seem unable to do something like this in visualforce:

<script>
function checkField() {   
    jQuery(".numberField").each(function() {
        if (val != null && val != '') { 
            alert('val is '+val); 
        } 
        else                   
            alert('Please enter some text');            
        } 
    });
}
</script>

At the moment I'm just testing whether this works or not to implement RegEx afterwards. I've been able to call random alerts on document.ready and onclick button events. The class to my inputfields like this:

        <apex:outputPanel id="id1">
           <apex:pageBlockSection title="Start-up Cost" columns="1" rendered="{!IF(Value == '2', false , true )}">
                <apex:inputField styleClass="numberField" label="Field3" value="{!Field1.Value__c}" onfocus="DatePicker.pickDate(false, this , false);" />
                <apex:inputField styleClass="numberField" label="Field2" value="{!Field2.Value__c}"/>
                <apex:inputField styleClass="numberField" label="Value" value="{!Field3.Value__c}"/>
           </apex:pageBlockSection>

I appreciate any help

3
  • You'll probably need to post your apex as well. If you fill in a value for this field and then call your function, does it work? Does Value == 2?
    – greenstork
    Oct 11, 2013 at 17:24
  • What is the question / problem here? Oct 11, 2013 at 17:25
  • I'm just trying to make the alerts to work. Value(val) is some random variable which is always empty/null.
    – Rui Rocha
    Oct 11, 2013 at 18:19

2 Answers 2

3

It's not clear what your ultimate goal is but the javascript as it's written won't work.

Try one of these two approaches:

Not passing parameters

<script> 
// if you want to use a jQuery object rather than
// the HTML Element within the function

function checkField() {   
    jQuery(".numberField").each(function() {
        var $element = jQuery(this);
        if ($element.val() != null && $element.val() != '') { 
            alert('val is ' + $element.val()); 
        } 
        else {    
            alert('Please enter some text');            
        } 
    });
}
</script>

or

<script>
// if you want to use the HTML Element (this) rather than
// a jQuery object within the function

function checkField() {   
    jQuery(".numberField").each(function() {
        if (this.value != null && this.value != '') { 
            alert('val is ' + this.value); 
        } 
        else {
            alert('Please enter some text');            
        } 
    });
}
</script>

Passing parameters

If you define the anonymous function to include the two parameters that the .each() method provides, index and the element, you can use those rather than the reference to this as above.

<script>
function checkField() {   
    jQuery(".numberField").each(function(index, element) {
        if (element.value != null && element.value != '') { 
            alert('val is ' + element.value); 
        } 
        else {
            alert('Please enter some text');            
        } 
    });
}
</script>
2
  • The problem here is that jQuery never seems to enter the "jQuery(".numberField").each" line. Is using styleClass the correct way? I'm trying it because in the generated HTML it seems fine.
    – Rui Rocha
    Oct 11, 2013 at 18:21
  • 1
    How do you know that the browser never enters that line? Where are you calling the checkField function from? In your page, if you call checkField(); from the browser console or from a button click, etc. do you get no alerts? In the browser console if you execute jQuery('.numberField'); does the console show you an empty collection or do you see all of the DOM elements which have the numberField class on them?
    – Mark Pond
    Oct 11, 2013 at 19:31
-1
<apex:outputPanel id="id1">
       <apex:pageBlockSection title="Start-up Cost" columns="1" rendered="{!IF(Value == '2', false , true )}">
            <apex:inputField styleClass="ID1" label="Field3" value="{!Field1.Value__c}" onfocus="DatePicker.pickDate(false, this , false);" />
            <apex:inputField styleClass="ID2" label="Field2" value="{!Field2.Value__c}"/>
            <apex:inputField styleClass="ID3" label="Value" value="{!Field3.Value__c}"/>
       </apex:pageBlockSection>

VF generates dynamic IDs for DOM Elements. So in jQuery, use this format to select DOM elements.

jQuery('[id$=ID1]').each(function(){
....
});
1
  • 1
    Visualforce only mucks about with id selectors, not classes.
    – greenstork
    Oct 11, 2013 at 18:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .