www.webdeveloper.com
Results 1 to 4 of 4

Thread: Tricky Javascript checkbox redirect

  1. #1
    Join Date
    Apr 2011
    Posts
    8

    Tricky Javascript checkbox redirect

    Hi all,

    The following script loads the 1-3.htm page if one, two or three checkboxes have been checked, the 4-6.htm page if four, five or six, and the 7-9.htm page if seven, eight or nine checkboxes have been checked.

    My question: how to make the script load a page depending on WHICH checkboxes have been checked, not how many? For example if box 1 and box 4 are checked, it loads page 1-4.htm. If boxes 2 and 6 are checked it loads page 2-6.htm.

    Many thanks!

    *** The Code****

    <html>

    <head>

    <script language="JavaScript"><!--
    function redirect (form, group) {
    var numberClicked = 0;
    for (var i=0; i<form.elements.length; i++) {
    if (form.elements[i].name == group && form.elements[i].type == 'checkbox' && form.elements[i].checked)
    numberClicked++;
    }
    if (numberClicked <= 3) url = '1-3.htm'
    else if (numberClicked <= 6) url = '4-6.htm';
    else url = '7-9.htm';
    location.href = url;
    return false;
    }
    //--></script>

    </head>

    <body>

    <form onSubmit="return redirect(this,'group1')">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="submit" value="Submit">
    </form>

    </body>

    </html>

  2. #2
    Join Date
    Nov 2010
    Posts
    1,058
    is this what you mean?
    Code:
    <head>
    
    <script type="text/javascript">
    function redirect (form, group) {
    var numberClicked = [];
    for (var i=0; i<form.elements.length; i++) {
    if (form.elements[i].name == group && form.elements[i].type == 'checkbox' && form.elements[i].checked)
    numberClicked.push(i);
    }
    var min=Math.min.apply(Math, numberClicked)+1;
    var max=Math.max.apply(Math, numberClicked)+1;
    location.href=min+"-"+max+".htm"
    }
    </script>
    
    </head>
    
    <body>
    
    <form>
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="checkbox" name="group1">
    <input type="button" onclick="redirect(this.form,'group1')" value="Submit">
    </form>
    
    </body>

  3. #3
    Join Date
    Nov 2010
    Posts
    1,058
    or, more simply...
    Code:
    <script type="text/javascript">
    function redirect (form, group) {
    var min;
    var max;
    for (var i=0; i<form.elements.length; i++) {
    if (form.elements[i].name == group && form.elements[i].type == 'checkbox' && form.elements[i].checked){
    if(!min){
    min=i+1;
    	}
    max=i+1;
    	}
    }
    location.href=min+"-"+max+".htm"
    }
    </script>

  4. #4
    Join Date
    Apr 2011
    Posts
    8
    Xelawho.... Works, just what I wanted! Many thanks!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles