Solved

Including external page on JS "onchange"?

Posted on 2007-03-19
5
247 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
alert(innerHTML); 8 32
VBScript on Html 15 47
Search Item in Table 2 19
Possible propagation problem 1 22
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…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

856 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