Dear friends, I need your help. I have a simple form with jquery validation. I need to show my "thankyou" page after form submit. After submit, the page will send an email (back-end) and redirect the page to 'thank you' page. But my script not redirecting. Please check the attachment for the files. I think the jQuery script in coupon.html page preventing to redirect. Please help coupon.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Mobile Restaurant Template</title> <!-- Below is the code for theme roller --> <link rel="stylesheet" href="css/themes/custom.css" /> <link rel="stylesheet" href="css/themes/custom.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <!-- Place somewhere in the <head> of your document --> <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="jquery.flexslider.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Place in the <head>, after the three links --> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); }); </script> <!-- Contact Form Script--> <script> $(document).ready(function(){ $('#submit').click(function(){ $.post("coupon.php", $("#mycontactform").serialize(), function(response) { $('#success').html(response); //$('#success').hide('slow'); }); return false; }); }); </script> <!-- Contact Form Script--> </head> <body> <div data-role="page" data-add-back-btn="true" data-theme="a"> <!-- Page Header --> <div data-role="header"> <div id="branding"> <h1>Restaurant Template</h1> </div> </div> <div class="ui-bar ui-bar-b"> <h1 style="display:inline-block; width:92%; margin-top:5px; text-align:center;">Save an instant $10 off your bill and join our VIP Club! </h1> </div> <!-- End Page Header --> <!-- Page Content --> <div data-role="content"> <!-- ABOUT US IMAGE --> <p style="text-align:center"><img src="images/about.jpg" alt=""/></p> <!-- END ABOUT US IMAGE --> <h5>Enter your details below to receive your discount instantly</h5> <form action="coupon.php" method="post" id="mycontactform" autocomplete="off" > <label for="name">Name:</label> <input type="text" name="name" id="name" /><br /> <label for="email">Email:</label> <input type="text" name="email" id="email" /><br /> <label for="phone">Phone:</label> <input type="text" name="phone" id="phone" /><br /> <input style="margin-left:0px;margin-top:4px;" type="checkbox" name="offer" value="yes" checked> <div style ="margin-left:40px;">I would like to receive your latest promotions and offers</div> <br /> <input type="button" value="Send" id="submit" /><div id="success"></div> </form> </div> <!-- End Page Content --> <br /> <br /> <!-- Page Footer --> <div data-role="footer" class="nav-footer-styling"> <div data-role="navbar" class="nav-footer-styling" data-grid="c"> <ul> <li><a href="index.html" id="home" data-icon="custom" data-transition="slidedown" rel="external">Home</a></li> <li><a href="menu.html" id="menu" data-icon="custom" data-transition="slidedown" rel="external">Menu</a></li> <li><a href="specials.html" id="specials" data-icon="custom" data-transition="slidedown" rel="external">Specials</a></li> <li><a href="tel:+18665551234" id="call" data-icon="custom">Call Us</a></li> </ul> </div> </div> <!-- End Page Footer --> </div> </body> </html> HTML:
Dear @nickspring , thank you for reply. But its not working. Would you please download the attached file and test it? thanks
unfortunately i don't have PHP on my computer, but I'm sure that you should change code in coupon.html.
As I often do, I have to ask why the devil you are wasting time even running this through ANY scripting as this looks like something that should be handled server-side, without all the fat bloated "scripting for nothing" garbage... to go with the ARIA roles for nothing, endless div and classes for nothing, line-breaks doing padding's job, incomplete form, gibberish use of numbered headings (where's the H4 that H5 is a subsection of? You aren't using 5's SECTION tag, so how can you have more than one H1?), etc, etc... As I keep saying, if you can't make a form that works without scripting FIRST, you have no business adding scripting to it... and you just might find you don't need scripting once you do!
Replace: $('#success').html(response); With window.location.href ="thankyou.html"; If that doesn't work, post the error that happens if it even reaches that point. Alternatively, if you want the user to see the message first (response), then do a settimeout.
You are including jQuery twice: It's better to keep the latest version, but the flexslider might not only work with 1.6.2 so you may have to keep that one. Your script should be like this: <script> $(function(){ $('#submit').click(function(e){ e.preventDefault(); $.post("coupon.php", $("#mycontactform").serialize(), function(response) { $('#success').html(response); //$('#success').hide('slow'); window.location.href="Enter your URL here!!!!"; }); }); }); </script> Code (markup):