...

View Full Version : Show layers based on conditions



Ravenwise
07-12-2005, 01:35 PM
I'm building a web page that has a registration form built into a layer. The layer is to be hidden until three questions are answered correctly. Two of the questions are radio buttons and one is a text box looking for a value greater than 100,000. I have been able show/hide the layer using a single radio button or another radio button, but so far unable to show based on both radio buttons being used much less both radio button and the textbox. Can anyone offer help on what I would need to do to check the three condition and show hide the layer based on the button click? I'm pretty sure I would call a function but not sure how to pass the three form values for compairison.


<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>


<script language="JavaScript" type="text/JavaScript">
<!--

function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
</head>

<body>

<form name="Form1">
<table width="250" border="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Question 1 </td>
<td><input type="radio" name="R1" onclick="doIt1(1)">
Yes
</td>
<td><input type="radio" name="R1" onclick="doIt1(0)">
No
</td>
</tr>
<tr>
<td>Question 2 </td>
<td><input type="radio" name="R2" onclick="doIt2(1)">
Yes </td>
<td><input type="radio" name="R2" onclick="doIt2(0)">
No </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Value</td>
<td colspan="2"><input type="text" name="textfield"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>
<input name="Button" type="button" onClick="MM_callJS('doIt1');MM_callJS('doIt2')" value="Button">
</p>
</form>

<div id="myLayer"
style="position:absolute;top:175px;left:150px;visibility:hidden">
This is a layer </div>

<script language="JavaScript" type="text/JavaScript">

function doIt1(value)

{
switch(value)
{
case 0:
document.getElementById('myLayer').style.visibility = 'hidden';
alert("Question 1 must be yes to continue");
case 1:
document.getElementById('myLayer').style.visibility = 'visible';

break;
}}
function doIt2(value)

{
switch(value)
{
case 0:
document.getElementById('myLayer').style.visibility = 'hidden';
alert("Question 2 must be yes to continue");
case 1:
document.getElementById('myLayer').style.visibility = 'visible';

break;
}}



</script>



</body>
</html>

sparks80
07-13-2005, 04:52 PM
You can use a single function and just look at the values of the controls on the page.

example syntax for checkbox values :

document.forms['form_name'].elements['radio_name'][0].checked


So try something like this:


Mark

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>


<script language="JavaScript" type="text/JavaScript">
<!--

function showHiddenLayer(formname, check1name, check2name, textname) {

// display hidden layer if answer to all questions is correct
if ((document.forms[formname].elements[check1name][0].checked == "1") && (document.forms[formname].elements[check2name][0].checked == "1") && (document.forms[formname].elements[textname].value > 100000)) {
document.getElementById('myLayer').style.visibility = 'visible';
} else {
document.getElementById('myLayer').style.visibility = 'hidden';
}

}

function showanswer(question, formname, checkname, correctvalue) {
if (document.forms[formname].elements[checkname][0] != correctvalue) {
alert('the answer to question ' + question + ' should be ' + (correctvalue == "1" ? "Yes" : "No"));
}
}

function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
</head>

<body>

<form name="Form1">
<table width="250" border="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Question 1 </td>
<td><input type="radio" name="R1" onclick="showHiddenLayer('Form1','R1','R2','textfield');">
Yes
</td>
<td><input type="radio" name="R1" onclick="showanswer(1, 'Form1', 'R1', '1');showHiddenLayer('Form1','R1','R2','textfield');">
No
</td>
</tr>
<tr>
<td>Question 2 </td>
<td><input type="radio" name="R2" onclick="showHiddenLayer('Form1','R1','R2','textfield');">
Yes </td>
<td><input type="radio" name="R2" onclick="showanswer(1, 'Form1', 'R2', '2');showHiddenLayer('Form1','R1','R2','textfield');">
No </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Value</td>
<td colspan="2"><input type="text" name="textfield" ONCHANGE="showHiddenLayer('Form1','R1','R2','textfield');"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>
<input name="Button" type="button" onClick="showHiddenLayer('Form1','R1','R2','textfield');" value="Button">
</p>
</form>

<div id="myLayer"
style="position:absolute;top:175px;left:150px;visibility:hidden">
This is a layer </div>


</body>
</html>

Ravenwise
07-17-2005, 01:02 AM
That was exactly what I needed and was trying to do!

Cheers!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum