Multiple radionbuttons with multiple random links

Quickies · 02-08-2009, 09:19 AM

Hi all

I'm trying to make a kind of magic 8 ball site. Instead of just displaying a image or text, I'm trying to load a page into an iframe, where I'll play a flash video.
I've found two script, which I've modified, and tried to combine.
Since the response can be a bit different, depending on question type (when, what, who etc.), I would like to use a radio button to determine what kind of question type I'm dealing with. When a radiobutton is selected, there should only be one submit botton.
I've made an example, which works, but here I have made a line for each question type. Code is between WORKING START and WORKING END.
What I would like it to look like, is the code between NOT WORKING and NOT WORKING END. I've tried to combine the scripts, but I do not get link from script one displayed.

I would also like:
1. If no radio button is selected, then they are sent to "nothingasked.php".
2. The input=text have to be required

So here's what I've done so far:

html>
<head>
<title>Ask me anything</title>
<script>
// script one
function go_to(url) {
window.frames['ask'].location = url;
}

function rand_link_a() {

var a;
a = 1+Math.round(Math.random()*7); // a = random number between 1-7
if (a==1) go_to("yes.php");
if (a==2) go_to("ok.php");
if (a==3) go_to("no.php");
if (a==4) go_to("eating.php");
if (a==5) go_to("forgetit.php");
if (a==6) go_to("cool.php");
if (a==7) go_to("working.php");

}
function rand_link_b() {

var b;
b = 1+Math.round(Math.random()*7); // a = random number between 1-7
if (b==1) go_to("yes1.php");
if (b==2) go_to("ok1.php");
if (b==3) go_to("no1.php");
if (b==4) go_to("eating1.php");
if (b==5) go_to("forgetit1.php");
if (b==6) go_to("cool1.php");
if (b==7) go_to("working1.php");

}
// script two
var destHREF="nothingasked.php"

</script>
</head>
<body>
<table border="0">
<tr>
<td> </td>
</tr>
<tr>
<td><p><iframe name="ask" src="main.php" width="200px" height="100px">
Your browser does not support inline frames or is currently configured not to display inline frames</iframe></p></td>
</tr>
</table>
<form name="form1">

WORKING START
<table border="0">
<tr>
<td width="50px">Who </td>
<td><input type="text" name="question" class="inputbox" style="width: 300px;"> ? <a onclick="rand_link_a()">Ask me</a></td>
</tr>
<tr>
<td width="50px">What </td>
<td><input type="text" name="question" class="inputbox" style="width: 300px;"> ? <a onclick="rand_link_b()">Ask me</a></td>
</tr>
</table>
WORKING END

<br/><br/>

NOT WORKING START
<br/>
<b>Choose type of question</b>
<br/>
<input type="radio" name="destination" value="who" onClick="destHREF='rand_link_a()'"> Who
<input type="radio" name="destination" value="what" onClick="destHREF='rand_link_b()'"> What <br><br>
Question <input type="text" name="question" class="inputbox" style="width: 300px;"> ?
<P><A HREF="" target="ask" onClick="this.href=destHREF"> <B>Ask me</B></A>
NOT WORKING END

</form>
</body>
</html>

Hope it makes sence, what I'm trying to do, and hope some one can help.

Thanx in advance

snowieken · 02-08-2009, 10:51 PM

I think it's easier if you just get the selected value of the radio buttons and go from there. Try to delete your two rand_link functions and do the following:

Code:

function launchGoto() {

	// First we check which radio button is chosen
        var question;
	for (i = 0; i <document.form1.destination.length; i++) {
		if (document.form1.destination[i].checked) {
			question=document.form1.destination[i].value;
		}
	}
	
	// Now we determine the link, according to the chosen radio button
        var a = 1+Math.round(Math.random()*7);
	switch(question) {
	 case "who":
          if (a==1) go_to("yes.php");
          if (a==2) go_to("ok.php");
          if (a==3) go_to("no.php");
          if (a==4) go_to("eating.php");
          if (a==5) go_to("forgetit.php");
          if (a==6) go_to("cool.php");
          if (a==7) go_to("working.php");
	 break;
	 case "what":
          if (a==1) go_to("yes1.php");
          if (a==2) go_to("ok1.php");
          if (a==3) go_to("no1.php");
          if (a==4) go_to("eating1.php");
          if (a==5) go_to("forgetit1.php");
          if (a==6) go_to("cool1.php");
          if (a==7) go_to("working1.php");
	 break;
	}
}

Then, in your HTML markup, change the following:

Code:

<b>Choose type of question</b>
<br/>
<input type="radio" name="destination" value="who"">Who
<input type="radio" name="destination" value="what">What <br><br>
Question <input type="text" name="question" class="inputbox" style="width: 300px;"> ?
<P><A HREF="" target="ask" onClick="launchGoto();"> <B>Ask me</B></A>

Quickies · 02-15-2009, 12:25 PM

Hi

Thanks for your reply.

Something is not working for me though. When I click the ask me link, it load the entire page into the ask frame, instead of the random page. I've tried to figure it out, but guess my skills in scripts arren't good enough yet. I've tried to upload the page too, just in case there was something wrong on my local server, but no. The page looks like this now:

function go_to(url) {
window.frames['ask'].location = url;
}

function launchGoto() {

// First we check which radio button is chosen
var question;
for (i = 0; i <document.form1.destination.length; i++) {
if (document.form1.destination[i].checked) {
question=document.form1.destination[i].value;
}
}

// Now we determine the link, according to the chosen radio button
var a = 1+Math.round(Math.random()*7);
switch(question) {
case "who":
if (a==1) go_to("yes.php");
if (a==2) go_to("ok.php");
if (a==3) go_to("no.php");
if (a==4) go_to("eating.php");
if (a==5) go_to("forgetit.php");
if (a==6) go_to("cool.php");
if (a==7) go_to("working.php");
break;
case "what":
if (a==1) go_to("yes1.php");
if (a==2) go_to("ok1.php");
if (a==3) go_to("no1.php");
if (a==4) go_to("eating1.php");
if (a==5) go_to("forgetit1.php");
if (a==6) go_to("cool1.php");
if (a==7) go_to("working1.php");
break;
}
}
</script>
</head>

<body>
<div id="page">
<table class="center">
<tr>
<td class="center">
<h1>Ask me anything</h1><br/>
<form name="form1">
<br/>
<iframe name="ask" src="main.php" width="200px" height="100px" scrolling="no">Your browser does not support inline frames or is currently configured not to display inline frames</iframe><br/><br/>
<b>Choose type of question</b>
<br/>
<input type="radio" name="destination" value="who">Who
<input type="radio" name="destination" value="what">What <br/><br/>
Question <input type="text" name="question" class="inputbox" style="width: 300px;"> ?<br/><br/>
<a href="" target="ask" onClick="launchGoto();"> <b>Ask me</b></a>
</form><br/><br/>
</td>
</tr>
</table>

Hope you can see where the mistake is.

And thanx again