Solved

how to enable select option if a checkbox is clicked

Posted on 2006-06-21
13
191 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

Suggested Solutions

Title # Comments Views Activity
getting Http 404 error in jsp forms 8 85
spring AOP 6 91
dateFashion java challenge 9 149
maven set up 2 189
This article discusses how to implement server side field validation and display customized error messages to the client.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
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…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

733 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