SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot ninjayong's Avatar
    Join Date
    May 2006
    Location
    Holland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS suitable for display/hiding of form sections ?

    I've written a very long market research survey which is divided into 6 sections. I began by using PHP to manage the display of each section but it soon became very complex trying to pass the session variables of each page to the next page before submitting the form. Now I'm thinking of a different approach but my JS is rubbish

    What I need to achieve:
    - when the page loads, only "Section 1" should be visible
    - links at the bottom of the section allow the user to go back to the previous section or on to the next section
    - the page should never refresh

    What I've got so far:
    Here's a basic script which allows me to hide/show a section when the user clicks links. Great, this is just what I need as there's no page refresh. Am I going in the right direction to find a solution to this ? Should I (and is it possible ??) now amend the script to achieve the above points ?

    HTML Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Hide Layers Without Page Refresh</title>
    <script language="javascript">
    
    
    function toggleLayer(id, NNtype, IEtype, WC3type) {
        if (document.getElementById) {
            eval("document.getElementById(id).style.visibility = \"" + WC3type + "\"");
        } else {
            if (document.layers) {
                document.layers[id].visibility = NNtype;
            } else {
                if (document.all) {
                    eval("document.all." + id + ".style.visibility = \"" + IEtype + "\"");
                }
            }
        }
    }
    </script>
    </head>
    <body>
    
    <h2>Sections to be shown one at a time</h2>
    <div align="center">
    	<div id="LayerName1">
    		<h3>Section 1: blah blah blah </h3>
    		<p><!-- insert link to show section 2--></p>
    	</div>
    	<div id="LayerName2">
    		<h3>Section 2: blah blah blah </h3>
    		<p><!-- insert link to show back to section 1--></p>
    		<p><!-- insert link to show section 3--></p>
    	</div>
    	<div id="LayerName3">
    		<h3>Section 3: blah blah blah </h3>
    		<p><!-- insert link to show back to section 2--></p>
    	</div>
    </div>
    
    <h2>Links</h2>
    <p>
    <a href="#" onmousedown="toggleLayer('LayerName1','hidden','hidden','hidden')">Hide Section 1</a> <br />
    <a href="#" onmousedown="toggleLayer('LayerName1','show','visible','visible')">Show Section 1</a><br />
    </p>
    
    </body>

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like your approach. You're definitely headed in the right direction. My recommendation is to minimize your inline javascript (in your anchor tags) and reduce the number of arguments in your calls.

    Also, is there a reason you're supporting 4.x browsers? Personally, I'd leave support for that out - unless you *have* to support them.

    Here's my suggestion for your code - please keep in mind that this is just a rough start - you'd need to do some other modifications to make it unobtrusive, remove the inline style information, etc. This is just to illustrate:
    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=iso-8859-1">
    <title>Document</title>
    <script type="text/javascript">
    var currentPage = 1;
    function nextPage(id) {
      document.getElementById("page" + (currentPage + 1)).style.display = "block";
      document.getElementById("page" + currentPage).style.display = "none";
      currentPage++;
    }
    function prevPage() {
      document.getElementById("page" + (currentPage - 1)).style.display = "block";
      document.getElementById("page" + currentPage).style.display = "none";
      currentPage--;
    }
    window.onload = function() {
      document.getElementById("prev").onclick = function () { prevPage(); };
      document.getElementById("next").onclick = function () { nextPage(); };
    };
    </script>
    </head>
    <body>
    <h2>Sections to be shown one at a time</h2>
    <div align="center">
    	<div id="page1" style="background-color:green;">
    		<h3>Section 1: blah blah blah </h3>
    		<p><!-- insert link to show section 2--></p>
    	</div>
    	<div id="page2" style="display:none;background-color:red;">
    		<h3>Section 2: blah blah blah </h3>
    		<p><!-- insert link to show back to section 1--></p>
    		<p><!-- insert link to show section 3--></p>
    	</div>
    	<div id="page3" style="display:none;background-color:blue;">
    		<h3>Section 3: blah blah blah </h3>
    		<p><!-- insert link to show back to section 2--></p>
    	</div>
    </div>
    <h2>Links</h2>
    <p>
    [ <a id="prev" href="#">&lt;-- Previous Section</a> ] [ <a id="next" href="#">Next Section --&gt;</a> ]
    </p>
    </body>
    </html>
    Hope this helps.
    var me = null;

  3. #3
    SitePoint Zealot ninjayong's Avatar
    Join Date
    May 2006
    Location
    Holland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow you wrote it for me... thank you so much. I had a good look through what the script is doing and it would have taken me an eternity to get there myself so really, a very big thank you

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jtrelfa:
    Just out of curiosity, why do you do:
    document.getElementById("prev").onclick = function () { prevPage(); };
    instead of:
    document.getElementById("prev").onclick = prevPage;
    ?

  5. #5
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do either one - I have a tendency to write it that way so that I can add additional functions if needed without having to re-write.

    On a side note, there are potential issues if you write it the way I did if you need access to "this" within the closure. If you write it like this:

    document.getElementById("prev").onclick = prevPage;

    Then using "this" in prevPage will refer to the element.

    Writing like this:

    document.getElementById("prev").onclick = function() { prevPage(); };

    If you use "this" in prevPage, you are referring to the prevPage function rather than the element.

    I'm more apt to pass in "this" as an argument if I need work done on the element rather than create the closure.
    var me = null;


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
  •