Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

how to enable select option if a checkbox is clicked

Posted on 2006-06-21
13
Medium Priority
?
193 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 1500 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

While opting for any web-to-print solution, you need to discuss with your team and some of your end users and know their opinions about your decisions. In this article we list down some questions you need to ask yourself.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…

715 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