Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: recognizing if submit button is clicked

  1. #1
    Join Date
    May 2013
    Location
    Southampotn
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default recognizing if submit button is clicked

    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.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,958
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,958
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    May 2013
    Location
    Southampotn
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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>
    Last edited by vwphillips; 06-02-2013 at 02:44 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    May 2013
    Location
    Southampotn
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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??
    Last edited by terrys; 06-05-2013 at 10:59 AM.

  7. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    May 2013
    Location
    Southampotn
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by terrys; 06-05-2013 at 03:07 PM.

  9. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,958
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    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."; 
    }
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  10. #10
    Join Date
    May 2013
    Location
    Southampotn
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

Similar Threads

  1. Convert submit button to Onchange submit
    By stand247 in forum JavaScript
    Replies: 3
    Last Post: 10-25-2011, 09:01 AM
  2. Replies: 0
    Last Post: 03-11-2011, 08:20 PM
  3. Making Div Button work like submit button
    By balushahi in forum JavaScript
    Replies: 1
    Last Post: 03-21-2008, 03:42 PM
  4. Replies: 0
    Last Post: 12-05-2005, 09:46 AM
  5. Which Button was clicked?
    By jdc in forum JavaScript
    Replies: 1
    Last Post: 10-17-2005, 08:28 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •