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

Code:

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

Code:

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