SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to do this javascript

    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;">



    <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>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code html4strict:
    <!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
    Code css:
    .hidden {
        display: none;
    }

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

    This will involve three main parts.

    1. Attach the events on to the form elements
    2. Hide the appropriate page sections
    3. Handle the attached event


    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
    Code javascript:
    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.

    Code javascript:
    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';
            }
        }    
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •