Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hide forms on page then display form based on option selection

    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.

    Code:
    <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>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    See my post in this thread.

    Form instead text in JavaScript

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,994
    Thanks
    15
    Thanked 233 Times in 233 Posts
    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.
    Code:
    <!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>

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys it works awesome. Each form is displayed on the top of the document just like I wanted.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •