+ Start a Discussion
prady-cmprady-cm 

Get values of form field in javascript from a visualforce page

i have requirement where i need to check if apex:inputCheckbox is checked, and if it isn't then raise an alert saying that its not checked.

 <apex:inputCheckbox value="{!check}"/> 

I am raising the alert from a java script. i am using actionfunction to call a apex method after the alert is raised.

What i need is a way to check if the checkbox is checked or not in javascript

Thanks

Prady

Best Answer chosen by Admin (Salesforce Developers) 
ForceMantis (Amit Jain)ForceMantis (Amit Jain)

Hi

 

I hope this code should answer your question.

 

<apex:page >
    <apex:form id="myForm">
        <apex:pageblock id="pb1">
            <apex:pageblockSection id="pbs1">
                <apex:inputCheckbox id="checkbox1" label="Check Me" onclick="javascript&colon;getCheckBoxValue();"></apex:inputCheckbox>
            </apex:pageblockSection>
        </apex:pageblock>
    </apex:form>
    <script language="javascript">
        function getCheckBoxValue()
        {
            alert(document.getElementById('{!$Component.myForm.pb1.pbs1.checkbox1}').checked);   
        }
    </script>
</apex:page>

 

To get Id of any apex element in html/js you have to use $Component global variable as suggested by salesforce.

 

Amit Jain

 

If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.

 

All Answers

Navatar_DbSupNavatar_DbSup

Hi,


You can make the condition inside the JavaScript function which checks that that the checkbox is checked or not. If not will populate the message. Try the below code as reference:
/////////////// VF Page ///////////////////////
<apex:page controller="Checkbox" id="p">

<script>
window.onload=
function check()
{

var v=document.getElementById('p:f:ChkId').checked;
alert('**********' +v);
if(v==false)
{
alert('Please Checked this value');
}
}

</script>
<script>
function check2(v)
{
alert(document.getElementById('p:f:ChkId').checked);
}
</script>
<apex:form id="f">
<apex:inputCheckbox id="ChkId" onclick="check2('this.value');" value="{!check}"/>
</apex:form>
</apex:page>
/////////////////// Controller ////////////////////////////
public class Checkbox
{
public boolean check{get;set;}
public Checkbox ()
{
check=false;
}
}

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 

ForceMantis (Amit Jain)ForceMantis (Amit Jain)

Hi

 

I hope this code should answer your question.

 

<apex:page >
    <apex:form id="myForm">
        <apex:pageblock id="pb1">
            <apex:pageblockSection id="pbs1">
                <apex:inputCheckbox id="checkbox1" label="Check Me" onclick="javascript&colon;getCheckBoxValue();"></apex:inputCheckbox>
            </apex:pageblockSection>
        </apex:pageblock>
    </apex:form>
    <script language="javascript">
        function getCheckBoxValue()
        {
            alert(document.getElementById('{!$Component.myForm.pb1.pbs1.checkbox1}').checked);   
        }
    </script>
</apex:page>

 

To get Id of any apex element in html/js you have to use $Component global variable as suggested by salesforce.

 

Amit Jain

 

If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.

 

This was selected as the best answer