asked on

how to enable select option if a checkbox is clicked

In my form I need a select box to appear or enabled when a checkbox is clicked
I tried doing it but the problem I am facing is " how to check the value of the checkbox"

Any help willl be appreciated

Here is my code
------------------------------------------------------------------------------------------------------------------------
            <INPUT TYPE=CHECKBOX NAME="DISPLAY_ADD">Display Sponsor as ADD.<P>
<% if(DISPLAY_ADD == 1){
sponsor_order_status =="";
}
%>

            <b>ADD. SEQUENCE/ORDER:</b><font color="red">*</font>
                  <select name="SPONSOR_ORDER" class="textfield" <%=sponsor_order_status%>>
                        <option value=''>Please select one</option>
                        <option value='1'>1</option>
                        <option value='2'>2</option>
                        <option value='1'>3</option>
                        <option value='2'>4</option>
                        <option value='1'>5</option>
                        <option value='2'>6</option>
                        <option value='1'>7</option>
                        <option value='2'>8</option>
                        <option value='1'>9</option>
                        <option value='2'>10</option>
                  </select>

ASKER CERTIFIED SOLUTION

rj_stone

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rj_stone

Sorry for the poor cut and paste job!!

huzefaq

ASKER

can it be done without using span

huzefaq

ASKER

ri_stone thanks for your help

I am actually having problem understanding your code where you used span. can you please explain that and is there an easy way to do this

Thnaks

rj_stone

You could hide (make style="visibility=hidden") but the name of the select box still appears. The span around all of it will also take care of the property. The select drop dow will be hidden when until the check box is clicked.

Hope this helps.

Sampel code for you:

<script language="javascript">

function checkVisability(){

if (document.frmReq.DISPLAY_ADD.checked){
spnBirthDates.style.visibility = "visible";

}else{
spnBirthDates.style.visibility = "hidden";

}
}
</script>

</head>
<body>

<form name="frmReq">
<INPUT TYPE=CHECKBOX NAME="DISPLAY_ADD" onclick="checkVisability()">Display Sponsor as ADD.<P>
<% if(DISPLAY_ADD == 1){
sponsor_order_status =="";
}
%>

<span name="spnBirthDates" id="spnBirthDates" style="visibility:hidden">
<b>ADD. SEQUENCE/ORDER:</b><font color="red">*</font>
<select id="spnBirthDates1" name="spnBirthDates1" class="textfield" <%=sponsor_order_status%>>
            <option value=''>Please select one</option>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='1'>3</option>
            <option value='2'>4</option>
            <option value='1'>5</option>
            <option value='2'>6</option>
            <option value='1'>7</option>
            <option value='2'>8</option>
            <option value='1'>9</option>
            <option value='2'>10</option>
</select>
</span>
</form>

rj_stone

You can name your span anything you want (ID as well). Just make sure you change this name in the function as well.

huzefaq

ASKER

rj

I tried your code but somehow it doesn't go to the javascript function(OnClick() is not working) would you know why is that

Here is my forma attribute
<form name="myform" enctype="multipart/form-data" action="chapter_admin?action=add_sponsors" method="post" >

Thanks

rj_stone

Did you change the line :

if (document.frmReq.DISPLAY_ADD.checked)

to

if (document.myform.DISPLAY_ADD.checked)

It works for me with this change.

huzefaq

ASKER

it works fine now, thanks, but there is another problem

when somebody adds data it is saved in the database and assined an id and when somebody clicks on the id the data in the form is prefilled

Now when somebody check the checkbox and choose a display order and save the record and the try to come back to the record by clicking on the record id
the checkbox is checked but the display order select box doesn't show up. It only appears when the user clicks twice on the checkbox

Do you know how to solve this problem

Thank you for all yor help

huzefaq

ASKER

this is how I prefill the checkbox

-------------------------------------------------
<% if(selected_sponsor.isDisplay_add()){
                  checkbox_status = "checked";
            } %>
            <INPUT TYPE=CHECKBOX NAME="DISPLAY_ADD" id ='display_add' onClick="showSelect()" <%=checkbox_status%> >Display Sponsor as ADD.</INPUT><P>
-----------------------------------------------------

rj_stone

<span name="spnBirthDates" id="spnBirthDates" style="visibility:hidden">

It is hidden by default (style="visibility:hidden") in the code I gave you. You would have to check the status of the checkbox when the come to the page and make the select appear if the status is checked.

You could try this : (Not tested so the syntax may nned to be changed to work)
<span name="spnBirthDates" id="spnBirthDates" style="visibility:
<%if checkbox_status.equals("checked") {
%>visible"
<%}
else{
%>
hidden"
<%}
>

rj_stone

There is an error it should be

<span name="spnBirthDates" id="spnBirthDates" style="visibility:
<%if (checkbox_status.equals("checked")) {
%>visible">
<%}
else{
%>
hidden">
<%}%>

huzefaq

ASKER

thanks a lot it worked :)