Solved

how to enable select option if a checkbox is clicked

Posted on 2006-06-21
13
192 Views
Last Modified: 2010-04-01
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>
0
Comment
Question by:huzefaq
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
13 Comments
 

Accepted Solution

by:
rj_stone earned 500 total points
ID: 16953673
We usually use a span object to hide the select box. The use an onclick event in the checkbox to make it visible or hidden.

As an example. (This code is in asp but should be easy to convert to jsp.

<input type="checkbox" name="chkOnSite" id="chkOnSite" onclick="checkVisability()"
<%
if (request.QueryString("OnSite") = "Y") then
      response.write "checked"
end if
%>>
<br>
<span class="9pt" id=spnBirthDates STYLE="VISIBILITY:
<%if (request.QueryString("OnSite") = "Y") then                                    response.write "Visable"
else                                                            response.write "hidden"                                          
end if%>">
Birth Month<select class="ddboxNoSize" NAME="cboBirthMonth">                                                             
<%                                                      response.write "<option value=" & Request.QueryString("BirthMonth") & ">" & Request.QueryString("BirthMonth") & "</option>"
                                                            
for x = 1 to 12
                                                                  response.write "<option value=" & x & ">" & x & "</option>"
                                                            
next
                                                            
%>
                                                            </select>
                                                            
Birth Day<select class="ddboxNoSize" NAME="cboBirthDay">
                                                            
<%
                                                      
response.write "<option value=" & Request.QueryString("BirthDay") & ">" & Request.QueryString("BirthDay") & "</option>"
                                                            
for x = 1 to 31
                                                                  response.write "<option value=" & x & ">" & x & "</option>"

next

%>
                                                      
</select>

</span>


The fiunction
function checkVisability(){

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

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

      }
}

The you can check the span visibility of the span and get the value of the select box if the span is visible.
Hope this helps a bit.
0
 

Expert Comment

by:rj_stone
ID: 16953883
Sorry for the poor cut and paste job!!
0
 

Author Comment

by:huzefaq
ID: 16954495
can it be done without using span
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:huzefaq
ID: 16955120
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

0
 

Expert Comment

by:rj_stone
ID: 16959277
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>
0
 

Expert Comment

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

Author Comment

by:huzefaq
ID: 16960843
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
0
 

Expert Comment

by:rj_stone
ID: 16961054
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.
0
 

Author Comment

by:huzefaq
ID: 16961139
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
0
 

Author Comment

by:huzefaq
ID: 16961158
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>
-----------------------------------------------------
0
 

Expert Comment

by:rj_stone
ID: 16961266
<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"
<%}
>



0
 

Expert Comment

by:rj_stone
ID: 16961443
There is an error it should be

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

Author Comment

by:huzefaq
ID: 16961951
thanks a lot it worked :)
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is in regards to the Cisco QSFP-4SFP10G-CU1M cables, which are designed to uplink/downlink 40GB ports to 10GB SFP ports. I recently experienced this and found very little configuration documentation on how these are supposed to be confi…
First of all let me say that the only language that I speak is English, but in answering questions here I often come across people whose English skills are not the best and I’d like to be able to communicate better with them, and the following descr…
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question