Select Values

@ministryFeb 23.2006

Hello,

I am very new to java but i understand the basics. i need a way to get values from 2 dropdowns in a form and update a layer with a html page based on the values of the dropdows for example:

The first dropdown contains a list of compny departments and the second doprdown contains a list of people, thus selecting accounting and John Doe, would disply the acounts_johndoe.html page in the frame.

i understand that this is not the best way to create the page i want but this is only for demo prurposes before i invest time in developing an asp.net or other language solution.

Amy pointers would be much appreciated.

Thanks,

to post a comment

JavaScript

9 Comments(s) _↴

@TheBearMayFeb 23.2006 — #Doing this from memory, but it should be close.

document.getElementById("oPut").src=document.getElementById("select1")[document.getElementById("select1").selectedIndex].value+"_"+document.getElementById("select1")[document.getElementById("select2").selectedIndex].value+".html";
 ...
 &lt;select id="select1"&gt;
 ....
 &lt;iframe id="oPut"&gt;&lt;/iframe&gt;

@ministryauthorFeb 23.2006 — #Thanks for that code! im pretty sure i understand it, it gets the values of both the selects and sets the frame source to the page i want to display: however how do i call it? i know i must have it in the head of the html and my objects must have the same names used in the function, but where does the code that calls the function go? is it ia fuction?

@TheBearMayFeb 23.2006 — #I'd probably put the first line in a function and look at calling it using the onchange event from the selects. You'll need to check that both selects have a valid value too. Maybe something like:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 function loadFrame(){
 if (document.getElementById("select1").selectedIndex &gt; 0 &amp;&amp; document.getElementById("select2").selectedIndex&gt; 0){
 document.getElementById("oPut").src=document.getElementById("select1")[document.getElementById("select1").selectedIndex].value+"_"+document.getElementById("select1")[document.getElementById("select2").selectedIndex].value+".html";
 }
 else return false;
 }
 ...
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 ...
 &lt;select id="select1" onchange="loadFrame()"&gt;
 ....
 &lt;iframe id="oPut"&gt;&lt;/iframe&gt;
 ...
 &lt;/body&gt;
 &lt;/html&gt;

@ministryauthorFeb 23.2006 — #Nearly There ( i think ) i think all i need to do is refresh or relod the iframe, the script runs as far the refresh event where it fails with object expected i have called the event from a button with the onclick event, any ideas?

Thank you.

[CODE]<script type="text/javascript">
 function loadFrame()
 {
 if (document.getElementById("Select1").selectedIndex > 0 && document.getElementById("Select2").selectedIndex> 0)
 {
 document.getElementById("I1").Src=document.getElementById("Select1")[document.getElementById("Select1").selectedIndex].value+"_"+document.getElementById("Select1")[document.getElementById("Select2").selectedIndex].value+".html";
 refresh()
 }
 else return false;
 }
 </script>[/CODE]

@TheBearMayFeb 24.2006 — #You don't have a refresh function to call (thus the error), but when you change the src of the frame it should load without it.

@ministryauthorFeb 24.2006 — #The frame does load without the refresh so i have removed it, however all i get is page cannot be displayed. i have tried every variation of the file name such as 1_1.html 11.html 1 1.html and so on. is there a way to check the value of a property such as the src of the iframe with something msgbox iframe.src ?

Thanks, once again

@TheBearMayFeb 24.2006 — #Sounds like the file you want to display in the frame is not in the same directory as the html file that is calling it. Just need to provide the correct path. For example,

<root>

[INDENT]main.htm[/INDENT]

<acctDir>

[INDENT]accounts_JohnDoe.html[/INDENT]

[INDENT]accounts_JimSmith.html[/INDENT]

Main.htm would then need a path like "acctDir/accounts_JohnDoe.html" for the src of the frame.

@ministryauthorFeb 24.2006 — #i have checked all the files are in the same directory and have tested by replacing

[CODE]document.getElementById("oPut").src=document.getElementById("select1")[document.getElementById("select1").selectedIndex].value[/CODE]

with

[CODE]document.getElementById("oPut").src=("1.html")[/CODE]

i have stripped the page down to one select and one iframe but when i use the getelemeitbyid method nothing happens. i have tried surrounding it with ( ) and (" ") but still no joy. the frame remains empty when i would expect 404 not found?

any suggestions?

Thanks,

@TheBearMayFeb 24.2006 — #Try this:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 
 &lt;script type="text/javascript"&gt;
 function loadFrame()
 {
 if (document.getElementById("Select1").selectedIndex &gt; 0 &amp;&amp; document.getElementById("Select2").selectedIndex&gt; 0)
 {
 document.getElementById("I1").src=document.getElementById("Select1")[document.getElementById("Select1").selectedIndex].value+"_"+document.getElementById("Select1")[document.getElementById("Select2").selectedIndex].value+".html";
 alert(document.getElementById("I1").src);
 }
 else return false;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;select id="select1"&gt;
 &lt;option value=""&gt;---------&lt;/option&gt;
 &lt;option value="1"&gt;Option 1&lt;/option&gt;
 &lt;option value="2"&gt;Option 2&lt;/option&gt;
 &lt;/select&gt;
 &lt;select id="select2"&gt;
 &lt;option value=""&gt;---------&lt;/option&gt;
 &lt;option value="1"&gt;Option 1&lt;/option&gt;
 &lt;option value="2"&gt;Option 2&lt;/option&gt;
 &lt;/select&gt;
 &lt;button onclick="loadFrame()"&gt;Load Frame&lt;/button&gt;
 &lt;br /&gt;
 &lt;iframe id="I1" style="width:90%; height:50%"&gt;&lt;/iframe&gt;
 &lt;/body&gt;
 &lt;/html&gt;

I think your problem is that you have a capital S for src....

Also in #JavaScript _↴

diffrent html codes JavaScript floating text in DIV using a string as a pointer to an array?

Success!

Help @ministry spread the word by sharing this article on Twitter...

Tweet This

Select Values

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Select Values

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴