Solved

how to enable select option if a checkbox is clicked

Posted on 2006-06-21
13
190 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Many businesses neglect disaster recovery and treat it as an after-thought. I can tell you first hand that data will be lost, hard drives die, servers will be hacked, and careless (or malicious) employees can ruin your data.
With User Account Control (UAC) enabled in Windows 7, one needs to open an elevated Command Prompt in order to run scripts under administrative privileges. Although the elevated Command Prompt accomplishes the task, the question How to run as script…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

809 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