How to do this javascript

JavaScript
1

Hi Below is the code in which we have two div tags and when i select one option fron radio button i need to show one block and when i select other option i need to show other block of code and hide the other , but i amnot able to do that , will any one help me in this

thanks

<script language=“JavaScript” type=“text/javascript”>
function showHide(el_id) {
if (document.getElementById(el_id).style.display == “none”){
document.getElementById(el_id).style.display = “block”;
}
else if(document.getElementById(el_id).style.display == “block”){
document.getElementById(el_id).style.display = “none”;
}
}
</script>
<input type=“radio” name=“myName” value=“0” onClick=“showHide(‘showHideDiv’);”>select multiple divisions
<input type=“radio” name=“myName” value=“1” onClick=“showHide(‘showHideDiv’);” checked=“true”>No Multiple Selections

<div id=“showHideDiv” style=“display:none;”>

<table>
<tr>
<td><strong>Division:</strong></td>
<td>
<select name=“div_no” multiple=“true” size=“5” >
<cfoutput query=“qryDivisions”>
<option value=“div_no”>#div_no# - #div_desc#</option>
</cfoutput>
</select></td></tr>
</table>
</div>

<div id=“showHideDiv” style=“display:none;”>

&lt;table&gt;   
    &lt;tr&gt;
    &lt;td&gt;&lt;strong&gt;Division:&lt;/strong&gt;&lt;/td&gt;       
    &lt;td&gt;   
    &lt;select  name="div_no"  multiple="true" size="5"  &gt;
    &lt;cfoutput query="qryDivisions"&gt;
    &lt;option value="div_no"&gt;#div_no# - #div_desc#&lt;/option&gt;       
    &lt;/cfoutput&gt;       
    &lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

</div>

2

You have several problems that are getting in the way of a solution. Here’s how to get around them.

Element identifiers must be unique. That’s in the spec. So the identifiers need to be changed to unique terms. I suggest something based on the name and value such as “myName0” and “myName1”. That way the script can automatically figure out which ones to show and hide.

Another issue that’s getting in your way is where the scripting is spread all over the place, with some at the top, and some as inline event attributes. It’s best to avoid those as they clutter the HTML and are hard to manage. Keep the scripting at the end, just before the </body> tag.

Finally, don’t use CSS to hide the option sections. Otherwise people with no javascript support will be left in the dark. Instead, use javascript to hide those sections instead, most appropriately by setting a class name on them.

Let’s start by cleaning all of the unneeded parts from the HTML. You will notice that I’ve indicated where the css and script files are included. I’ve also assumed a form element wrapping those input fields. If you don’t use a form for that part, you can wrap them with something else like a paragraph or a div. Either way, ensure that whatever is wrapping the input elements can be accessed via scripting by changing “formIdentifier” to a good semantic name that describes the purpose of the form or contents.


<!DOCTYPE HTML>
<html>
<head>
    ...
    <link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body> 
<form id="formIdentifier">
    <p>
        <input type="radio" name="myName" value="0">select multiple divisions
        <input type="radio" name="myName" value="1" checked="true">No Multiple Selections
    </p>
    <div id="myName0">
        ...
    </div>
    <div id="myName1">
        ...
    </div>
</form>
...
<script type="text/javascript" src="js/script.js"></script>
</body> 
</html>

In the style.css file you will have your CSS for the page, for example:

css/style.css


.hidden {
    display: none;
}

The script.js file will contain the script code for your page.

This will involve three main parts.

[list=1][]Attach the events on to the form elements
[]Hide the appropriate page sections
[*]Handle the attached event[/list]

Parts 1 and 2 can be done pretty much at the same time, where you gain a reference to the radio buttons, and then attach the event, and then hide the page sections.

Notice also that when we’re hiding the sections as the page loads, we’re also checking to see if the option is checked so that we can avoid hiding the currently selected section.

js/script.js


var form = document.getElementById('formIdentifier'),
    options = form.elements.myName,
    option,
    section,
    i;
for (i = 0; i < options.length; i += 1) {
    var option = options[i];
    option.onclick = showSection;

    section = document.getElementById(option.name + option.value);
    if (!option.checked) {
        section.className = 'hidden';
    }
}

Part 3 is where we reveal the appropriate section.

The most effective way to do this is to walk through all of the radio buttons related to the one that was selected, so that we can hide all of the sections that are not related to the one we chose, and reveal the one that was chosen.


function showSection() {
    var option = this,
        options = option.form.elements[option.name],
        section,
        i;
    for (i = 0; i < options.length; i += 1) {
        var id = options[i].name + options[i].value;
        section = document.getElementById(id);
        if (option === options[i]) {
            section.className = '';
        } else {
            section.className = 'hidden';
        }
    }    
}