[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 546
  • Last Modified:

Select Statement with Javascript

I am writing an ASP page that needs to provide a definition depending on what the user selects.

Example -

<select name="fruit">
<option value="">Please Select</option>
 <option value="Apple">Apple</option>
 <option value="Orange">Orange</option>
 </select>

Depending on which fruit they select, a little window pops up with definition. How do I do this?
0
JodyFischer
Asked:
JodyFischer
  • 5
  • 4
  • 3
1 Solution
 
b0lsc0ttIT ManagerCommented:
JodyFischer,

You can do that with something like ...

<script type="text/javascript">
function showDef(val) {
    switch (val) {
        case "Apple":
            alert('A red fruit.');
            break;
        case "Orange":
            alert('An orange colored fruit.');
            break;
    }
}
</script>

The code above would go in the head section of your html.  The select tag would become ...

<select name="fruit" onchange="showDef(this.value);">

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
b0lsc0ttIT ManagerCommented:
JodyFischer,

I used an "alert" but you could make a popup or have the definition appear in some "popup div" on the page.  The alert part can easily be changed to something else but the rest will show you how to do the Javascript part.

Let me know if you have a question.

b0lsc0tt
0
 
erikTsomikSystem Architect, CF programmer Commented:
try something like this
function vag (obj) {
if (obj.value)=='Apple' {
alert ('Apple');
}
if (obj.value)=='Orange'{
alert ('Orange');
}
}
<select name="fruit" onchange="vag (this);">
<option value="">Please Select</option>
 <option value="Apple">Apple</option>
 <option value="Orange">Orange</option>
 </select>
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
JodyFischerAuthor Commented:
It works as an alert, but I need it to be a small second browser. Can you show me how to do that instead?
0
 
erikTsomikSystem Architect, CF programmer Commented:
what do you mean by that
0
 
JodyFischerAuthor Commented:
You wrote

I used an "alert" but you could make a popup or have the definition appear in some "popup div" on the page.  The alert part can easily be changed to something else but the rest will show you how to do the Javascript part.

How do you make it a pop up (so it looks like a second browser window) instead of a grey box. I need to be able to format and have multiple lines on what comes up.
0
 
b0lsc0ttIT ManagerCommented:
Sure ...

<script type="text/javascript">
function showDef(val) {
    switch (val) {
        case "Apple":
            makeWin('A red fruit.');
            break;
        case "Orange":
            makeWin('An orange colored fruit.');
            break;
    }
}
function makeWin(str) {
    var w = window.open('','window1');
    w.document.write("<html><head><title></title></head>");
    w.document.write("<body>" + str + "</body></html>");
    w.document.close;
}
</script>

Of course add more html as needed but that will show you the general idea.  Let me know if you have a question.
0
 
erikTsomikSystem Architect, CF programmer Commented:
then you can try something like this
http://www.malsup.com/jquery/block/#page
0
 
JodyFischerAuthor Commented:
I am so sorry to be a pain, but it's giving me an error - Access Denied

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
<script type="text/javascript">
function showDef(val) {
    switch (val) {
        case "Apple":
            makeWin('A red fruit.');
            break;
        case "Orange":
            makeWin('An orange colored fruit.');
            break;
    }
}
function makeWin(str) {
    var w = window.open('','window1');
    w.document.write("<html><head><title></title></head>");
    w.document.write("<body>" + str + "</body></html>");
    w.document.close;
}
</script>

</head>

<body>


<select name="fruit" onchange="showDef(this.value);">
<option value="">Please Select</option>
 <option value="Apple">Apple</option>
 <option value="Orange">Orange</option>
 </select>
</body>
</html>
0
 
JodyFischerAuthor Commented:
I closed everything and it's working great. Thank you so much.
0
 
b0lsc0ttIT ManagerCommented:
Your welcome!  I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0
 
b0lsc0ttIT ManagerCommented:
By the way, to improve the script and handle if the window already exists you could use ...

<script type="text/javascript">
var w = null;
function showDef(val) {
    switch (val) {
        case "Apple":
            makeWin('A red fruit.');
            break;
        case "Orange":
            makeWin('An orange colored fruit.');
            break;
    }
}
function makeWin(str) {
    if (w== null || w.closed) {
        w = window.open('','window1');
    }
    w.document.write("<html><head><title></title></head>");
    w.document.write("<body>" + str + "</body></html>");
    w.document.close;
}
</script>

That change just makes sure the popup window doesn't exist or has been closed.

bol
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 5
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now