how to close pop up page after email form has been submitted

**gits** · Jul 2 '07, 05:29 AM

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 ...

**gits** · Jul 2 '07, 07:25 AM

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

**karen987** · Jul 2 '07, 07:38 AM

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.

Code:

<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?

Code:

      <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>

**gits** · Jul 2 '07, 07:58 AM

... 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 ...

**gits** · Jul 2 '07, 08:47 AM

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.getEle mentById('my_fo rm');
var thanks = document.getEle mentById('THANK S');

form.style.disp lay = 'none';
thanks.style.di splay = 'block';
}
</script>
</head>

<body>
<form id="my_form" name="pledgeFor m">
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();">Clos e</a>
</div>
</body>
</html>
[/HTML]
kind regards ...

**karen987** · Jul 2 '07, 11:45 AM

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

Code:

<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

Code:

<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

Code:

<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.

**gits** · Jul 2 '07, 11:58 AM

... ;) 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 ...

**gits** · Jul 2 '07, 12:02 PM

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 ...

**karen987** · Jul 2 '07, 12:24 PM

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

**gits** · Jul 2 '07, 12:47 PM

the line:

Code:

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 ...

**karen987** · Jul 2 '07, 03:51 PM

Originally posted by gits

the line:

Code:

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?

Code:

<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

**karen987** · Jul 2 '07, 04:38 PM

here is the exact code of the top and bottom of the page

Code:

<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

Code:

<td align="left"><input type="submit" value="Email This Form" onClick="toggle_display();"/></td>
        </form>
   
    </body>
</html>

**gits** · Jul 2 '07, 05:57 PM

at first the the thanks-div should be outside of the form-tag ...

**karen987** · Jul 2 '07, 07:23 PM

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

how to close pop up page after email form has been submitted

how to close pop up page after email form has been submitted

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment