how to close pop up page after email form has been submitted | Member | | Join Date: Mar 2007
Posts: 114
| |
I have a form on a html page which one fills in and submits using email.
The form has been opened in a pop up page,
Once the form has been submitted, (emailed) I need to add some javasript to say either "thank you," in the same window and then close it. Or do something else, that the user knows his form has been submitted. The pop up window that says "thank you" can have a close link on it. I do not need to refresh the parent page or refresh anything since the form is an email one.
Any suggestions what to add where? here is the relevant part of the code below. The first part is the code of the pop up window that is used to open it - <a href="page.htm" onClick="NewWindow(this.href,'name','550','430','Yes');return false;">
next is the relevant parts of the email form - <form action="mailto:email@website.com" method="POST" enctype="multipart/form-data" name="pledgeForm">
-
-
-
<td align="left"><input type="submit" value="Email This Form">
-
</form>
thanks for any help
|  | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,136
| | | re: how to close pop up page after email form has been submitted
hi,
let me give you an idea on how to do what you want. you may give your form an id and create an additional div with what you want to have displayed when the form is submitted. now set the style visibility of the div to hidden. on submitting the form you toggle the visibility-style of your two containers (the form and the div -> make the form visibility hidden and the div visbility visible).
now you may add a button with window.close() action or set a timeout that closes you window after a given amout of time ...
kind regards ...
| | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,136
| | | re: how to close pop up page after email form has been submitted
ahh ... and let me mention that the id is for the simpe use of getElementById ... that you may use for getting a ref to your container-node ;)
kind regards
| | Member | | Join Date: Mar 2007
Posts: 114
| | | re: how to close pop up page after email form has been submitted
Thank you to all who replied. Can i make it clear i'm not html savvy and don't understand all this html lingo.
OK i changed the code a bit, but still the form is as before, the thank you message doesn't show. Any tips anyone as to what im doing wrong? Thank you. - <form action="mailto:email@myweb.com" method="POST" enctype="multipart/form-data" name="pledgeForm" onSubmit="document.getElementById('THANKS').style.display='block'; return true;">
and at the bottom i have this. Just to remind, will this work on a html page or do i have to change it to an asp page? - <td align="left"><input type="submit" value="Email This Form">
-
</form>
-
<DIV ID="THANKS" style="display: none;">
-
Thank you for making this pledge.
-
<P>
-
<a href="#" onClick="window.close();">Close</a> </DIV>
-
-
</table>
-
-
</body>
-
</html>
| | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,136
| | | re: how to close pop up page after email form has been submitted
... it WILL work on an html-page ... and we have to use javascript for that what you want ... i've got a problem to solve here at the office ... after that i'll reply again with some hints ... in case no other expert helped you with that ...
kind regards ...
| | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,136
| | | re: how to close pop up page after email form has been submitted
hi ...
have a look at the following example and try to adapt it to your needs:
[HTML]
<html>
<head>
<script>
function toggle_display() {
var form = document.getElementById('my_form');
var thanks = document.getElementById('THANKS');
form.style.display = 'none';
thanks.style.display = 'block';
}
</script>
</head>
<body>
<form id="my_form" name="pledgeForm">
something to display here
<input type="button" value="Email This Form" onclick="
toggle_display();
"/>
</form>
<div id="THANKS" style="display:none;">
Thank you for making this pledge.
<a href="#" onclick="window.close();">Close</a>
</div>
</body>
</html>
[/HTML]
kind regards ...
| | Member | | Join Date: Mar 2007
Posts: 114
| | | re: how to close pop up page after email form has been submitted
Thank you Gits,
I tried this, see the (modified code below)but didn't receive the email. Also the thank you message appears at the bottom of the form, thus people may not even be aware its there.
Is there any way i can make the rest of the data disappear when the thank you notice and close page thing is there?
In the header i put - <script>
-
function toggle_display() {
-
var form = document.getElementById('my_form');
-
var thanks = document.getElementById('THANKS');
-
-
form.style.display = 'none';
-
thanks.style.display = 'block';
-
}
-
</script>
at the beginning of the form i put - <form action="mailto:me@web.com" method="POST" enctype="multipart/form-data" id="my_form" name="pledgeForm">
and at the bottom of the form i put - <input type="button" value="Email This Form" onclick="toggle_display();"/>
-
</form>
-
<div id="THANKS" style="display:none;">
-
Thank you for making this pledge.
-
<a href="#" onclick="window.close();">Close</a>
-
</div>
-
</body>
-
</html>
THank you for your patience and time, and to anyone else who may have something to add here.
| | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,136
| | | re: how to close pop up page after email form has been submitted
... ;) you have to submit your form ... always have a look at the sample code carefully ... don't use it without doubt ... its an example only ... try to understand what it does, and then adapt it to your needs. have a look at the type of the button ... i changed this to 'button' instead of 'submit' ...
kind regards ...
| | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,136
| | | re: how to close pop up page after email form has been submitted
it should disappear ... do you get an error-message? does the sample work for its own? (i tested with firefox and it worked the way you want) ...
kind regards ...
| | Member | | Join Date: Mar 2007
Posts: 114
| | | re: how to close pop up page after email form has been submitted
Ok i changed the word "button" to "submit". When i click submit, it does go through now. What happens exactly, is that the form remains there and the thank you mesage at the bottome. On top of all this, there is the separate windows pop up that submits the email. You have to click yes a couple of times then the email goes thru. Once it is sent, then you see the old page again, with the "thanks" line and "close" button at the bottom.
Is there any way i can make the text (except the thank you and close) disappear when i submit?
Many thanks
| | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,136
| | | re: how to close pop up page after email form has been submitted
the line: - form.style.display = 'none';
should do the job ... and it works here. is the sample working allone? use a new html-file and paste the sample to it ... load it to the browser and tell me what happens ... ok?
kind regards ...
| | Member | | Join Date: Mar 2007
Posts: 114
| | | re: how to close pop up page after email form has been submitted
Quote:
Originally Posted by gits the line:
- form.style.display = 'none';
should do the job ... and it works here. is the sample working allone? use a new html-file and paste the sample to it ... load it to the browser and tell me what happens ... ok?
kind regards ... i already have that in the javascript function which i put in the top of the page. here it is. is it in the right way or maybe i should move it? - <script>
-
function toggle_display() {
-
var form = document.getElementById('my_form');
-
var thanks = document.getElementById('THANKS');
-
-
form.style.display = 'none';
-
thanks.style.display = 'block';
-
}
-
</script>
I tried the form again, it works fine , except that the form displays after i click submit.
I put this at the top of the page, not in the header file
| | Member | | Join Date: Mar 2007
Posts: 114
| | | re: how to close pop up page after email form has been submitted
here is the exact code of the top and bottom of the page - <html><head>
-
<title>title </title>
-
<link rel="STYLESHEET" type="text/css" href="styles.css">
-
<STYLE TYPE="text/css">
-
<!--
-
body {scrollbar-base-color: #4169E1}
-
-->
-
</STYLE>
-
-
-
<script>
-
function toggle_display() {
-
var form = document.getElementById('my_form');
-
var thanks = document.getElementById('THANKS');
-
form.style.display = 'none';
-
thanks.style.display = 'block';
-
}
-
</script>
-
-
</head>
-
-
<body>
-
-
<table width="538" align="center">
-
-
-
<form action="mailto:me@iweb.com" method="POST" enctype="multipart/form-data" id="my_form" name="pledgeForm">
-
<div id="THANKS" style="display:none;">
-
Thank you for making this pledge.
-
<a href="#" onClick="window.close();">Close</a>
-
</div>
and the bottom part - <td align="left"><input type="submit" value="Email This Form" onClick="toggle_display();"/></td>
-
</form>
-
-
</body>
-
</html>
| | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,136
| | | re: how to close pop up page after email form has been submitted
at first the the thanks-div should be outside of the form-tag ...
| | Member | | Join Date: Mar 2007
Posts: 114
| | | re: how to close pop up page after email form has been submitted
ok iput it outside the form tag. It doesn't work at the top of the page, but it does at the bottom after the end of the form.
The only problem now is how to get rid of the form text when the "thank you" shows?
thanks
| | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,136
| | | re: how to close pop up page after email form has been submitted
... yes of course ... all nodes that should be displayed by the browser has to be located within the documents body ... ;)
... i cannot reproduce your next question ... the code works fine here ... for testing purpose try to set style='display:none' to your form and have a look whether it is hidden or not ...
kind regards
| | Member | | Join Date: Mar 2007
Posts: 114
| | | re: how to close pop up page after email form has been submitted
Quote:
Originally Posted by gits ... yes of course ... all nodes that should be displayed by the browser has to be located within the documents body ... ;)
... i cannot reproduce your next question ... the code works fine here ... for testing purpose try to set style='display:none' to your form and have a look whether it is hidden or not ...
kind regards #
Ok when i added this as you suggested to the form tag: - <form action="mailto:me@web.com" method="POST" enctype="multipart/form-data" id="my_form" name="pledgeForm" style='display:none'>
i submitted the form. The text shows, but the thank you message didn't show.
i'm thinking it may be just easier to close the window on submit, and a thank you comes in a small pop up afterwards for 3 seconds and closes by itself, would this be quicker?
| | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,136
| | | re: how to close pop up page after email form has been submitted
you see the form with adding the style display:none? ... before submit? then it will not work ... i would need your entire html to test it out ... may be its due to something with your table (i am pretty sure) ... i wouldn't recommend more popups ... we will find it out ... you may pm me your entire html-file ... until the thread will get too long ... i'll post the relevant things here after having a look at it ...
kind regards
| | Member | | Join Date: Mar 2007
Posts: 114
| | | re: how to close pop up page after email form has been submitted
Gits,
I've solved it now, Apparently it was a div tag close or something, that was missing. Here is the code, that works, just in case you have a similar problem yourself ever. THe missing div is in line 25 and it's at the end of the "form action" tag
Thanks for all your help. - <html><head>
-
<title>title</title>
-
<link rel="STYLESHEET" type="text/css" href="styles.css">
-
<STYLE TYPE="text/css">
-
<!--
-
body {scrollbar-base-color: #4169E1}
-
-->
-
</STYLE>
-
-
-
<script>
-
function toggle_display() {
-
var form = document.getElementById('my_form');
-
var thanks = document.getElementById('THANKS');
-
form.style.display ='none';
-
thanks.style.display='block';
-
}
-
</script>
-
</head>
-
<body>
-
<div id="THANKS" style="display:none;">
-
Thank you for making this pledge.
-
<a href="#" onClick="window.close();">Close</a>
-
</div>
-
<form action="mailto:me@web.com" method="POST" enctype="multipart/form-data" id="my_form" name="pledgeForm" style="display:block;"> </div>
-
<table width="538" align="center">
-
the form content is here, and the bottom of the form is as below
-
-
<tr><td align="left"><input type="submit" value="Email This Form" onClick="toggle_display();"/></td> </tr>
-
-
</table>
-
</form>
-
</body>
-
</html>
| | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,136
| | | re: how to close pop up page after email form has been submitted
hi ...
it was not a missing div ... i looked over your code ... it was the invalid markup:
- table-end-tag was missing
- tags mustn't overlap
- table should be entirely within the form
... glad you find it out but be aware with the markup next time ;)
kind regards ...
|  | Expert | | Join Date: Jun 2007 Location: Baltimore
Posts: 587
| | | re: how to close pop up page after email form has been submitted
In regards to the original question, it is possible to close a window remotely. - var popup = window.open();
-
popup.close()
| | Member | | Join Date: Mar 2007
Posts: 114
| | | re: how to close pop up page after email form has been submitted
Hi Vole
thank you,
What do you mean remotely? Should i add this code to the page i want to close or it's parent or what?
thanks
| | Expert | | Join Date: Jun 2007 Location: Baltimore
Posts: 587
| | | re: how to close pop up page after email form has been submitted
Remotely means from the page that created the popup. You can make a window close itself by just using window.close().
|  | Newbie | | Join Date: Feb 2007 Location: CN
Posts: 21
| | | re: how to close pop up page after email form has been submitted
try this
[HTML]<script>self.opener=null;self.close();</script>[/HTML]
if your browser is not ie7
|  |
Similar JavaScript / Ajax / DHTML bytes | | |  /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,510 network members.
|
