...
PDA

JavaScript check box issue

SteveH
07-16-2009, 10:28 AM
Hello

I have the following images on an HTML page:

<table border="0">
<tr valign="top" align="center">
<td width="175">
<div style="border-right: 1px solid blue;">
<a href="newXP\imagemenu\page1.html"><img src="WinXp_use.jpg" WIDTH=87 HEIGHT=54 title="XP logo" alt="XP"></a>
<p><b>Windows XP</b></p>
</div>
</td>

<td width="175">
<div style="border-right: 1px solid blue;">
<a href="newVista\imagemenu\page1.html"><img src="VistaLo.gif" WIDTH=55 HEIGHT=54 title="Vista logo" alt="Vista"></a>
<p><b>Windows Vista</b></p>
</div>

</td>

<td width="175">
<div style="border-right: 1px solid blue;">
<a href="win7\imagemenu\page1.html"><img src="7_logo.gif" WIDTH=87 HEIGHT=54 title="Windows 7 logo" alt="Windows 7"></a>
<p><b>Windows 7</b></p>
</div>
</td>

<td width="175">
<div style="border-right: 1px solid blue;">
<a href="newMac\imagemenu\page1.html"><img src="logo_Apple1_Red54.jpg" WIDTH=57 HEIGHT=54 title="Apple Mac logo" alt="Apple Mac"></a>
<p><b>Apple Mac</b></p>
</div>
</td>

</tr>
</table>

I have some JavaScript which asks the user to agree to the terms and conditions and when they do they move to the next page:

<script type="text/javascript">
<!--

function checkCheckBoxAgree(c){
if (c.agree_text.checked == false )
{
alert("Please accept the university's terms and conditions");
return false;
}else
return true;
}
//-->
</script>

and then this:

<form name="agreeform" action="#">
I agree to accept the terms and conditions of the MMU: <input name="agree_text" type="checkbox" value="0">
<a href="demo_tc_done.html" onclick="return checkCheckBoxAgree(document.forms['agreeform'])">click</a>

Most users will click on the image (above) which is appropriate to their operating system before checking the box asking them to accept the terms and conditions.

What I would like is when they click whichever image they get an alert box asking them to accept the terms and conditions (unless they have done so already). When they have chekced the 'accept' box, they will then need to click on the image again, but in the JavaScript code I have posted they are
taken to one particular Web page, namely demo_tc_done.html instead of that Web page appropriate to the image they have clicked on.

As each image in my code links to a different Web page, how would I do that?

Thanks for any help.

Steve
Amphiluke
07-16-2009, 12:01 PM
If I understand you correctly, this should help you
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function selectOS(sender) {
var agrfrm = document.getElementById("agreeform");
if (!agrfrm.agree_text.checked) {
if (confirm("Do you accept the university's terms and conditions?")) {
agrfrm.agree_text.checked = true;
document.getElementById("golink").href = sender.href;
return false;
} else {
return false;
}
} else {return true;}
}

function checkCheckBoxAgree(c){
if (c.agree_text.checked == false ) {
alert("Please accept the university's terms and conditions");
return false;
} else return true;
}
//-->
</script>
</head>
<body>
<table border="0">
<tr valign="top" align="center">
<td width="175">
<div style="border-right: 1px solid blue;">
<a href="newXP/cimagemenu/cpage1.html" onclick="return selectOS(this);"><img src="WinXp_use.jpg" WIDTH=87 HEIGHT=54 title="XP logo" alt="XP"></a>
<p><b>Windows XP</b></p>
</div>
</td>

<td width="175">
<div style="border-right: 1px solid blue;">
<a href="newVista/cimagemenu/cpage1.html" onclick="return selectOS(this);"><img src="VistaLo.gif" WIDTH=55 HEIGHT=54 title="Vista logo" alt="Vista"></a>
<p><b>Windows Vista</b></p>
</div>
</td>

<td width="175">
<div style="border-right: 1px solid blue;">
<a href="win7/cimagemenu/cpage1.html" onclick="return selectOS(this);"><img src="7_logo.gif" WIDTH=87 HEIGHT=54 title="Windows 7 logo" alt="Windows 7"></a>
<p><b>Windows 7</b></p>
</div>
</td>

<td width="175">
<div style="border-right: 1px solid blue;">
<a href="newMac/cimagemenu/cpage1.html" onclick="return selectOS(this);"><img src="logo_Apple1_Red54.jpg" WIDTH=57 HEIGHT=54 title="Apple Mac logo" alt="Apple Mac"></a>
<p><b>Apple Mac</b></p>
</div>
</td>
</tr>
</table>

<form id="agreeform" name="agreeform" action="#">
I agree to accept the terms and conditions of the MMU: <input name="agree_text" type="checkbox" value="0">
<a id="golink" href="demo_tc_done.html" onclick="return checkCheckBoxAgree(document.forms['agreeform'])">click</a>
</form>

</body>

</html>
SteveH
07-16-2009, 01:09 PM
Hello Amphiluke

Many thanks for your speedy reply!:)

I have got it to work, great!

There are just one or two small things: I have changed the links as follows:

<a href="newMac\imagemenu\page1.html" onclick="return selectOS(this);"><img src="logo_Apple1_Red54.jpg" WIDTH=57 HEIGHT=54 title="Apple Mac logo" alt="Apple Mac"></a>

It is not:

<a href="newMac/cimagemenu/cpage1.html" onclick="return selectOS(this);"><img src="logo_Apple1_Red54.jpg" WIDTH=57 HEIGHT=54 title="Apple Mac logo" alt="Apple Mac"></a>

I am developing these pages on my desktop - they won't be used on a server so I think your use of / needs to be \.

The other thing, is the

<a href="demo_tc_done.html" onclick="return checkCheckBoxAgree(document.forms['agreeform'])">click</a>

in my original script simply made redundant? Do I just ignore it?

Many thanks again for all your help.

Steve

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum