Solved

how to enable select option if a checkbox is clicked

Posted on 2006-06-21
13
189 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
  • 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
Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

 

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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
String format issue 13 91
J2SE 5.0 metadata 1 56
AlarmClock Challenge 35 150
Getting NoSuchMethodError on accessing a spring mvc project 3 161
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Each year, investment in cloud platforms grows more than 20% (https://www.immun.io/hubfs/Immunio_2016/Content/Marketing/Cloud-Security-Report-2016.pdf?submissionGuid=a8d80a00-6fee-4b85-81db-a4e28f681762) as an increasing number of companies begin to…
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

777 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