Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts

    SelectedIndex and <input /> checkbox issue

    Hi everyone,

    I have a simple piece of Javascript that uses checkboxes to open up a new html page in the browser window. The code is as follows:

    <script type="text/javascript"><!--
    function select_menu(el,selected){
    var to=el.value;
    el.selectedIndex=selected;
    window.location=to;
    }//--></script>

    <p>Product Type:</p>
    <form>
    <input type="checkbox" value="shoulder_international.html" onclick="select_menu(this)"/> <span class="style">Shoulder Bags</span> <br />
    <input type="checkbox" value="clutch_international.html" onclick="select_menu(this)"/> <span class="style">Clutch Bags</span> <br />
    <input type="checkbox" value="satchel_international.html" onclick="select_menu(this,2)"/> <span class="style">Satchel Bags</span> <br />
    <input type="checkbox" value="tote_international.html" onclick="select_menu(this)"/> <span class="style">tote Bags</span> <br />
    <input type="checkbox" value="bags_international.html" onclick="select_menu(this)"/> <span class="style">All Bags</span> <br />
    </form>

    When a checkbox is selected the relevant page is loaded which is great. However, if you choose to use the back browser button to return to the previous page, the checkbox 'checks' the previous page instead of showing the current page. I assumed by including the selectedIndex property in the javascript code that this would overcome the page caching but it hasn't.

    Any suggestions would be helpful

    Thank you,

    Nonye

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,923
    Thanks
    56
    Thanked 548 Times in 545 Posts
    one way would be to put the javascript at the end of the body section (where it should be), give the form an id and reset it on page load (note: silly timeout added for IE):
    Code:
    <body>
    <p>Product Type:</p>
    <form id="myform">
    <input type="checkbox" value="shoulder_international.html" onclick="select_menu(this)"/> <span class="style">Shoulder Bags</span> <br />
    <input type="checkbox" value="clutch_international.html" onclick="select_menu(this)"/> <span class="style">Clutch Bags</span> <br /> 
    <input type="checkbox" value="satchel_international.html" onclick="select_menu(this,2)"/> <span class="style">Satchel Bags</span> <br /> 
    <input type="checkbox" value="tote_international.html" onclick="select_menu(this)"/> <span class="style">tote Bags</span> <br /> 
    <input type="checkbox" value="bags_international.html" onclick="select_menu(this)"/> <span class="style">All Bags</span> <br /> 
    </form>
    <script type="text/javascript">
    
    function select_menu(el,selected){ 
    window.location=el.value; 
    }
    
    setTimeout(function(){
    document.getElementById("myform").reset();
    },0)
    </script>
    </body>

  • Users who have thanked xelawho for this post:

    nonye (09-20-2013)

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,038
    Thanks
    0
    Thanked 250 Times in 246 Posts
    If I may ask, why do you use checkboxes for this? Why not use hyperlinks? Do you need to submit the page and read the checked item(s) from the server-side?

    And besides, it is recommended to use label for the checkbox text. And clicking the label should check/uncheck the checkbox.

    Code:
    <label><input type="checkbox" value="shoulder_international.html" onclick="select_menu(this)" />Shoulder Bags</label>
    or

    Code:
    <input type="checkbox" id="intl" value="shoulder_international.html" onclick="select_menu(this)" /><label for="intl">Shoulder Bags</label>

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    If I may ask, why do you use checkboxes for this? Why not use hyperlinks? Do you need to submit the page and read the checked item(s) from the server-side?

    And besides, it is recommended to use label for the checkbox text. And clicking the label should check/uncheck the checkbox.

    Code:
    <label><input type="checkbox" value="shoulder_international.html" onclick="select_menu(this)" />Shoulder Bags</label>
    or

    Code:
    <input type="checkbox" id="intl" value="shoulder_international.html" onclick="select_menu(this)" /><label for="intl">Shoulder Bags</label>
    Hi Glenn,
    Thanks for your reply.
    I'm using check boxes to add a bit of variety to the webpage design instead of continually using plain hyperlinks.
    There is no server side information gathered at all. On clicking the check boxes the user is taken to the relevant page.
    Thanks,
    Nonye
    Last edited by nonye; 09-20-2013 at 08:29 PM.

  • #5
    New Coder
    Join Date
    Feb 2010
    Posts
    21
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Hi Xelawho,

    Thanks so much for your suggestions. I've taken it on board and it works like a dream...no more dodgy pageloading!

    You're awesome

    Nonye

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,038
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Quote Originally Posted by nonye View Post
    I'm using check boxes to add a bit of variety to the webpage design instead of continually using plain hyperlinks.
    You can style the links with CSS to make it not plain but making checkboxes totally act different as links is against UI design guidelines. You are changing what a checkbox control is intended for.


  •  

    Posting Permissions

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