Forum Moderators: open
I was hoping someone knew of a javascript code to have where an option of 2 forms is shown based upon a radio button option selected.
Regards,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype all on one line -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#form1,#form2 { display:none; }
</style>
<script type="text/javascript">
function showForm(theForm) {
var showHides = new Array('form1','form2');
for (i=0;i<showHides.length;i++) {
document.getElementById(showHides[i]).style.display=
(document.getElementById(showHides[i]).id==theForm)?'block':'none';
}
}
function loadBehaviors () {
if (document.getElementById) {
document.getElementById('switch0').onclick = function() { showForm(''); }
document.getElementById('switch1').onclick = function() { showForm('form1'); }
document.getElementById('switch2').onclick = function() { showForm('form2'); }
}
}
window.onload=function() { loadBehaviors(); }
</script>
</head>
<body>
<form method="get" action="" id="determinator">
<p><input type="radio" name="switch" id="switch0" checked>
<label for="switch1">Hide all forms</label></p>
<p><input type="radio" name="switch" id="switch1">
<label for="switch1">Show form 1</label></p>
<p><input type="radio" name="switch" id="switch2">
<label for="switch2">Show form 2</label></p>
</form>
<form method="get" action="" id="form1">
<p><label for="text1">Text 1</label>
<input type="text" name="text1" id="text1"></p>
<p><input type="submit" value="Submit Form 1"></p>
</form>
<form method="get" action="" id="form2">
<p><label for="text2">Text 2</label>
<input type="text" name="text2" id="text2"></p>
<p><input type="submit" value="Submit Form 2"></p>
</form>
</body>
</html>
