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
23  3172  gits 5,390
Expert Mod 4TB
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 5,390
Expert Mod 4TB
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
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>
gits 5,390
Expert Mod 4TB
... 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 5,390
Expert Mod 4TB
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 ...
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.
gits 5,390
Expert Mod 4TB
... ;) 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 5,390
Expert Mod 4TB
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 ...
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 5,390
Expert Mod 4TB
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 ...
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
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>
gits 5,390
Expert Mod 4TB
at first the the thanks-div should be outside of the form-tag ...
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
gits 5,390
Expert Mod 4TB
... 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
... 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?
gits 5,390
Expert Mod 4TB
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
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>
gits 5,390
Expert Mod 4TB
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 ...
In regards to the original question, it is possible to close a window remotely. - var popup = window.open();
-
popup.close()
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
Remotely means from the page that created the popup. You can make a window close itself by just using window.close().
try this
[HTML]<script>self.opener=null;self.close();</script>[/HTML]
if your browser is not ie7
Sign in to post your reply or Sign up for a free account.
Similar topics
by: dmiller23462 |
last post by:
I'm trying to create a submission page for users to request PC/LAN
Access....If they select "Yes" in the field asking about if they need
Non Standard Software, I want several other HTML fields to...
|
by: Seth E Seligman |
last post by:
I'm working on a web based file manager. The rename file function creates a new window with a form allowing the user to enter a new file name. Before the form gets submitted, I want to make sure that...
|
by: Irvin Amoraal |
last post by:
Process:
I have a form which uploads a file from client to server written in PHP.
When the user presses the submit button, I use the "onSubmit" event to
execute javascript to open a child window...
|
by: JSjones |
last post by:
when a form is submitted from the main window i want a pop up window
to open from the onclick event. i have that working, now how can i
close the pop up window from the main window after the main...
|
by: anonieko |
last post by:
Scenario: You have a page that is TOO slow to refresh.
But it allows partial flushing of html contents. I.e.
Submit button already appears but you don't
want your users to click on it prematurely...
|
by: mcyi2mr3 |
last post by:
Hi all
I'm new to javascript and im trying to add a close button function to
my certain pages of my site. I use this code:
<a href='javascript:window.close();'>Close Window</a>
to create a...
|
by: Matt Jensen |
last post by:
Howdy
I've got a ASP.NET webform page that pops up a window for a user to make a
selection. Once they make a selection in this popup window, the form in the
popup is submitted an update to the...
|
by: Ed Jay |
last post by:
I want to use history.go() to navigate between my previously loaded pages.
I'm looking for a way to trigger a function call when a page is accessed
using history.go(). Is there an event generated?...
|
by: whyyyy |
last post by:
The script below works fine if the form is filled out and submitted.
But a (blank) e-mail is sent whenever the page loads, even when the form is
not submitted. I would like to receive the e-mail...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |
