PDA

View Full Version : Tick multiple checkboxes for navigation?

jaffanz
04-15-2003, 09:34 AM
Hi,

I've trawled the net for a starter on this problem but didn't get anywhere.

I'm trying to make a page that sends the user to different HTML pages, depending on which checkboxes they have ticked. This is actually for a teaching situation: the student will be asked a question, then presented with 12 options, of which they are expected to choose 4. The feedback they get depends on which combination they choose.

For example:

There will be 12 items in the checkbox list. If they tick (for example) items 1, 7, and 8 and then "Submit", they will be directed to page1.html. If they select items 2, 8, 9 and 10, I want them to be directed to page2.html, and so on. Any other combinations, and they will be directed to page3.

Can anyone give me a starter on this? Thanks in advance for any help.

:-):confused:
glenngv
04-15-2003, 10:00 AM
<html>
<head>
<script language="javascript">
function redirectPage(f){
if (f.elements["chk1"].checked && f.elements["chk7"].checked && f.elements["chk8"].checked) location.href='page1.html';
else if (f.elements["chk2"].checked && f.elements["chk8"].checked && f.elements["chk9"].checked && f.elements["chk10"].checked) location.href='page2.html';
else location.href='page3.html';
}
</script>
</head>
<body>
<form name="myform">
<input type="checkbox" name="chk1" value="1"><br>
<input type="checkbox" name="chk2" value="2"><br>
<input type="checkbox" name="chk3" value="3"><br>
<input type="checkbox" name="chk4" value="4"><br>
<input type="checkbox" name="chk5" value="5"><br>
<input type="checkbox" name="chk6" value="6"><br>
<input type="checkbox" name="chk7" value="7"><br>
<input type="checkbox" name="chk8" value="8"><br>
<input type="checkbox" name="chk9" value="9"><br>
<input type="checkbox" name="chk10" value="10"><br>
<input type="checkbox" name="chk11" value="11"><br>
<input type="checkbox" name="chk12" value="12"><br>

<input type="button" value="Submit" onclick="redirectPage(this.form)"><br>
</form>
</body>
</html>
jaffanz
04-15-2003, 10:17 AM
I'm absolutely astounded ... 2 hours + searching on the web, and less than an hour to get a reply on here.

Thankyou, thankyou, thankyou. This is exactly what I needed!

Cheers from New Zealand :-)

Jaffanz
glenngv
04-15-2003, 10:27 AM
you can't find exactly like that on the net. what you need to look for and know is how to reference the form elements and use their properties/attributes.
here is a quick reference.

http://www.devguru.com/Technologies/ecmascript/quickref/javascript_intro.html

i bet you can find tons of sites like that. :D
cheesebagpipe
04-15-2003, 09:41 PM
Here's something I've used that's a little more flexible: :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var URLs = { //new URLs, keyed to checkbox value combinations
'agh' : 'javascript:alert("page1.html")' , //demo only, use real url
'bhij' : 'javascript:alert("page2.html")'
}

function chkredir(oForm) {
var el, i = 0, str = '';
while (el = oForm.elements[i++])
if (el.type == 'checkbox' && el.checked) str += el.value;
if (URLs[str]) location = URLs[str];
else location = 'javascript:alert("page3.html")';
}

</script>
</head>
<body>
<form>
<input type="checkbox" value="a" /> item 1<br />
<input type="checkbox" value="b" /> item 2<br />
<input type="checkbox" value="c" /> item 3<br />
<input type="checkbox" value="d" /> item 4<br />
<input type="checkbox" value="e" /> item 5<br />
<input type="checkbox" value="f" /> item 6<br />
<input type="checkbox" value="g" /> item 7<br />
<input type="checkbox" value="h" /> item 8<br />
<input type="checkbox" value="i" /> item 9<br />
<input type="checkbox" value="j" /> item 10<br />
<input type="checkbox" value="k" /> item 11<br />
<input type="checkbox" value="l" /> item 12<br /><br />
<input type="button" value="GO!" onclick="return chkredir(this.form)" />
</form>
</body>
</html>


http://javascriptkit.com/javatutors/oopjs.shtml