Including external page on JS "onchange"?

I have a drop-down select menu:

<select name="pageID" onchange="insertTemp(this.options[this.selectedIndex].value);">
                                    <option value="form1.php">Form1 template</option>
                                    <option value="form2.php">Form2 template</option>
</select>

<div id="pageInc">Page form goes here</div>


Now, how would I write a JS such that, when someone chooses a value (a page), an external page  gets included?

I have this JS:

function insertTemp(val)
{

var tmpObj = document.getElementById('pageInc');

                  tmpObj.innerHTML = val; //include
}

</script>

I know it might something to do with AJAX, but I am a bit stuck. Can anyone help?
identitylessAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BobSiemensCommented:
Don't do tmpObj.innerHTML, use document.load
0
identitylessAuthor Commented:
I tried it, but how would I actually include the external page?
0
exoskaCommented:
well, yes you need an ajax, or some more complex iframe based solution,
and for the ajax simply get the prototype, if you still d not checked out. basic and most powerful.
(http://www.prototypejs.org/) it is one of the top most js libs for ajax and general developing (IMHO)

below i simply pasted a code that s fit enough to include a remote page.
if you d like to send some other paramaters, fill in the parameters property.

<html>
  <head>
  <script src="js/prototype.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script>
  function insertTemp(val)
{

    var tmpObj = document.getElementById('pageInc');
   
            var req= new Ajax.Request(
            val,
            {method: 'post',parameters:'',  onComplete:
                  function(resp){
                    alert(resp.responseText)
        tmpObj.innerHTML = resp.responseText;
                  }
            }
            );
                 
}

</script>
  </script>
  </head>
  <body><select name="pageID" onchange="insertTemp(this.value);">
                                    <option value="">select</option>
                                    <option value="form1.php">Form1 template</option>
                                    <option value="form2.php">Form2 template</option>
</select>

<div id="pageInc">Page form goes here</div>
  </body>
</html>

very important thing is, for IE you have to be running it on a web server( like your localhost or something on the net) , but using mozilla you can test them out on a regular file( if 'form1.php' exists :) )

er, btw http://www.petefreitag.com/item/515.cfm check here out for some ajax tutorial, using the mighty prototype.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
exoskaCommented:
sorry for the editor metatag(pspad :) )
and of course you can remove the alert function after you are finished.
0
BobSiemensCommented:
You could use an IFRAME for example:
(from http://www.cryer.co.uk/resources/javascript/script4.htm)

    <iframe name="IFrameName"></iframe>

Any html between the <iframe> and </iframe> will be visible if the browser does not support inline frames. The <iframe> takes a number of other parameters, such as:
frameborder       yes or no       Whether the inline frame should have a border.
height       number or percentage       The height of the frame in pixels or as a percentage of the available height.
scrolling       yes, no or auto       Whether scroll bars are provided. The default is auto.
src       file name       The name of the html file to include an display at that point.
width       number or percentage       The width of the frame in pixels or as a percentage of the available width.

It is the 'src' parameter that is of interest here. To change it dynamically either:

    frames['IFrameName'].location.href='http://www.cryer.co.uk/emily'

Note, the alternative:

    document.all.IFrameName.src='www.cryer.co.uk'

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.