calling a javascript function from a form result.

Question

Hello,

So I have a html page(actually generated with php), that will make a popup window containing a form. All my javascript stuff is in a seperate javascript file. I want to know if it is possible to call a function from my javascript file from the form resulttext.

Here is the first html page

<script type="text/javascript" src="x.js"></script><h1>hello</h1>
<div id='form'>
<a href='#' onclick="makewindows('<form action="process.php" method="post" enctype="multipart/form-data "><label for="file">Filename:</label><input type="file" name="file" id="file"/> <br /><input type="submit" name="submit" value="Submit" onclick="" /></form>'); return false;">
click here</a>
</div>

After uploading a file, result text is generated that shows the name of the file. In x.js I have a function to update a div in the original window. SO can I call this from a normal html page?

Here is the code for maewindows

function makewindows(html){
child1 = window.open ("about:blank");
child1.document.write(html);
child1.document.close(); 
}

I don't want to call the function with onclick, i want to call it from the result text of the form.

Answer 1

What does makewindows do? You probably want to put that html in a template or separate file of some type. Yes you can call javascript from a form event, the onsubmit event.

Answer 2

Yes, you can. You just have to call it by name as you would with any function defined within the html file itself.

Answer 3

If I'm understanding your question correctly, you're trying to update some information in the popup window, and have that updated information reflected in the page that opened the popup window?

I think this might help you.

Answer 4

You want to access a Javascript function declared in the same page that opened a window using window.open from script running within the opened window?

window.opener is what you're looking for.

For example, if you have a have a function defined in x.js as function foobar(s) (and x.js is included in the main window), you could return something like the following as the response from process.php:

<script type="text/javascript">
    window.opener.foobar('returned text');
    window.close();
</script>

And the string "returned text" is passed back to the foobar function.

The reason this works is that anything defined with the function keyword from global scope is automatically added as a property of the current window object. If your function isn't defined in the global scope, you can force it to be a property of window like this:

window.foobar = function(s) { ... }

Answer 5

Tobias is right.

But with no opener property, the main window and target window cannot communicate-- there's no tie.

This dated article illustrates one solution for onclicks, albeit one with targets. Might be fun for you to play with. http://homepage.mac.com/bigeuniverse/tests/targetwindows/

It is best, today, however, to do this with listeners and functions tied to them. I would clearly define the opener in your 'makewindows' function, as well as define the window.

PARENT: Like this:

var child1 = null;
function makewindows(html) 
{
    if (!child1 || child1.closed) {
       child1 = window.open(...);
       ...//rest of original code
    } else {
       child1.focus();
       /* in case it's okay to simply open the same window 
          for another upload; otherwise, nix this section*/
    }
    if (child1.opener == null) {
          child1.opener = self;
    }        
 }

CHILD: Supposing that x.js has a function named 'childListener': Your process.php could deliver a self-executing JavaScript function to the 'child' page, like:

var talkToParent = function(saywhat) 
{
    opener = opener || self.opener || window.opener;
    if (opener != null  && saywhat) {
        opener.childListener(saywhat);
    }
}($uploaded_filename);

This would immediately execute (from within script tags of course), as long as the uploaded filename was delivered. You could actually alert the parent to an error in upload if you set your php to deliver that in lieu of the filename, in that event. Again, this assumes the 'childListener' function is in x.js or some other script called from the opener page.