Apex Code Development You need to sign in to do that
Don't have an account?
Validating apex:selectcheckboxes in Visualforce using javascript
Hi,
Im trying to get the value of the selectchecboxes using javascript to check if user selected atleast one option in checkboxes. But I always get an undefined value.
Here's my code.
<apex:selectcheckboxes id="valuesettings" styleClass="font-regular-checkboxes-container" layout="pageDirection" label="Value Settings" value="{!VSItems}">
<apex:selectoptions value="{!VSOptions}"> </apex:selectoptions>
</apex:selectcheckboxes>
<script>
// JavaScript function to check the value entered in the inputField
function checkField() {
var val = document.getElementById('{!$Component.deal.valuesettings}').value;
if (val == 0 ) {
alert('val is '+val);
}
else alert('Please enter some text'+val);
}
</script>
Im trying to get the value of the selectchecboxes using javascript to check if user selected atleast one option in checkboxes. But I always get an undefined value.
Here's my code.
<apex:selectcheckboxes id="valuesettings" styleClass="font-regular-checkboxes-container" layout="pageDirection" label="Value Settings" value="{!VSItems}">
<apex:selectoptions value="{!VSOptions}"> </apex:selectoptions>
</apex:selectcheckboxes>
<script>
// JavaScript function to check the value entered in the inputField
function checkField() {
var val = document.getElementById('{!$Component.deal.valuesettings}').value;
if (val == 0 ) {
alert('val is '+val);
}
else alert('Please enter some text'+val);
}
</script>
You have to import JQuery to your org as a Static Resource or use an external URL to retrieve it.
Assuming that is a Static Resource you first have to declare it in your VisualForce:
<apex:includeScript value="{!URLFOR($Resource.JQuery1_11_1)}" />
After that, you have to initiate JQuery and create a function that will check if there is at least one checkbox selected, otherwise, it will show a message warning the user and preventing the submit:
<script type="text/javascript">
j$ = jQuery.noConflict();
function isChecked(e) {
if(j$(".chkSelected:checked").length == 0){
e.preventDefault();
alert('Select one at least');
}
}
</script>
The next step is to add to your commandButton your js function:
<apex:commandButton value="Add Selected" action="{!selectRecords}" <b>onclick="isChecked(event)" </b> id="sparebtn" reRender=">
<apex:actionSupport event="onclick" rerender="resultsBlock" status="statusSaveTrip"/>
</apex:commandButton>
Finally, you will have to add the control style class ".chkSelected" to your apex:inputcheckbox or your input html checkbox:
<apex:inputcheckbox value="{!value}" styleClass="chkSelected" />
You have to import JQuery to your org as a Static Resource or use an external URL to retrieve it.
Assuming that is a Static Resource you first have to declare it in your VisualForce:
<apex:includeScript value="{!URLFOR($Resource.JQuery1_11_1)}" />
After that, you have to initiate JQuery and create a function that will check if there is at least one checkbox selected, otherwise, it will show a message warning the user and preventing the submit:
<script type="text/javascript">
j$ = jQuery.noConflict();
function isChecked(e) {
if(j$(".chkSelected:checked").length == 0){
e.preventDefault();
alert('Select one at least');
}
}
</script>
The next step is to add to your commandButton your js function:
<apex:commandButton value="Add Selected" action="{!selectRecords}" <b>onclick="isChecked(event)" </b> id="sparebtn" reRender=">
<apex:actionSupport event="onclick" rerender="resultsBlock" status="statusSaveTrip"/>
</apex:commandButton>
Finally, you will have to add the control style class ".chkSelected" to your apex:inputcheckbox or your input html checkbox:
<apex:inputcheckbox value="{!value}" styleClass="chkSelected" />
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha