Solved

Including external page on JS "onchange"?

Posted on 2007-03-19
5
237 Views
Last Modified: 2012-05-05
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?
0
Comment
Question by:identityless
  • 2
  • 2
5 Comments
 
LVL 10

Expert Comment

by:BobSiemens
ID: 18752278
Don't do tmpObj.innerHTML, use document.load
0
 

Author Comment

by:identityless
ID: 18752722
I tried it, but how would I actually include the external page?
0
 
LVL 3

Accepted Solution

by:
exoska earned 500 total points
ID: 18762859
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
 
LVL 3

Expert Comment

by:exoska
ID: 18762865
sorry for the editor metatag(pspad :) )
and of course you can remove the alert function after you are finished.
0
 
LVL 10

Expert Comment

by:BobSiemens
ID: 18765247
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now