• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4659
  • Last Modified:

JavaScript to change Frame Source using HTML Form Select values

I am trying to change the source of the current frame using a Form Select value and the onclick of a button.  For instance, my select and button would look like this.

<form name="form1">
                    <select name="menu1">
                      <option value="#">Menu</option>
                      <option value="L1T1_01.htm">Objectives</option>
                      <option value="L2T1_01.htm">Introduction</option>
                      <option value="L3T1_01.htm">Overview of Constitutional History</option>
                      <option value="L4T1_01.htm">Bill of Rights</option>
                      <option value="L5T1_01.htm">What the Constitution Means to You</option>
                      <option value="L6T1_01.htm">Summary </option>
                    </select>
                    <input type="button" name="Button1" value="Go" onClick="MM_jumpMenuGo()">
                  </form>

From here, I have thought of many ways to write the MM_jumpMenuGo function, but none have worked.

Any thoughts?

Your help would be greatly appreciated!

Matt
0
mattturley
Asked:
mattturley
1 Solution
 
bebonhamCommented:
<script>
function frame_src(url)
{
document.getElementById("frame_ele").src=url;
}
</script>


<form name="form1">
                    <select name="menu1" onchange="frame_src(this.value)">
                      <option value="#">Menu</option>
                      <option value="http://www.google.com">Objectives</option>
                      <option value="L2T1_01.htm">Introduction</option>
                      <option value="L3T1_01.htm">Overview of Constitutional History</option>
                      <option value="L4T1_01.htm">Bill of Rights</option>
                      <option value="L5T1_01.htm">What the Constitution Means to You</option>
                      <option value="L6T1_01.htm">Summary </option>
                    </select>
                    <input type="button" name="Button1" value="Go" onClick="MM_jumpMenuGo()">
                  </form>
<iframe id=frame_ele src="" width=500 height=500></iframe>
0
 
ZvonkoSystems architectCommented:
Here my proposal:


<html>
<head>
<title>Zvonko &#42;</title>
<script>
function changeMe(theBtn){
  var theForm = theBtn.form;
  if(theForm.menu1.selectedIndex>0){
    window.location=theForm.menu1.value;
  } else {
    alert("Nothing selected");
  }
}
</script>
</head>
<body>
<form name="form1">
<select name="menu1">
  <option value="#">Menu</option>
  <option value="L1T1_01.htm">Objectives</option>
  <option value="L2T1_01.htm">Introduction</option>
  <option value="L3T1_01.htm">Overview of Constitutional History</option>
  <option value="L4T1_01.htm">Bill of Rights</option>
  <option value="L5T1_01.htm">What the Constitution Means to You</option>
  <option value="L6T1_01.htm">Summary </option>
</select>
<input type="button" name="Button1" value="Go" onClick="changeMe(this)">
</form>
</body>
</html>



0
 
mattturleyAuthor Commented:
Many thanks!!  This worked like a charm without having to change my frameset.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now