CODEWITHSUNDEEP
phpjavascriptformshtmlconfirmation
Renan
Renan

Reputation: 153

HTML5 php contact form script confirmation

I'm having some trouble with a script confirmation. By standard it's set to hide the contact form and display a confirmation message but it's not working for all browsers. After some tests I realized it doesn't work for most IE versions, which are around 40% of my visitors.

How do I replace the hide-and-show-msg to a "thankyou.html"? I'm guessing this works as most IEs fail to show the confirmation message although they manage to hide the form. The code in 'header' is currently:

<script src="php/js/jquery.validate.js"></script>
<script src="php/js/jquery.placeholder.js"></script>
<script src="php/js/jquery.form.js"></script>
<script>
$(function(){
$('#contact').validate({
submitHandler: function(form) {
    $(form).ajaxSubmit({
    url: 'thankyou.php',
    success: function() {
    $('#contact').hide();
    $('#contact-form').append("<p class='thanks'>Thank you! The message was sent.</center></p>")
    }
    });
    }
});         
});
</script>

Upvotes: 2

Views: 1523

Answers (3)

mplungjan
mplungjan

Reputation: 178007

Solved.

Reading http://groups.google.com/group/jquery-en/browse_thread/thread/58a9cbc1068d28c0/eb4bedb2cc36b126?pli=1

I added a conditional script

<head>
<!--[if IE]>
<script >
document.createElement("section"); 
</script >
<![endif]-->

http://plungjan.name/test/testform_validation.html

What you need to do is to append to an element understood by IE.

If you do not want the conditional script, add a div to the end of the page and append to that instead like here: http://plungjan.name/test/testformvalidation.html

Other issue: I got 

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1)
Timestamp: Tue, 17 May 2011 13:15:29 UTC


Message: Unexpected call to method or property access.
Line: 5569
Char: 5
Code: 0
URI: http://code.jquery.com/jquery-1.6.1.js

Seems the finally is not supported

When I Added catch(e) {} before the finally - error gone 

resolveWith: function( context, args ) {
  if ( !cancelled && !fired && !firing ) {
    // make sure args are available (#8421)
    args = args || [];
    firing = 1;
    try {
      while( callbacks[ 0 ] ) {
        callbacks.shift().apply( context, args );
      }
    }
    catch(e) { /* ADDED BY ME */ }
    finally {
      fired = [ context, args ];
      firing = 0;
    }
  }
  return this;
},

Upvotes: 1

George Cummins
George Cummins

Reputation: 28906

Set thankyou.php as the form action, and use jQuery validate() only to ensure that the form fields were completed:

<script>
    $(function(){
       $('#contact').validate({
            // Validate your form fields here
       });
    });
</script>
...
<form id="contact" action="thankyou.php" method="post">

Use thankyou.php to process the form submission and redirect the user to the thankyou.html:

<?php
header("Location: thankyou.html");
?>

This approach will eliminate the need for the AJAX call and form hiding.

Upvotes: 0

LostInTheCode
LostInTheCode

Reputation: 1744

Replace 

$('#contact').hide();     $('#contact-form').append("<p class='thanks'>Thank you! The message was sent.</center></p>")

with window.location.href="thankyou.html";

Easy solution. Of course, this code uses relative paths, replace the "thankyou.html" with the actual location of that page.

Also, take out the part that says </center>. You shouldn't be adding a closing tag in that code, the center object should be closed correctly already. Perhaps that's the problem why IE won't show it. HTML coded wrong.

EDIT: And yes, if you so incline, you can use jQuery via $(window.location).attr('href', 'thankyou.html'); though this offers no benefits to my original solution, which is easier to read and understand, not to mention abitrarily faster.

Upvotes: 0

Related Questions