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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Trying to use drop down menu to display a colour for system status

    I’m creating a webpage that will display the status of various IT systems on a large screen. The users will be helpdesk staff who will need to change the statuses of the various systems. Maybe I am approaching this in the wrong way but I thought I could use a drop down menu to enable the helpdesk to select the system status which would be either: Green, Amber or Red. I have managed to hack the following code by using something I found on the web. It almost does what I want but on selecting the colour from the drop down menu it tries to load another page. Is there any way I can stop it from doing this? The webpage should be static and I am aware that reloading it would lose any selections that the user has made.

    Thanks for your help. Here is the code:


    <html>
    <head>
    </head>
    <form>
    <select onChange="location=this.options[this.selectedIndex].value;" style="font-family:'Arial';color:#00CC00;background-color:#00CC00;font-size:10pt;">
    <option value="GREEN">UP</option>
    <option style="font-family:'Arial';color:#FF9900;background-color:#FF9900;font-size:10pt;" value="RED">DOWN</option>
    </select>
    </form>

    </body>
    </html>
    Last edited by Fat Bambi; 06-23-2009 at 07:25 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,316
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    Is this what you want?

    Code:
    <select id = "s1" onchange = "go()">
    <option value = "" selected>Select a status</option>
    <option value = "Red" style="background-color: red; color: white;"> RED<br>
    <option value = "Amber" style="background-color: orange; color:white;"> AMBER<br>
    <option value = "Green" style="background-color: green; color:white;"> GREEN<br>
    </select>
    
    <br><br>
    
    <script type = "text/javascript">
    function go() {
    var val = document.getElementById("s1").value;
    if (val !="") {
    alert ("You selected option value:- " + val);
    }
    }
    
    </script>

    <select onChange="location=this.options[this.selectedIndex].value;
    is attempting to redirect to a new page. You have copied the script rather blindly as this is not what you want.



    "Most of the time I don't have much fun. The rest of the time I don't have any fun at all." - Woody Allen - US movie actor, comedian, & director (1935 - )
    Last edited by Philip M; 06-23-2009 at 07:05 PM.

  • Users who have thanked Philip M for this post:

    Fat Bambi (06-23-2009)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Phil. That was what I wanted it to do. I removed the pop up window and copied the menu as many times as was needed. That has realy helped me out a lot. thanks again.


  •  

    Posting Permissions

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