PDA

View Full Version : Go to a specific url based upon different radio button group combinations



Shooter
May 24th, 2013, 10:42 AM
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 ...


<!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

WolfShade
May 24th, 2013, 01:42 PM
$url = '../not found.html'I'd recommend not using spaces in filenames. If you must separate words, use "notFound.html" or "not_found.html".


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.

sunfighter
May 24th, 2013, 05:02 PM
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.

<!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>

jmrker
May 24th, 2013, 10:43 PM
18 URLs does seem somewhat excessive, but it is possible with this. :eek:
Modify with your URL combinations in the switch logic
and uncomment the 'location.href = ' setting.



<!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>

Shooter
Jun 3rd, 2013, 04:38 PM
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.

<!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,

Shooter
Jun 3rd, 2013, 04:40 PM
18 URLs does seem somewhat excessive, but it is possible with this. :eek:
Modify with your URL combinations in the switch logic
and uncomment the 'location.href = ' setting.



<!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,

sheridan
Sep 30th, 2013, 03:12 PM
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

jmrker
Oct 1st, 2013, 06:33 AM
Do you have an URL where the images are located?