Link to home
Start Free TrialLog in
Avatar of Batalf
BatalfFlag for United States of America

asked on

Closing a window after form-submission

We're having a little problem with closing of a popup-window.

This problem involves 2 files, a mainfile(let's call it mainfile.html) and the popup-window file(lets call it popup.html). (These are actually PHP-files).

The popup-window is opened with javascript-line like this:

popup=window.open("popup.html","name","properties....");

The popup-window contains a form  like this:

<form action="mainfile.html" target="main" method="post">
....
....

ie: it points back to the mainfile and to the window(main) that opened the popup-window. The problem here is closing the popup-window after form-submission.

This won't work:

<input type="submit" ..... onclick="window.close()">

This cause the mainWindow to come to the Front, but the popupwindow is still there, hidden behind the main-Window.

This on the other hand works:

<input type="button" onclick="window.close()">

It's not so easy to close the popup-window from the mainwindow either since the target of the form in the popup-window cause the mainfile.html to reload. The mainfile then have no reference to the popup-window.

So my question is:
How to close this popup-window after submitting the form?

ps: Hidden frame is a solution I would like to avoid.
Avatar of avner
avner

what you should do is :

:

<form action="mainfile.html" target="main" method="post" onsubmit="self.close()">




use the onsubmit .
I think it's a long shot but try:

<input type="button" onclick="this.form.submit(); window.close()">

Why would you want to submit to the same page though and then close the window? You don't actually need to submit the form then, do you??

Ant
a completely different approach.

Don't pass the information using the submit , you don't need it .

let's say your pop Form look like this :

<form>
<input type="test" name="aa">
<input type="button">
</form>


Now , you want to send the information , Just try something like :

<form>
<input type="test" name="aa" id="aa">
<input type="button" onclick="opener.sendData(this.form.aa.value);self.close()">
</form>


this way , it'll send the value the user inputed to a function in the main.html named : sendData() , and then will close the window , no need to use the submit function.
Avatar of Batalf

ASKER

Hi

Thanks for fast reply

Maybe I should make my self a little bit more clear.

- Both of these files are PHP-files.
- When the users submits the data from the form in the popupwindow, PHP will update the database which these pages works with.
- The mainfile.html will after the formsubmission show almost exact the same page as before submission  except from the changes made in the submission.

An other think I should mention: I'm working on a Mac computer here at work. I haven't reached to see this page in Netscape yet.

to a.marsh:
I  have to think about your last comment. It's a new an interesting approach.

Batalf
Avatar of Batalf

ASKER

to a.marsh:
I  have to think about your last comment. It's a new an interesting approach.

that should be avner of course.

Could you explain your idea a little bit more?

Batalf
Batalf , If you are saying that the submission of the form  is dynamically changes the PHP page , then you must submit the Page .

And then your best approach , would be to submit the form form the opener and not from the popup.


Just create an Identical form , with hidden inputs , when filling the information in the pop , the popup would have a form like this :


<form>
<input type="test" name="aa" id="aa">
<input type="button" onclick="opener.sendData(this.form.aa.value,self);">
</form>

and the function sendData(), would be :

function sendData(str,win) {
document.localForm.hiddenValue.value=str;
win.close();
document.localForm.submit()
}

see What I mean  ?
Avatar of Batalf

ASKER

I understand. Have to think about it for a little while

Batalf
Good luck.
Avatar of Batalf

ASKER

It's a big operation though. The form in the popup-window is quite big. But I guess this will work.

Move the form from the popup-window to the mainwindow. Make the textfields hidden instead of visible and let the function sendData
1)receive the input from the popupwindow,
2)Close the popup-window
3)Feed the hidden fields with data from the popup-window and
4) Submit the form

I would do it :

1)receive the input from the popupwindow,
2)Feed the hidden fields with data from the popup-window
3)Close the popup-window
4) Submit the form


First make sure you took all the data , you validated it , and putted it into the hidden form , and then close the popup , because when you close it , the information is lost.

But that's peanuts , the general approach should be that , I belive it'll fix your problem.

ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Much better is to return
<script>
window.close()
</script>

from the server process the form calls

Michel
Avatar of Batalf

ASKER

I guess setTimeout() is a better and not so demanding solution. I would try out the suggestions.

To michel:
Much better is to return
<script>
window.close()
</script>

- How is this possible?

Batalf
Sorry - I thought the result was a php file...

Anyway, try this
<form...>
<input type="hidden" value="close">
.
.
.

and in mainfile do

if (location.search && location.search.indexOf('close') !=-1) {
popup=window.open("","mypopup");
popup.close();
}

this is assuming you did a
popup=window.open("popup.html","mypopup","properties....");

before - notice the name of the popup is NOT the reserved word "name"

Opening a window with the same name, will give you the handle

Michel
just to add the already numerous ways of doing this:


<script language="javascript">
function SubmitClose()
{
  document.MyForm.submit();
  self.close();
}
</script>

<form name="MyForm" action="mainfile.html" target="main" method="post">
<input type="button" value="Submit the form" onClick="SubmitClose();">
</form>
Avatar of Batalf

ASKER

The use of setTimeout did the trick. Thank you!

It also worked using the searchstring, but I didn't like the blink when the popup-window was closing.

Batalf
I no this might be a stupid question but how do you get the popup window to go back to the MAIN window.  I put this in my form target="main" and it just opens another window.  Thanks.

I no this might be a stupid question but how do you get the popup window to go back to the MAIN window.  I put this in my form target="main" and it just opens another window.  Thanks.

I no this might be a stupid question but how do you get the popup window to go back to the MAIN window.  I put this in my form target="main" and it just opens another window.  Thanks.

opener.location='page.html'

in IE you can use target="_main"

Michel