SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Use radio buttons to switch between displayed text

    Hello, all.

    On my webpage I would like two radio buttons that say "Display Text 1" and "Display Text 2" , and when the corresponding one is selected, some paragraphs of text are displayed.

    So, I have these two buttons:
    HTML Code:
    <input type="radio" name="text_display" value="1" onClick="display_text()">Display Text 1<br></input>
    <input type="radio" name="text_display" value="2" onClick="display_text()">Display Text 2<br></input>
    Then in my javascript, I have:

    Code JavaScript:
    <script language="JavaScript">
    function display_text(){
        if (document.text_display[0].checked == true){
            // How to display 3 paragraphs of text? 
        }
        else if (document.text_display[1].checked == true){
            // How to display 3 different paragraphs of text? 
        }
    }
    </script>

    I'm not sure what to put into my function to make it display 3 paragraphs of text where I want. Any thoughts? Thanks a lot!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Hamshmam44 View Post
    On my webpage I would like two radio buttons that say "Display Text 1" and "Display Text 2" , and when the corresponding one is selected, some paragraphs of text are displayed.
    These are the paragraphs to be toggled. We will be using a technique that lets us pass multiple ids to be shown and hidden. Even though we do this, it's still a good idea to keep down the number of unique identifiers that are used.

    Code HTML4Strict:
    <p id="text1">This text will be hidden when the page loads up.</p>
    <div id="text2">
        <p>Single paragraphs can be hidden, and even complete blocks of elements.</p>
        <p>Because a style is being used, it opens up a lot of possibilities.</p>
    </div>

    When the page loads up we don't want the paragraphs to be shown. When the page loads we can hide them immediately, then show them only when the appropriate input radio button is selected.

    Code HTML4Strict:
    <body onload="hide(['text1', 'text2'])">

    With the onDOMLoad event the text may stay up briefly until the page finishes loading. There is another technique called onDOMLoad that can be used to hide the text before it even shows on the page, but that would be for a separate tutorial.

    Because we are hiding several elements when the page loads, the hide() function needs to accept more than one argument at a time. We've put the multiple arguments in to an array, and the show() and hide() functions will take care of the details.

    These are the radio buttons used to to show text and hide others.
    Note: Labels should be used for the input text. This way when people click on the label, it can activate the radio button too.

    Code HTML4Strict:
    <input type="radio" name="text_display" id="text_display1" value="1" onClick="show('text1'); hide('text2')" />
    <label for="text_display1">Display Text 1</label><br>
    <input type="radio" name="text_display" id="text_display2" value="2" onClick="show('text2');hide('text1')" />
    <label for="text_display2">Display Text 2</label><br>

    The show() and hide() functions do the job of changing the styles.

    Code JavaScript:
    function show(id) {
        var el;
        if (typeof id == 'string') {
            el = document.getElementById(id);
            el.style.display = '';
        } else if (typeof id == 'object') {
            var arrayLen = id.length;
        for (var i = 0; i < arrayLen; i++) {
            el = document.getElementById(id[i]);
            el.style.display = '';
        }
    }
    function hide(id) {
        var el;
        if (typeof id == 'string') {
            el = document.getElementById(id);
            el.style.display = 'none';
        } else if (typeof id == 'object') {
            var arrayLen = id.length;
        for (var i = 0; i < arrayLen; i++) {
            el = document.getElementById(id[i]);
            el.style.display = 'none';
        }
    }

    And that's all you need.
    Last edited by paul_wilkins; Dec 16, 2007 at 11:46.

  3. #3
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how about like this:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript">
    function ShowParagraph(obj){
    	if(obj.value == "Para1"){
    		document.getElementById('Para1').style.display = '';
    		document.getElementById('Para2').style.display = 'none';
    	}
    	else if(obj.value == "Para2"){
    		document.getElementById('Para2').style.display = '';
    		document.getElementById('Para1').style.display = 'none';
    	}
    	else{
    		document.getElementById('Para1').style.display = 'none';
    		document.getElementById('Para2').style.display = 'none';
    	}
    }
    </script>
    </head>
    <body>
    <form name="myForm1" id="myForm1" method="post" action="test.php?a=1">
    	<input type="radio" value="Para1" name="showPara" onClick="ShowParagraph(this);" />Paragraph 1<br>
    	<input type="radio" value="Para2" name="showPara" onClick="ShowParagraph(this);" />Paragraph 1
    	<p id="Para1" style="display:none;border:1px #000000 solid;width:500px;">Paragraph one text goes here</p>
    	<p id="Para2" style="display:none;border:1px #000000 solid;width:500px;">Paragraph two text goes here</p>
    </form>
    </body>
    </html>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    To carry on from my previous post, there is quite a lot of duplication that can easily be removed into a couple of helper functions.

    Here's the current hide() function.

    Code JavaScript:
    function hide(id) {
        var el;
        if (typeof id == 'string') {
            el = document.getElementById(id);
            el.style.display = '';
        } else if (typeof id == 'object') {
            var arrayLen = id.length;
        for (var i = 0; i < arrayLen; i++) {
            el = document.getElementById(id[i]);
            el.style.display = '';
        }
    }

    All of that decision making can easily be moved out to a separate forEach() function.

    Code JavaScript:
    function forEach(args, fn) {
        if (typeof args == "object") {
            for (var i = 0, argLen = args.length; i < argLen; i++) {
                forEach(args[i], fn);
            }
        } else {
            fn(args);
        }
    }

    This means that the hide() function can be changed to be

    Code JavaScript:
    function hide(id) {
        forEach(id, function(id) {
            var el = document.getElementById(id);
            el.style.display = '';
        }
    }

    That's a lot neater, but I don't want to create new variables all the time. What if we can pass the element straight to a setStyle() function

    Code JavaScript:
    function setStyle(el, property, value) {
        el.style[property] = value;
    }

    Now the hide() function becomes

    Code JavaScript:
    function hide(id) {
        forEach(id, function(id) {
            setStyle(document.getElementById(id), 'display', '');
        }
    }

    That's a bit better, and we can also make a nice small function to help us get the element too.

    Code JavaScript:
    function getElement(id) {
        return document.getElementById(id);
    }

    And we end up with a very tidy function now.

    Code JavaScript:
    function hide(id) {
        forEach(id, function(id) {
            setStyle(getElement(id), 'display', 'none');
        });
    }

    This is how many frameworks were created, by removing the excess, we're left with small and tidy functions that neatly do their job.

    Here's the full series of functions one again.

    Code JavaScript:
    function show(id) {
        forEach(id, function(id) {
            setStyle(getElement(id), 'display', '');
        });
    }
    function hide(id) {
        forEach(id, function(id) {
            setStyle(getElement(id), 'display', 'none');
        });
    }
    function forEach(args, fn) {
        if (typeof args == "object") {
            for (var i = 0, argLen = args.length; i < argLen; i++) {
                forEach(args[i], fn);
            }
        } else {
            fn(args);
        }
    }
    function setStyle(el, property, value) {
        el.style[property] = value;
    }
    function getElement(id) {
        return document.getElementById(id);
    }


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
  •