Help with popup on 'Submit' action [Archive]

View Full Version : Help with popup on 'Submit' action

^KoalaBear^

05-16-2003, 09:29 PM

Have searched to see if there was an existing answer for my query but unable to find one.....

I have the following snippet of code to send a user to a 'thanks.html' page after submitting a form....

<input type="submit" value="Submit"><input type="reset" value="Reset"><input name="OurEmail" type="hidden" value="yada@yada.com"><input
name="redirectTo" type="hidden"
value="http://yada.yada.com/thanks.html">

....but wish to change it to send user to a borderless popup image ( thanks-popup.jpg size: 561 x 241 ) opening in centre of 800 x 600 screen then auto-close after 5 secs or when user hits 'close' on mapped reference of image/html.

I have made a new pop-thnks.html with above thanks-popup.jpg size: 561 x 241 roughly centred in it but am lost from there on. :(

zoobie

05-17-2003, 12:04 AM

It can be done.with javascript centering and toggling an iframe with a script @ www.dynamicdrive.com :D

^KoalaBear^

05-18-2003, 03:16 AM

Thanks for the lead Zoobie...

I have progressed to getting the script I need to open my popup using a text link (see below)

<script>
function openpopup(){
var popurl="popup-thanks.html"
winpops=window.open(popurl,"","width=561,height=241,")
}
</script>
<a href="javascript: openpopup()">Click here to open window</a>

....but wish (1) to change the action part... <a href="javascript: openpopup()">Click here to open window</a> to work from the form submit button instead (see below)

<input name="redirectTo" type="hidden"
value="http://yada.yada.com/popup-thanks.html">

...with the same "width=561,height=241" popup as in the top code, and (2) have my popup close automatically after 5 secs and/or when the user hits a mapped reference on the popup.

Any ideas appreciated.

Cheers
KB...

zoobie

05-18-2003, 03:50 AM

Ok...I'm gettin' lost. Are you using the borderless iframe popup from dynamicdrive or have you changed your mind and just using a window.open javascript?

Try this using your script:
<input type="button" value="Whatever" onClick="openpopup();">

or this by itself:

<input type="button" value="Whatever" onClick='window.open("popup-thanks.html","","width=561,height=241");'>

Lets get this first. Then, we'll finish it.

cheesebagpipe

05-18-2003, 05:26 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var thankswin = null;
var HTML = '';
var img_src = (new Image().src) = 'http://apache.airnet.com.au/~anzacs/refer/thanks-popup.gif';

function thanks() {
HTML = '';
HTML += '<html><head><title>* * * Thank you! * * *</title></head>';
HTML += '<body bgcolor="black" onblur="self.close()" onclick="self.close()" style="margin:0px;">';
HTML += '<img src="' + img_src + '">';
HTML += '<script>onload=function(){setTimeout("self.close()",5000);}<'+'/script>';
HTML += '</body></html>';
var w = 561; //window width
var h = 241; //window height
var l = (screen.availWidth - w) / 2;
var t = (screen.availHeight - h) / 2;
thankswin = open('javascript:opener.HTML','thankswin','left='+l+',top='+t+',width='+w+',height='+h+',status=0');
if (thankswin && !thankswin.closed) thankswin.focus();
return true;
}

</script>
</head>
<body>
<form onsubmit="return thanks()">
<input name="OurEmail" type="hidden" value="yada@yada.com">
<input name="redirectTo" type="hidden" value="http://yada.yada.com/thanks.html">
<input type="reset" value="Reset" onclick="return confirm('This will reset all entries. Proceed?')">
<input type="submit" value="Submit">
</form>
</body>
</html>

Put this all on one line:

thankswin = open('javascript:opener. HTML','thankswin','left='+l+',top='+t+',width='+w+',height='+h+',status=0');

...and close up the space between

opener.HTML

(this editor screws it up)

^KoalaBear^

05-18-2003, 08:10 AM

I apologise for confusing you zoobie... yes I did get myself confused after I got all excitied about progressing a lil bit! LOL Sorry Mate!

I think I would prefer a chromeless, auto-close popup but am presently happy with the look that you and cheesebagpipe have provided.

Here (http://apache.airnet.com.au/~anzacs/refer/refer-a-friend.html) is my refer or start html which includes the following 'submit' code... Refer to a dummy email addy to see the redirectTo effect.

<td><input type="submit" value="Submit"><input type="reset" value="Reset"><input name="OurEmail" type="hidden" value="yada@yada.com"><input name="redirectTo" type="hidden" value="http://apache.airnet.com.au/~anzacs/refer/thanks.html"><input
name="emailSubj" type="hidden" value="G'Day from Australia"><input
name="emailMsg" type="hidden"
value="yada yada yada yada yada yada yada yada yada yada
Cheers from Australia! KB...">

I believe it is the 'redirectTo' action (below)

<input name="redirectTo" type="hidden" value="http://apache.airnet.com.au/~anzacs/refer/thanks.html">

....which needs to be changed or deleted to make the "Submit" button do what you both have suggested...... with the proviso it opens the popup image ( "http://apache.airnet.com.au/~anzacs/refer/thanks-popup.gif" )of window size w. 561 x h. 241 and auto closes at 5 secs.... as cheesebagpipes's seems to do.

Getting it to have a chromeless look might be an added bonus but I'm not sure it works on all browsers and can be made to auto-close after 5 secs. I'd be pleased to have codes for both if it's not asking too much.

Here (http://apache.airnet.com.au/~anzacs/refer/popup-test2.html) is the dummy one I made from cheesebagpipe's (:D I laugh every time I type that... sorry!! ) suggested script but as you can see I haven't been able to work out how to combine both scripts to suit.

Thanks to you both
KB...

cheesebagpipe

05-18-2003, 08:49 AM

Bear...

Edited the above to suit. Sorry to say I don't follow the redirect thing...maybe some more details would help. Thank you for spelling my name correctly.

zoobie

05-18-2003, 05:44 PM

Since I'm into efficientcy, I'd just toggle a borderless centered iframe's visibility. Maybe cheesebagpipe could help you with the js timeout. :D

^KoalaBear^

05-18-2003, 07:02 PM

Yep thanks for the edit of your suggestion, mate. That's the test one I uploaded HERE. (http://apache.airnet.com.au/~anzacs/refer/popup-test2.html) What I now need is to somehow use your code (or as zoobie suggests, a more efficient one) to add it to my script HERE (http://apache.airnet.com.au/~anzacs/refer/refer-a-friend.html) to send user to the auto-closing and borderless popup, instead of my thanks.html, AFTER it sends the email form.

KB...

^KoalaBear^

05-18-2003, 07:10 PM

LOL I think I agree zoobie but I'm not techi enough to do it!! I've said it before and I'll say it again.... I'm the oldest nerd-newbie on the boards!! :D

Here is cheesebagpipe's closing function/s on his suggested solution, above

function thanks() {
HTML = '';
HTML += '<html><head><title>* * * Thank you! * * *</title></head>';
HTML += '<body bgcolor="black" onblur="self.close()" onclick="self.close()" style="margin:0px;">';
HTML += '<img src="' + img_src + '">';
HTML += '<script>onload=function(){setTimeout("self.close()",5000);}<'+'/script>';
HTML += '</body></html>';

LOL Ya wanna toggle for me now, baby? :D

KB...

zoobie

05-19-2003, 03:15 AM

Well, ok...I'll try. :p This works with IE & NS modern browsers.

First, put this in the head:

<script>
function openWin() {
document.getElementById("frame").style.display=''
}
function closeWin() {
document.getElementById("frame").style.display='none'
}
</script>

Secondly, put the below code a few lines down in the body saving you the "centering" script. Don't worry...It won't show until someone clicks the submit button.

<div style="text-align:center"><iframe style="display:none;overflow:hidden" width="561" height="241" src="popup-thanks.html" frameborder="0" id="frame"></iframe></div>

Thirdly, dunno what all those "hidden" fields are in your buttons...but anyway...in your form's submit button:

<input type="submit" value="Whatever" onClick="openWin();">

Fourthly, fix up your popup-thanks.html page below a tad. The below, if put at the top, puts a fake titlebar with a close "X" in the upper right hand corner without using images. Of course, this is completely optional...but I kinda like it. Or you could simply put a text link somewhere on the thank-you page that says "Close" using <a href="#" onclick="parent.closeWin();">Close</a> or a button using <button onClick="parent.closeWin();">Close</button>

<head>
<style type="text/css">
.titlebar {font:bold 16 tahoma;color:white;text-decoration:none;text-indent:5px;margin-right:5px}
</style>
</head>
<body bgcolor="black" style="overflow:auto;margin:0;padding:0">
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="blue">
<tr>
<td class="titlebar">KoalaBear's Thankyou</td>
<td align="right"><a href="#" class="titlebar" onclick="parent.closeWin();">X</a></td>
</tr>
</table>
Rest of page here.
</body>
</html>

...and fifthly, you 'd have to add the javascript 5 second timeout to the first page's script in step one. For this, it's best to go up 3 doors to the javascript forum as I couldn't get it to work. Ha ha!

So, it's all basically done with 3 lines of javascript and 1 line of iframe code. Any q's...Give a holler. You may want to put your page on the internet and we could fix it up that way, too.

Presto! A borderless thank-you page. :cool:

^KoalaBear^

05-19-2003, 06:32 PM

Ok I've made the amendments as you've suggested, zoobie. See the uploaded new refer-a-friend-zoobie.html HERE (http://apache.airnet.com.au/~anzacs/refer/refer-a-friend-zoobie.html) and the resultant popup-thanks-zoobie.html HERE (http://apache.airnet.com.au/~anzacs/refer/popup-thanks-zoobie.html).......

You should check that I've added your amendments per your post insructions, to the originals refer-a-friend.html HERE (http://apache.airnet.com.au/~anzacs/refer/refer-a-friend.html) and popup-thanks.html HERE (http://apache.airnet.com.au/~anzacs/refer/popup-thanks.html)

The hidden fields you asked about are simply the pre-determined webmaster (recipient)'s addy, email subject and email message for this formmail script.

When you try to send a referral with the amended one you'll see your <input type="submit" value="Whatever" onClick="openWin();"> clashes with the existing <input type="submit" value="Submit"> and produces a 'whatever' button. Note the action up in the head of this html <form action="http://wwwtoolz.com/refer/refer.asp" method="post"> which actually sends the email to the referer's friend.

There seems to be other script clash/es too which is/are not allowing the mail action to proceed.

The line which sends the user to a 'thankyou page' in the original refer.html is <input name="redirectTo" type="hidden" value="http://yada yada yada /yada/refer/thanks.html">

LOL Now I've got a migraine headache!! :D

Cheers
KB....

^KoalaBear^

05-19-2003, 06:37 PM

If you feel ya up to it, zoobie... you could make any necessary changes to the WHOLE code/s and attach them in a txt file and I'll upload them and try again.

Thanks for your continued help :)
KB...

zoobie

05-19-2003, 07:05 PM

Take out my "whatever" button completely and change yours to:
<input type="submit" value="Submit" onClick="openWin();"> for beginners.
Personally, I think you'd be better off just sending them to a another whole thank-you page by using <input type="submit" value="Submit" onClick="window.location='thank-you.html';"> ...but whatever. ;)