Solved

disable a <div functions by radio button

Posted on 2007-03-23
6
1,828 Views
Last Modified: 2012-05-05
I have two radio buttons and two section declared by <div> tab. Now I want to

1. by default, <div> 1 is open and <div> 2 is disable, not hidden
2. By clicking  radio button 2, <div> 2 open and <div> 1 become disabled
3. By clicking radio button 1, <div> 1 open and <div> 2 become disabled

How can I do that? It is possible not to use JS but HTML? JS is fine to me too if i have to.

Here is my code

<div>
    <form name="IP_to_MAC" action="<portlet:actionURL/>" method="post" onSubmit="return ValidateForm()" >
       
            <div style="padding-top:5px;padding-bottom:5px;" id="ICC">
              <fieldset class="portlet-font">
                <legend >Type</legend>
                <input name="VolContID" type="hidden" value="999" >
               
         
                <input name="Sch_IP_Addr" type="radio" value="Sch_IP_Addr" >Search for IP Address                              
                <input name="Sch_MAC_Addr" type="radio" value="Sch_MAC_Addr"  checked  >Search for MAC Address
                <br>
                </fieldset>
<br>
                   <div >
                        <label>Search for MAC Address: <input type="text" name="MACAddress" size="20" maxlength="25" > </label>


                       <label>on the:
                           <select  id="netname" name="netname" type="text" >

                                 <option selected  >uiuc-citesstaff-net</option>
                                   <option >uiuc-bioeng-net</option>
                                     <option >uiuc-teste-net</option>


                           </select>
                      </label>
 <br>
                   </div>
       
                    <div class="disabled" style="padding-top:5px;padding-bottom:5px; visibility;" id="IPC" >

                        <label>Search for IP Address: <input type="text" name="IPAddress" size="20" maxlength="25" > </label>


                        <label>on the MAC Address:
                            <select id="MACname" name="MACname" type="text" >

                                  <option selected  >00:0A:95:77:C3:CE</option>
                                    <option>00:06:5B:62:D5:EB</option>
                                      <option  >00:06:5B:A6:AD:EC</option>

                            </select>
                        </label>

                    </div>
       
 
0
Comment
Question by:wasabi3689
[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
  • 2
6 Comments
 
LVL 35

Expert Comment

by:mrichmon
ID: 18783890
>>It is possible not to use JS but HTML
No.

You must use javascript if you want it to change based on user interaction (such as clicking a radion button)

>>1. by default, <div> 1 is open and <div> 2 is disable, not hidden
You can't disable a div, but you could disable each input inside, then use javascript to toggle the inputs/selects/etc within the two divs between disabled and enabled.

You would use

to disable:
document.getElementById("IdNameHere").style.disabled = true;

to enable:
document.getElementById("IdNameHere").style.disabled = false;

Repeat for each input/select/etc

To trigger use the onclick of the radio button to detect which one is selected and set the statuses accordingly.
0
 

Author Comment

by:wasabi3689
ID: 18784257
Here is what I code, but it doesn't work. Can you figure out the problem?

<script language="JavaScript">
               
                    function toggleVisibility(me){
                    if (document.getElementById("MAC").style.disabled = true){
                      document.getElementById("IP").style.disabled = false;
                            }
                        else {
                        document.getElementById("IP").style.disabled = true;
                    }
                }
                </script>
               
         
                <input name="Sch_IP_Addr" type="radio" value="Sch_IP_Addr" onclick="toggleVisibility(me)" >Search for IP Address                              
                <input name="Sch_MAC_Addr" type="radio" value="Sch_MAC_Addr"  checked onclick="toggleVisibility(me)"  >Search for MAC Address
                <br>
                </fieldset>
<br>
                   <div id="MAC" style="disabled" >
                        <label>Search for MAC Address: <input type="text" name="MACAddress" size="20" maxlength="25" > </label>


                       <label>on the:
                           <select  id="netname" name="netname" type="text" >

                                 <option selected  >uiuc-citesstaff-net</option>
                                   <option >uiuc-bioeng-net</option>
                                     <option >uiuc-teste-net</option>


                           </select>
                      </label>
 
                   </div>
   <br>    
                    <div id="IP" style="padding-top:5px;padding-bottom:5px; visibility;" id="IPC" >

                        <label>Search for IP Address: <input type="text" name="IPAddress" size="20" maxlength="25" > </label>


                        <label>on the MAC Address:
                            <select id="MACname" name="MACname" type="text" >

                                  <option selected  >00:0A:95:77:C3:CE</option>
                                    <option>00:06:5B:62:D5:EB</option>
                                      <option  >00:06:5B:A6:AD:EC</option>

                            </select>
                        </label>

                    </div>
       
         
          </div>
0
 

Author Comment

by:wasabi3689
ID: 18784391
Why it doesn't work

I modify the code as bellow

     <script language="JavaScript">
               
                    function toggleVisibility(me){
                   {
                     
                     
                     if (document.IP_to_MAC.MACname.disabled = true) {
                       
       
                        document.IP_to_MAC.MACAddress.disabled = false;
                        document.IP_to_MAC.netname.disabled = false;
                      }
                           
                        }
                       
                        function toggleVisibility2(me){
                       {
                     
                             document.IP_to_MAC.MACname.disabled = false;
                             document.IP_to_MAC.IPAddress.disabled = false;
                     
                              document.IP_to_MAC.MACAddress.disabled = true;
                              document.IP_to_MAC.netname.disabled = true;
                     
                       
                        }
                       
               
                </script>
               
         
                <input name="Sch_IP_Addr" type="radio" value="Sch_IP_Addr" onclick="toggleVisibility(me)" >Search for IP Address                              
                <input name="Sch_MAC_Addr" type="radio" value="Sch_MAC_Addr"  checked onclick="toggleVisibility2(me)"  >Search for MAC Address
                <br>
                </fieldset>
<br>
                   <div id="MAC" >
                        <label>Search for MAC Address: <input type="text" name="MACAddress" size="20" maxlength="25" > </label>


                       <label>on the
                           <select  id="netname" name="netname" type="text" >

                                 <option selected  >uiuc-citesstaff-net</option>
                                   <option >uiuc-bioeng-net</option>
                                     <option >uiuc-teste-net</option>


                           </select>
                      </label>
 
                   </div>
   
                    <div id="IPC"  style="padding-top:5px;padding-bottom:5px; visibility:disabled;" >

                        <label>Search for IP Address: <input type="text" name="IPAddress" size="20" maxlength="25" disabled  > </label>

                        <label>on the MAC Address:
                            <select id="MACname" name="MACname" type="text" disabled >

                                  <option selected >00:0A:95:77:C3:CE</option>
                                    <option>00:06:5B:62:D5:EB</option>
                                      <option  >00:06:5B:A6:AD:EC</option>

                            </select>
                        </label>

                    </div>
       
         
          </div>
         

I have two onclick for two radio buttons.
When I click radio button "Search for IP Address",  the input fields "Search For MAC Address" is not auto disbled? Why ?
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 50 total points
ID: 19348503
Too many syntax errors.

Here is a version I think works how you want it.
Change the IP and !IP around if I was wrong

<html>
<head>

<script language="JavaScript">
function toggleVisibility(theRad) {
  var IP = (theRad.value=='Sch_IP_Addr')?true:false;
  theRad.form.IPAddress.disabled = !IP;
  theRad.form.MACname.disabled = !IP;
  theRad.form.MACAddress.disabled = IP;
  theRad.form.netname.disabled = IP;
}
</script>
</head>
<body onLoad="if(document.forms[0].Sch_Addr[0].checked) toggleVisibility(document.forms[0].Sch_Addr[0]); else toggleVisibility(document.forms[0].Sch_Addr[1])">
<form>
<input name="Sch_Addr" type="radio" value="Sch_IP_Addr" onclick="toggleVisibility(this)" >Search for IP Address
<input name="Sch_Addr" type="radio" value="Sch_MAC_Addr" checked onclick="toggleVisibility(this)" >Search for MAC Address
<br>
</fieldset>
<br>
<div id="MAC" >
<label>Search for MAC Address: <input type="text" name="MACAddress" size="20" maxlength="25" > </label>


<label>on the
<select id="netname" name="netname" type="text" >

<option selected >uiuc-citesstaff-net</option>
<option >uiuc-bioeng-net</option>
<option >uiuc-teste-net</option>


</select>
</label>

</div>

<div id="IPC" style="padding-top:5px;padding-bottom:5px; visibility:disabled;" >

<label>Search for IP Address: <input type="text" name="IPAddress" size="20" maxlength="25"> </label>

<label>on the MAC Address:
<select id="MACname" name="MACname" type="text">

<option selected >00:0A:95:77:C3:CE</option>
<option>00:06:5B:62:D5:EB</option>
<option >00:06:5B:A6:AD:EC</option>

</select>
</label>

</div>


</div>
</form>
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

Suggested Solutions

Title # Comments Views Activity
displaying 3 dropdownlist  horizontally 3 32
CSS Style 8 43
Table style position to the left 8 26
Read text on Table 7 29
This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

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