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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Go to a specific url based upon different radio button group combinations

    I wonder if anyone can help since I'm a bit of a dunce when javascript gets involved. I have a page that has three radio button groups "style" "colour" and "delivery location", each of these with several options. If the user selects style 1 and colour 1 and destination 1 I want to go to a specific url. If the user selects style 1 and colour 2 and destination 1 I want to go to a different url. If the user selects style 2 and colour 3 and destination 2 I want to go to yet another url. and so on.

    I've got this bit of code which doesn't quite do what I need (though it does at least send you to a url if you select one option of each of the three radio button groups) ... but I don't know how to impose the code to test the many various individual radio button combinations. Here is the code in a test html page ...

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>Validate List Box and call URL using Radio Box Combinationsu</title>
    <style type="text/css">
    .ex_table { font-family:Verdana, Geneva, sans-serif;font-size:12px; }
    .normal_p {
        color:#000000;
    }
    .error_p {
        color:#F00;
    }
    </style>
    <script type="text/JavaScript">
    function select_radio_button(group_p) {
        document.getElementById(group_p).className='normal_p';
    }
    
    function is_selected(rb_group,lbl_info) {
        var radio_group =document.getElementsByName(rb_group);
        for(var x=0;x<radio_group.length;x++) {
            if(radio_group[x].checked) {
                document.getElementById(lbl_info).className='normal_p';
                return 0;
            }
        }
        document.getElementById(lbl_info).className='error_p';
        return 1;
    }
    
    function validate_radiobutton_group() {
        var error=0;
    
        error+=is_selected("product_style","boot_style");
        error+=is_selected("product_colour","boot_colour");
        error+=is_selected("delivered_to","country");
    
        if(error>0) {
            alert("You've not selected either the Style, Colour or Delivery Country");
            return false;
        } else {
            return true;
        }
    }
    </script>
    </head>
    <body>
    <?php
    
    $url = false;
    
    
    if(isset($_POST['product_style']) && isset($_POST['product_colour']) && isset($_POST['delivered_to'])) $url = '../index.html';
    elseif(isset($_POST['product_style'])) $url = '../index.htm';
    elseif(isset($_POST['product_colour'])) $url = '../not found.html'; 
    if($url) echo '
        <script type="text/javascript" language="javascript">
          window.open("' . $url . '", target="_self"); 
        </script>';
    ?>
    
    <form  action="<?php echo $_SERVER['PHP_SELF'];?>" id="radio_button_group_validation_1" name="radio_button_group_validation_1" action="#" method="post" onSubmit="JavaScript:return validate_radiobutton_group();">
    <table border="0" class="ex_table"><tbody>
    <tr>
    <td colspan="6" align="left">Pick your criteria</td></tr>
    <tr>
    <td align="right">Select a Style:</td>
    <td><p id="boot_style">
    <label><input type="radio" name="product_style" onChange="JavaScript:select_radio_button('boot_style');" value="1" id="product_style_0">Style A</label>
    &nbsp;
    <label><input type="radio" name="product_style" onChange="JavaScript:select_radio_button('boot_style');" value="2" id="product_style_1">Style B</label>
    &nbsp;
    <label><input type="radio" name="product_style" onChange="JavaScript:select_radio_button('boot_style');" value="3" id="product_style_2">Style C</label>
    &nbsp;
    </p></td>
    <td colspan="2" rowspan="3">&nbsp;</td>
    </tr>
    <tr>
    <td align="right">Select Colour:</td>
    <td><p id="boot_colour">
    <label>
    <input type="radio" name="product_colour" onChange="JavaScript:select_radio_button('boot_colour');" value="1" id="product_colour_0">
    Green</label>
    
    <label>
    <input type="radio" name="product_colour" onChange="JavaScript:select_radio_button('boot_colour');" value="2" id="product_colour_1">
    Navy Blue</label>
    &nbsp;
    <label>
    <input type="radio" name="product_colour" onChange="JavaScript:select_radio_button('boot_colour');" value="3" id="product_colour_2">
    Black</label>
    <br />
    </p></td>
    </tr>
    <tr>
    <td align="right">Delivered To:</td>
    <td><p id="country">
    <label>
    <input type="radio" onChange="JavaScript:select_radio_button('country');" name="delivered_to" value="1" id="delivered_to_0">
    UK</label>
    &nbsp;
    <label>
    <input type="radio" onChange="JavaScript:select_radio_button('country');" name="delivered_to" value="2" id="delivered_to_1">
    Euro Zone</label>
    <br>
    </p></td>
    </tr>
    
    <tr>
    <td align="right">&nbsp;</td>
    <td><input type="submit" name="btn_submit2" id="btn_submit2" value="Submit a combination above"></td>
    </tr>
    <tr>
    <td colspan="4" align="right">&nbsp;</td>
    </tr>
    </tbody>
    </table>
    </form>
    
    
    </body>
    </html>
    Can anybody assist please? .. it would be a great help. Thanks Dave

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Code:
    $url = '../not found.html'
    I'd recommend not using spaces in filenames. If you must separate words, use "notFound.html" or "not_found.html".

    Code:
    onChange="JavaScript:select_radio_button('boot_style');"
    You can remove JavaScript: from this - it's already JavaScript.

    You are passing the same argument to the function ('boot_style'). If you want to build a dynamic URL from the options, change the values of each argument to a specific part of the URL and concatenate, then make that the URL to redirect to.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • Users who have thanked WolfShade for this post:

    Shooter (06-03-2013)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,211
    Thanks
    23
    Thanked 605 Times in 604 Posts
    Some recommendations of my own.
    Re-think going to 18 different urls!!! This is ridiculous. What are you going to do on each of these pages? You can use js on the destination page to display different styles and colors.

    I changed your code. Took out what is not needed and used js to verify and control the choices and changed the code that the form submits to, to php. Used a hidden field for IE form submit. I didn't put a switch in it to pick 18 different urls, but if you want want it I can add it.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>Validate List Box and call URL using Radio Box Combinationsu</title>
    <style type="text/css">
    .ex_table { font-family:Verdana, Geneva, sans-serif;font-size:12px; }
    .normal_p {
        color:#000000;
    }
    .error_p {
        color:#F00;
    }
    </style>
    <script type="text/JavaScript">
    function validate_radiobutton_group() {
    if((myform.product_style[0].checked == false) && (myform.product_style[1].checked == false) && (myform.product_style[2].checked == false)){
    	document.getElementById('style_mess').innerHTML = 'Please select a style';
    	return false;
    }
    if((myform.product_colour[0].checked == false) && (myform.product_colour[1].checked == false) && (myform.product_colour[2].checked == false)){
    	document.getElementById('colour_mess').innerHTML = 'Please select a colour';
    	return false;
    }
    if((myform.delivered_to[0].checked == false) && (myform.delivered_to[1].checked == false)){
    	document.getElementById('destination_mess').innerHTML = 'Please select a destination';
    	return false;
    }
    return true;
    }
    </script>
    </head>
    <body>
    <?php
    if(isset($_POST['Msoft'])){
    	if($_POST['Msoft'] == "junk")
    		$style = $_POST['product_style'];
    		$colour = $_POST['product_colour'];
    		$destination = $_POST['delivered_to'];
    	echo $style.' -- '.$colour.' -- '.$destination;  // JUST TO SHOW YOU WHAT YOU GOT, IFS OR A SWITCH FROM HERE.
    }
    
    ?>
    
    <form  action="<?php echo $_SERVER['PHP_SELF'];?>" id="myform" method="post" onSubmit="JavaScript:return validate_radiobutton_group();">
    <table border="0" class="ex_table">
    	<tr><td colspan="3">Pick your criteria</td></tr>
    	<tr>
    	<td>Select a Style:</td>
    	<td onchange="document.getElementById('style_mess').innerHTML = '';">
    	<input type="radio" name="product_style" value="1">Style A
    	<input type="radio" name="product_style" value="2">Style B
    	<input type="radio" name="product_style" value="3">Style C
    	</td>
    	<td id="style_mess" style="color:Red;"></td>
    	</tr>
    
    	<tr>
    	<td>Select Colour:</td>
    	<td onchange="document.getElementById('colour_mess').innerHTML = '';">
    	<input type="radio" name="product_colour" value="1">Green
    	<input type="radio" name="product_colour" value="2">Navy Blue
    	<input type="radio" name="product_colour" value="3">Black
    	</td>
    	<td id="colour_mess" style="color:Red;"></td>
    	</tr>
    
    	<tr>
    	<td>&nbsp;Delivered To:</td>
    	<td onchange="document.getElementById('destination_mess').innerHTML = '';">
    	<input type="radio" name="delivered_to" value="1">UK
    	<input type="radio" name="delivered_to" value="2">Euro Zone
    	<input type="hidden" name="Msoft" value="junk">
    	</td>
    	<td id="destination_mess" style="color:Red;"></td>
    	<tr>
    	<td align="right"></td>
    	<td><input type="submit" name="btn_submit2" id="btn_submit2" value="Submit a combination above"></td>
    	</tr>
    </table>
    </form>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    Shooter (06-03-2013)

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    18 URLs does seem somewhat excessive, but it is possible with this.
    Modify with your URL combinations in the switch logic
    and uncomment the 'location.href = ' setting.

    Code:
    <!doctype html>
    <html>
    <meta charset="utf-8">
    <head>
    <title> Radiobutton Combinations </title>
    <script type="text/javascript">
     function getRBtnName(GrpName) {
       var sel = document.getElementsByName(GrpName);
       var fnd = -1;
       var str = '';
       for (var i=0; i<sel.length; i++) {
         if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
       }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
       return str;
     } 
    
    var grps = '';
    var link_to = '';
    
     function validate_radiobutton_group() {
       var grp1 = getRBtnName('product_style');
       var grp2 = getRBtnName('product_colour');
       var grp3 = getRBtnName('delivered_to');
       grps = grp1+grp2+grp3;
       if ((grps == '') || (grps.length < 3)) { alert('Missing a choice'); return false; }
    
       switch (grps) {
         case '111' : link_to = 'http://www.somewhere111.com'; break;
         case '112' : link_to = 'http://www.somewhere112.com'; break;
         case '121' : link_to = 'http://www.somewhere121.com'; break;
         case '122' : link_to = 'http://www.somewhere122.com'; break;
         case '131' : link_to = 'http://www.somewhere131.com'; break;
         case '132' : link_to = 'http://www.somewhere132.com'; break;
    
         case '211' : link_to = 'http://www.somewhere211.com'; break;
         case '212' : link_to = 'http://www.somewhere212.com'; break;
         case '221' : link_to = 'http://www.somewhere221.com'; break;
         case '222' : link_to = 'http://www.somewhere222.com'; break;
         case '231' : link_to = 'http://www.somewhere231.com'; break;
         case '232' : link_to = 'http://www.somewhere232.com'; break;
    
         case '311' : link_to = 'http://www.somewhere311.com'; break;
         case '312' : link_to = 'http://www.somewhere312.com'; break;
         case '321' : link_to = 'http://www.somewhere321.com'; break;
         case '322' : link_to = 'http://www.somewhere322.com'; break;
         case '331' : link_to = 'http://www.somewhere331.com'; break;
         case '332' : link_to = 'http://www.somewhere332.com'; break;
    
         default : alert('Invalid submission');  break;  // should never get to here
       }
       return true;
     }
     function link_to_site() {
       var flag = validate_radiobutton_group();
       document.getElementById('dbug').innerHTML = grps + ' : ' + link_to;
       if (flag) { alert('Will go to: '+link_to);  return false; // window.location.href = link_to; return false;
          } else { alert('Invalid link address'); }
       return flag;
     }
    
    </script>
    </head>
    <body>
    <div id="dbug" style="background-color:yellow">For testing</div>
    
    <form  action="" id="myform" method="post" onSubmit="return link_to_site()">
    <table border="0" class="ex_table">
     <tr>
      <td colspan="3">Pick your criteria</td>
     </tr>
     <tr>
      <td>Select a Style:</td>
      <td onchange="document.getElementById('style_mess').innerHTML = '';">
       <input type="radio" name="product_style" value="1">Style A
       <input type="radio" name="product_style" value="2">Style B
       <input type="radio" name="product_style" value="3">Style C
      </td>
      <td id="style_mess" style="color:Red;"></td>
     </tr>
    
     <tr>
      <td>Select Colour:</td>
      <td onchange="document.getElementById('colour_mess').innerHTML = '';">
       <input type="radio" name="product_colour" value="1">Green
       <input type="radio" name="product_colour" value="2">Navy Blue
       <input type="radio" name="product_colour" value="3">Black
      </td>
      <td id="colour_mess" style="color:Red;"></td>
     </tr>
    
     <tr>
      <td>&nbsp;Delivered To:</td>
      <td onchange="document.getElementById('destination_mess').innerHTML = '';">
       <input type="radio" name="delivered_to" value="1">UK
       <input type="radio" name="delivered_to" value="2">Euro Zone
       <input type="hidden" name="Msoft" value="junk">
      </td>
      <td id="destination_mess" style="color:Red;"></td>
     <tr>
      <td align="right"></td>
      <td><input type="submit" id="btn_submit2" value="Submit a combination above"></td>
     </tr>
    </table>
    </form>
    
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    Shooter (06-03-2013)

  • #5
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Some recommendations of my own.
    Re-think going to 18 different urls!!! This is ridiculous. What are you going to do on each of these pages? You can use js on the destination page to display different styles and colors.

    I changed your code. Took out what is not needed and used js to verify and control the choices and changed the code that the form submits to, to php. Used a hidden field for IE form submit. I didn't put a switch in it to pick 18 different urls, but if you want want it I can add it.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>Validate List Box and call URL using Radio Box Combinationsu</title>
    <style type="text/css">
    .ex_table { font-family:Verdana, Geneva, sans-serif;font-size:12px; }
    .normal_p {
        color:#000000;
    }
    .error_p {
        color:#F00;
    }
    </style>
    <script type="text/JavaScript">
    function validate_radiobutton_group() {
    if((myform.product_style[0].checked == false) && (myform.product_style[1].checked == false) && (myform.product_style[2].checked == false)){
    	document.getElementById('style_mess').innerHTML = 'Please select a style';
    	return false;
    }
    if((myform.product_colour[0].checked == false) && (myform.product_colour[1].checked == false) && (myform.product_colour[2].checked == false)){
    	document.getElementById('colour_mess').innerHTML = 'Please select a colour';
    	return false;
    }
    if((myform.delivered_to[0].checked == false) && (myform.delivered_to[1].checked == false)){
    	document.getElementById('destination_mess').innerHTML = 'Please select a destination';
    	return false;
    }
    return true;
    }
    </script>
    </head>
    <body>
    <?php
    if(isset($_POST['Msoft'])){
    	if($_POST['Msoft'] == "junk")
    		$style = $_POST['product_style'];
    		$colour = $_POST['product_colour'];
    		$destination = $_POST['delivered_to'];
    	echo $style.' -- '.$colour.' -- '.$destination;  // JUST TO SHOW YOU WHAT YOU GOT, IFS OR A SWITCH FROM HERE.
    }
    
    ?>
    
    <form  action="<?php echo $_SERVER['PHP_SELF'];?>" id="myform" method="post" onSubmit="JavaScript:return validate_radiobutton_group();">
    <table border="0" class="ex_table">
    	<tr><td colspan="3">Pick your criteria</td></tr>
    	<tr>
    	<td>Select a Style:</td>
    	<td onchange="document.getElementById('style_mess').innerHTML = '';">
    	<input type="radio" name="product_style" value="1">Style A
    	<input type="radio" name="product_style" value="2">Style B
    	<input type="radio" name="product_style" value="3">Style C
    	</td>
    	<td id="style_mess" style="color:Red;"></td>
    	</tr>
    
    	<tr>
    	<td>Select Colour:</td>
    	<td onchange="document.getElementById('colour_mess').innerHTML = '';">
    	<input type="radio" name="product_colour" value="1">Green
    	<input type="radio" name="product_colour" value="2">Navy Blue
    	<input type="radio" name="product_colour" value="3">Black
    	</td>
    	<td id="colour_mess" style="color:Red;"></td>
    	</tr>
    
    	<tr>
    	<td>&nbsp;Delivered To:</td>
    	<td onchange="document.getElementById('destination_mess').innerHTML = '';">
    	<input type="radio" name="delivered_to" value="1">UK
    	<input type="radio" name="delivered_to" value="2">Euro Zone
    	<input type="hidden" name="Msoft" value="junk">
    	</td>
    	<td id="destination_mess" style="color:Red;"></td>
    	<tr>
    	<td align="right"></td>
    	<td><input type="submit" name="btn_submit2" id="btn_submit2" value="Submit a combination above"></td>
    	</tr>
    </table>
    </form>
    </body>
    </html>
    Thanks a million for your input, and I agree about the number of permutations is daft - but it's to simplify an old legacy site that has many, many more combinations than that!
    Regardless you help is deeply appreciated and it's very good of you to assist.
    Thanks again,

  • #6
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    18 URLs does seem somewhat excessive, but it is possible with this.
    Modify with your URL combinations in the switch logic
    and uncomment the 'location.href = ' setting.

    Code:
    <!doctype html>
    <html>
    <meta charset="utf-8">
    <head>
    <title> Radiobutton Combinations </title>
    <script type="text/javascript">
     function getRBtnName(GrpName) {
       var sel = document.getElementsByName(GrpName);
       var fnd = -1;
       var str = '';
       for (var i=0; i<sel.length; i++) {
         if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
       }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
       return str;
     } 
    
    var grps = '';
    var link_to = '';
    
     function validate_radiobutton_group() {
       var grp1 = getRBtnName('product_style');
       var grp2 = getRBtnName('product_colour');
       var grp3 = getRBtnName('delivered_to');
       grps = grp1+grp2+grp3;
       if ((grps == '') || (grps.length < 3)) { alert('Missing a choice'); return false; }
    
       switch (grps) {
         case '111' : link_to = 'http://www.somewhere111.com'; break;
         case '112' : link_to = 'http://www.somewhere112.com'; break;
         case '121' : link_to = 'http://www.somewhere121.com'; break;
         case '122' : link_to = 'http://www.somewhere122.com'; break;
         case '131' : link_to = 'http://www.somewhere131.com'; break;
         case '132' : link_to = 'http://www.somewhere132.com'; break;
    
         case '211' : link_to = 'http://www.somewhere211.com'; break;
         case '212' : link_to = 'http://www.somewhere212.com'; break;
         case '221' : link_to = 'http://www.somewhere221.com'; break;
         case '222' : link_to = 'http://www.somewhere222.com'; break;
         case '231' : link_to = 'http://www.somewhere231.com'; break;
         case '232' : link_to = 'http://www.somewhere232.com'; break;
    
         case '311' : link_to = 'http://www.somewhere311.com'; break;
         case '312' : link_to = 'http://www.somewhere312.com'; break;
         case '321' : link_to = 'http://www.somewhere321.com'; break;
         case '322' : link_to = 'http://www.somewhere322.com'; break;
         case '331' : link_to = 'http://www.somewhere331.com'; break;
         case '332' : link_to = 'http://www.somewhere332.com'; break;
    
         default : alert('Invalid submission');  break;  // should never get to here
       }
       return true;
     }
     function link_to_site() {
       var flag = validate_radiobutton_group();
       document.getElementById('dbug').innerHTML = grps + ' : ' + link_to;
       if (flag) { alert('Will go to: '+link_to);  return false; // window.location.href = link_to; return false;
          } else { alert('Invalid link address'); }
       return flag;
     }
    
    </script>
    </head>
    <body>
    <div id="dbug" style="background-color:yellow">For testing</div>
    
    <form  action="" id="myform" method="post" onSubmit="return link_to_site()">
    <table border="0" class="ex_table">
     <tr>
      <td colspan="3">Pick your criteria</td>
     </tr>
     <tr>
      <td>Select a Style:</td>
      <td onchange="document.getElementById('style_mess').innerHTML = '';">
       <input type="radio" name="product_style" value="1">Style A
       <input type="radio" name="product_style" value="2">Style B
       <input type="radio" name="product_style" value="3">Style C
      </td>
      <td id="style_mess" style="color:Red;"></td>
     </tr>
    
     <tr>
      <td>Select Colour:</td>
      <td onchange="document.getElementById('colour_mess').innerHTML = '';">
       <input type="radio" name="product_colour" value="1">Green
       <input type="radio" name="product_colour" value="2">Navy Blue
       <input type="radio" name="product_colour" value="3">Black
      </td>
      <td id="colour_mess" style="color:Red;"></td>
     </tr>
    
     <tr>
      <td>&nbsp;Delivered To:</td>
      <td onchange="document.getElementById('destination_mess').innerHTML = '';">
       <input type="radio" name="delivered_to" value="1">UK
       <input type="radio" name="delivered_to" value="2">Euro Zone
       <input type="hidden" name="Msoft" value="junk">
      </td>
      <td id="destination_mess" style="color:Red;"></td>
     <tr>
      <td align="right"></td>
      <td><input type="submit" id="btn_submit2" value="Submit a combination above"></td>
     </tr>
    </table>
    </form>
    
    </body>
    </html>
    I'm most impressed and humbled by the fact that you bothered to take the time to help - it renews my faith in human nature! Your help is deeply appreciated and it's very good of you to assist.
    Thanks again,

  • #7
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    This is very close to the example I was after... I wonder...

    This is very close to the example I was after... I wonder do either of you know how to link these radio buttons to a library of images... instead of to various websites.??.. and so that onclick - or onchange - changes an image illustrating with the combinations.... that is, options on a design such as colour and pattern..

    I have 6x6x6x6 images that are numbered chronologically and would mean programming the buttons to follow these numbers - But I don't know where to begin on this bit of a JS or HTML? The images have a name and a number: i.e. product00000 - product00005 = is the first six options, and then product00006 - product00012 the second rows combination with the first... etc up until 36, when the cycle moves to the combination of the third options.. etc etc..etc...
    any ideas on a script to do this??

    J

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Do you have an URL where the images are located?


  •  

    Tags for this Thread

    Posting Permissions

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