Hide forms on page then display form based on option selection

CalOtt

11-17-2010, 08:35 PM

I want to have several forms on one page that are not displayed until a selection is made from the category drop down box(select element). The form displayed will depend on the selection made. Here is the code I have so far. Please help.

<body>
<label id="Label1">ADMINISTRATOR CONSOLE - ADD AND EDIT ASSETS<br />
</label>
<form action="" method="post" style="border-style: ridge; width: 311px; height: 37px;" name="myform">
<table>
<tr>
<td>Select Category:</td><td>
<select name="category" onchange="set_sub_category()" style="width: 157px">
<option selected="selected" value="select">Select an Option</option>
<option value="add">Add Category</option>
<option value="district">Council District</option>
<option value="region">Region</option>
<option value="pom">POM</option>
<option value="proptype">Property Type</option>
<option value="assetcat">Asset Category</option>
<option value="assettype">Asset Type</option>
<option value="property">Property</option>
<option value="asset">Asset</option>
</select>
</td>
</tr>
</table>
</form>

<form style="display:none" action= "admin_console_new.html" onsubmit="return (validate_form(this)& validate_list(this))" method="post" style="border-style: ridge; border-width: medium; height: 154px; width: 346px;" name="district">
<table style="height: 86px">
<tr>
<td>Select District Value:</td><td>
<select name="district">
<option selected="selected">Select an Option</option>
<option>Add Council District</option>
</select>
</td>
</tr><tr>
<td>Enter District Name:</td><td>
<input name="name" type="text"/>
</td>
</tr><tr>
<td>Enter Description:</td><td><textarea name="description"></textarea>
</td>
</tr><tr>
<td><input type="submit" value="Submit" name="Submit3" /><input type="reset" value="Reset" />
</td>
</tr>
</table>
</form>

glenngv

11-17-2010, 08:40 PM

See my post in this thread.

http://www.codingforums.com/showthread.php?t=209337

DrDOS

11-17-2010, 08:56 PM

Here's some code that shows and hides a form in a modal window. It can easily be merged with glenngv's script to use with multiple forms. The form is put inside a div.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<script type="text/javascript">
//Alerts to errors.
window.onerror=function(msg, url, linenumber){var logerror='Error message: ' + msg + '. Url: ' + url + 'Line Number: ' + linenumber;alert(logerror);return false}
</script>
<script type="text/javascript">
function showLogin()
{
var m = document.getElementById("mylogin");
m.style.display="block";
var c = document.getElementById("cover");
c.style.display="block";
c.style.width="100%";
}
function hideLogin()
{
var m = document.getElementById("mylogin");
m.style.display="none";
var c = document.getElementById("cover");
c.style.display="none";
c.style.width="0";
}
</script>
<title></title>
<style type="text/css">
html{background:#333}
body{width:900px;margin:auto;margin-top:40px;color: White}
body a {color: #aff}
#mylogin
{
background: #369;
padding:20px;
width:300px;
height:auto;
position:absolute;
z-index:100;
left:50%;
margin-left: -150px;
top:50%;
margin-top: -160px;
border: 2px solid #fff;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
-khtml-border-radius: 16px;
border-radius: 24px;
}
#dologin
{
border: 2px solid #fff;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
}
#cover
{
background: #000;
height:100%;
position:absolute;
top: 0;
left: 0;
z-index: 90;
}
</style>
<?php
if (isset($_POST['submit']))
{
$player = $_POST['player'];
$number = $_POST['number'];
//echo $player.$number;
if (($player !="Your Name" || $number !="Your Number") && ($player !="" || $number !=""))
{
$message = fopen("players.php","a");
fwrite($message,"<br><span class=\"player\">".$player.": #".$number."</span><br>\n");
fclose($message);
}
}
?>
</head>
<body><a href="#" onclick="showLogin();">Login</a><br>
<h4>Heading here</h4>
Some text here.
<div id="cover"></div>
<div id="mylogin" style="display:none">
<fieldset id="dologin">
<legend>Log in to the site.</legend>
<form name="logmein" id="logmein" action="" method="post">
<input type="text" name="player" value="Your Name"><br>
<input type="text" name="number" value="Your Number">
<input type="submit" name="submit" value="Enter Data">
<input type="button" value="Exit" href="#" onclick="hideLogin();">
</form></fieldset></div>
<?php include('players.php') ?>
<script type="text/javascript"></script>
</body>
</html>

CalOtt

11-18-2010, 01:58 AM

Thanks guys it works awesome. Each form is displayed on the top of the document just like I wanted.