Log in

View Full Version : recognizing if submit button is clicked


terrys
06-02-2013, 12:45 PM
Hi,
I'm looking for two snippets of code, one that recognizes that when my site form submit button is clicked will auto switch on the" thank you page". and a second piece of code that will switch from the "thank you page" back to the index page.
I have used html 5 throughout.
Beverleyh
06-02-2013, 01:44 PM
Assuming that you are using php to process your form data on the server, you can simply use php's header() function at the end of you're processing script to redirect to the thanks page on successful submission: http://php.net/manual/en/function.header.php

Additionally, on the thanks page, you could implement a timed redirect using a combination of JavaScript and a meta refresh, as detailed here: http://www.dynamicdrive.com/forums/showthread.php?12134-Timed-Redirect (use both for extra reliability)

For further help, please provide a link to your page and your form processing script to allow us to work with the specifics of your individual setup.
Beverleyh
06-02-2013, 02:03 PM
Additional - Remember also to include a manual hyperlink option in the thanks web page body, just in case both js/meta redirects fail. Unlikely, but you never know, so its better to er on the side of caution.
terrys
06-02-2013, 02:10 PM
Hi,
Thanks for your reply, I have used no php at all, everything is in html5 including the validation I've only tested it via my browser (Firefox) The form seems to work okay.
vwphillips
06-02-2013, 02:28 PM
not quite what you asked for but


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

#mask {
position:fixed;z-Index:100px;left:0px;bottom:0px;width:100%;height:0px;background-Color:#FFCC66;
/* Moz */
opacity: .5;
/* IE5-7 */
filter: alpha(opacity=50);
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#thanks {
position:fixed;z-Index:101px;left:200px;top:-1200px;width:400px;height:300px;background-Color:#FFFFCC;border:solid red 1px;font-Size:40px;text-Align:center;
}

/*]]>*/
</style></head>

<body>
<form onsubmit="return zxcSplashMessage.Open('thanks',this,5000);" action="mypage.php" >
<input name="tom" />
<input type="submit" name="" value="Submit" />
</form>

<div id="mask" ></div>
<div id="thanks" >Thank You</div>
<script type="text/javascript">
/*<![CDATA[*/

zxcSplashMessage={

Open:function(id,frm,ms){
var o=this['zxc'+id];
if (o){
o.msk.style.height=o.msk.offsetTop+'px';
o.mess[0].style.left=(o.msk.offsetWidth-o.w)/2+'px';
o.mess[0].style.top=(o.msk.offsetHeight-o.h)/2+'px';
this.animate(o,o.mess,o.mess[3],o.mess[1],new Date(),o.ms,frm,ms);
}
return false;
},

init:function(o){
var id=o.MessageID,msk=document.getElementById(o.MaskID),ms=o.Animate,mess=document.getElementById(id),w,h;
if (mess){
w=mess.offsetWidth;
h=mess.offsetHeight;
msk=msk||document.createElement('DIV');
msk.style.position='fixed';
msk.style.left='0px';
msk.style.bottom='0px';
msk.style.width='100%';
msk.style.height='0px';
this['zxc'+id]={
mess:[mess,[0,w,h,0],[h/2,w/2,h/2,w/2],[h/2,w/2,h/2,w/2]],
w:w,
h:h,
msk:msk,
ms:typeof(ms)=='number'&&ms>0?ms:1000
}
document.body.appendChild(msk);
document.body.appendChild(mess);
}
},

animate:function(o,a,f,t,srt,mS,frm,dly){
clearTimeout(a[7]);
var oop=this,ms=new Date()-srt,n,z0=0;
for (;z0<4;z0++){
n=(t[z0]-f[z0])/mS*ms+f[z0];
a[3][z0]=Math.max(Math.round(isFinite(n)?n:a[4][z0]),0);
}
oop.cng(a,a[3]);
if (ms<mS){
a[7]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,frm,dly); },10);
}
else {
frm?a[7]=setTimeout(function(){ frm.submit(); },dly||mS):null;
oop.cng(a,t);
}
},

cng:function(a,t){
a[0].style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
}

}

zxcSplashMessage.init({
MessageID:'thanks',
MaskID:'mask',
Animate:1000
});




/*]]>*/
</script></body>

</html>
terrys
06-05-2013, 10:49 AM
Thank you for your code, not quite sure it's what I'm looking for ans I already have a "thank you2 page that i want to keep as it in the same style as the rest of the site.
Is there any way of changing it in order to open my "thank you" page??
vwphillips
06-05-2013, 11:32 AM
the objective of my post was to display the thank you information without loading another page

the usefulness of this approach depends of what you want in your thank you page and if the HTML fits in the the PopUp
terrys
06-05-2013, 02:57 PM
Hi,
your code works fine, however I am looking for code that I can incorporate into my contact form page
that will replace my contact page (when the submit button is clicked) with my thank you page
and then after a short delay reload my index page.
Beverleyh
06-05-2013, 03:18 PM
It doesn't really make much sense to redirect to a thanks page UNTIL the submitted form data has been successfully processed and I believe the only way to do that is server-side (not with JavaScript, which is client-side). I'm not talking about validation - whether that's with JavaScript or natively with HTML5 - although you should include additional validation on the server-side too. I'm actually talking about the server-side scripts that *do something* with the information once its been received. So that could be to send you an email and/or transfer the data into a database. Commonly that would be done with something like PHP so this is where I propose you action your thanks redirect - at the point where the server has successfully *done something* with the data.

Example;



$to = "you@website.com";
$subject = "My Contact Form";
$email = $_REQUEST['email'] ;
$message = $_REQUEST['message'] ;

$headers = "From: $email";
$sent = mail($to, $subject, $message, $headers) ;

if ($sent) {
header("Location: http://www.mywebsite.com/thanks.php"); // only redirect to thanks page on successful submission
exit();
} else {
echo "There was a problem sending your message - please try to submit the form again.";
}
terrys
06-05-2013, 03:26 PM
Hi , I'm getting more confused every minute,
I'm trying to read up PHP, but my level is just below beginner !!
Where do I add your code into my contact page?
Beverleyh
06-05-2013, 03:34 PM
I don't know - you haven't posted your page ;)

In this simple example, the PHP processing script would go into a file for processing, so let's call it "process.php".

Then you'd point to it via the form action attribute, so it is actioned once the form is posted;
<form action="process.php" method="post">

I suggest you Google a few PHP form tutorials first though.
letom
06-05-2013, 08:01 PM
@ Terry

It would be nice if you post the code you are working , then members can add your requirement in that code and it will understand and clear your doubts.
terrys
06-11-2013, 03:29 PM
Hi,
Thanks to everyone, I think I'm on my way now.
I am reading PHP, slowly!