How to dynamically change forms via a combo box (Javascript, DHTML, HTML, PHP?)

Which page are you reffering to? The links I have provided above, in my original question? I am using Microsoft Internet Explorer 7.0.5700.6 on Microsoft Windows XP Professional (Service Pack 2) and all links provided work well. If you cannot view these links, then possibly it is due to your corporate setup. Firewalls, routers, and other typical corporate setups are usually geared for business purposes, specifically, and sometimes companies block out MSN Hotmail or other scripts like JavaScript or ActiveX applications or what not. In doing so, this type of setup might effect your viewing capabilities.

Wow, I definately am impressed. I have never heard of AJAX (Asynchronous JavaScript) before, but now I love it. It definately, dynamically updates with very low overhead. If you go to http://www.clearnova.com/ajax/ you will see an example/sample named "Google Suggest Hack" and when you click on the title and type a string within the box, you will instantly see it search for results as you type. No reloading needed. I also found an a dynamic content script using AJAX methods:

Information:
http://www.dhtmlgoodies.com/index.html?whichScript=ajax-dynamic-content

Demo/Sample/Example:
http://www.dhtmlgoodies.com/scripts/ajax-dynamic-content/ajax-dynamic-content.html

Download:
http://www.dhtmlgoodies.com/scripts/ajax-dynamic-content/ajax-dynamic-content.zip

In the demo, you will notice in the 'externalfile3' part that when you click on the highlighted "here" it updates automatically. This is exactly what I wanted to do but with a combobox which is simply having the combobox call on the AJAX function, which is just as easy. In the Demo/Sample/Example, the function call is:

ajax_loadContent('news1','external/externalfile1.html');


That is definately step 1 of 2 accomplished in my goal.

The last problem I need to figure out is how to call that function using a combobox via JavaScript.  I'm assuming you set a value for each option and use the OnChange="" syntax in the <select> tag, but I'm not sure how I would go about calling the ajax_loadContent() and inserting the values into them.

Would someone be able to assist with a snippet of code that creates a combobox and inserts two variables into a function?
Pseudo-Code logic would be:

----
Variable1 = 'Table1'
Variable2 = 'external/index.html'
Option1 = Variable1, Variable2

*User selects Option1 on combobox*

ajax_loadContent(Option1);

------

Note: ajax_loadContent(Option1); = ajax_loadContent(Variable1,Variable2);

Thank you b0lsc0tt for the assistance. That was the best solution so far, I just need my second part of the solution now.

Alright, I have figured out the final solution to all of my needs. I have found that AJAX not only allows an advantage in this single purpose but also allows for a user to template a website very easily. Say you have a common Table of Contents and a banner/logo, all you would have to do is make one template of that and it would reffer to all the other links using the AJAX function calls, depending on the link clicked on and all without the need to constantly refresh the page. This, potentially, saves alot of bandwidth, processing power, and all sorts of delays.

Anyways, I will provide all necessary links, below, to emulate the same procedure and to further understand my problem, from the original post/question.


1.) http://vyrsace.dyndns.org/Demo/demo.html

This is a link to my server that will be up, temporarily, for the next week or so (possibly longer). This fully demonstrates the whole process.

2.) http://www.megaupload.com/?d=LSZM3AQ4

This is a link to a zipped version of my demo. Included in the zip file is:

demo.html - Accesses  content in file1.html, file2.html, file3.html through the combobox on the top left corner. file4.html is accessed through the combobox option "External File 3" and by clicking on the "here" link.
file1.html - Content that is accessed through demo.html
file2.html - Content that is accessed through demo.html
file3.html - Content that is accessed through demo.html
file4.html - Content that is accessed by clicking on the "here" link of file3.html


3.) Below is the sources to the files

demo.html:

<html>
<head>
      <title>AJAX Dynamic Content Demo</title>
      <style type="text/css">
      /* This CSS is only needed for the demo */
      body{
            margin:10px;
            font-size:0.9em;
            font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
            text-align:center;
            background-color:#E2EBED;
            height:100%;
      }
      a{
            color:#F00;
      }

      
      #mainContainer{
            width:760px;
            margin:0 auto;
            text-align:left;
            background-color:#FFF;
            height:100%;
            padding-bottom:10px;
      }

      #mainContainer .news{
            margin:5px;
            border:1px dotted #555;
            background-color:#EEE;      
            padding:10px;
      }
      
      #mainContainer img{
            float:left;
            margin:2px;
      }
      div#header{
            border:0px;
            background-color:#FFF;
            padding:0px;
            margin:0px;
            height:100px;
      }
      
      h2{
            font-size:1.3em;
            margin-bottom:5px;
      }
      p{
            margin-top:0px;
      }
      .clear{
            clear:both;
      }
      h2{
            color:#000;
      }
      
      #news2{
            height:150px;
      }
      .header{
            padding-left:5px;
            font-weight:bold;
      }
      </style>
      <script type="text/javascript" src="js/ajax.js"></script>
      <script type="text/javascript" src="js/ajax-dynamic-content.js"></script>
      
      
</head>
<body>
      <div id="mainContainer">
            <p class="header">
      
            <select onchange="var val = this.value.split('|'); ajax_loadContent(val[0], val[1])" name="D1">
            <option value=""></option>
            <option value="Body|file1.html">External File 1</option>
            <option value="Body|file2.html">External File 2</option>
            <option value="Body|file3.html">External File 3</option>
            </select>

            </p>
            
            <div class="news" id="Body"><!-- Empty div for dynamic content -->Loading news. please wait...</div>            

      </div>
      
      <script type="text/javascript">
            ajax_loadContent('Body','file1.html');
      </script>

</body>
</html>


file1.html:

<h2>External file 1</h2>
<p>The text you see here is an external file which is loaded into this HTML element by use of Ajax.</p>
<p>This is simply done by the following Javascript function call: ajax_loadContent('news1','external/externalfile1.html'). Two arguments are sent
to this function</p>
<ol>
      <li>The id of the element you want to update, example: "news1" for &lt;div id="news1">&lt;/div></li>
      <li>The path to the external file.</li>
</ol>

file2.html:

<h2>Another external file</h2>
<p><img src="images/demo_image1.jpg">This is also content from an external file.</p>
<p>This file also contains an image taken from a beautiful Island at the west coast of Norway</p>
<br>
<br>

file3.html:

<h2>The name of this file is externalfile3</h2>
<p>If you you want to swith content of this div, click <a href="#" onclick="ajax_loadContent('Body','file4.html');return false">here</a></p>

file4.html:

<h2>Another external file</h2>
<p>Wanna switch back to the previous file?, click <a href="#" onclick="ajax_loadContent('news3','external/externalfile3.html');return false">here</a></p>

demo_image1.jpg (even, though, this can be any image): http://img134.imageshack.us/img134/486/demoimage1eg6.jpg