提交后刷新Ajax表单

Question

I have added a simple Ajax form to my wordpress website. The validation works, but the form refreshes after submitting instead of sending the email.

My code is:

    <script type="text/javascript">
jQuery.validator.addMethod('answercheck', function (value, element) {
        return this.optional(element) || /^\bcat\b$/.test(value);
    }, "type the correct answer -_-");

// validate contact form
jQuery(function() {
    jQuery('#contact').validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true
            },
            answer: {
                required: true,
                answercheck: true
            }
        },
        messages: {
            name: {
                required: "come on, you have a name don't you?",
                minlength: "your name must consist of at least 2 characters"
            },
            email: {
                required: "no email, no message"
            },
            message: {
                required: "um...yea, you have to write something to send this form.",
                minlength: "thats all? really?"
            },
            answer: {
                required: "sorry, wrong answer!"
            }
        },
        submitHandler: function(form) {
            jQuery(form).ajaxSubmit({
                type:"POST",
                data: jQuery(form).serialize(),
                url:"http://testtermil.pl/wordpress/process.php",
                success: function() {
                    jQuery('#contact :input').attr('disabled', 'disabled');
                    jQuery('#contact').fadeTo( "slow", 0.15, function() {
                        jQuery(this).find(':input').attr('disabled', 'disabled');
                        jQuery(this).find('label').css('cursor','default');
                        jQuery('#success').fadeIn();
                    });
                },
                error: function() {
                    jQuery('#contact').fadeTo( "slow", 0.15, function() {
                        jQuery('#error').fadeIn();
                    });
                }
            });
        }
    });
});
</script>

And php.process file:

<?php


    $to = "myemail@gmail.com";
    $from = $_REQUEST['email'];
    $headers = "From: $from";
    $subject = "You have a message.";

    $fields = array();

    $fields{"email"} = "email";
    $fields{"message"} = "message";

    $body = "Here is what was sent:\n\n"; foreach($fields as $a => $b){   $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }

    $send = mail($to, $subject, $body, $headers);

?>

And here's link to live form: http://testtermil.pl/wordpress/kontakt/

I've tried using different jquery version add putting the code in different order but it didn't help. I've also checked with my hosting provider and email service is on.

Please let me know if you have any ideas. What to do so this form sends email. Many thanks in advance, Neko

Answer 1

You must prevent submiting form via event.preventDefault() :

$("#contact").submit(function(e) {
    e.preventDefault();
  }).validate({
  rules: {...},
  submitHandler: function(form) {
    ...
  }
});

edit (complete code)

jQuery.validator.addMethod('answercheck', function (value, element) {
        return this.optional(element) || /^\bcat\b$/.test(value);
}, "type the correct answer -_-");

// validate contact form
jQuery(function() {
    jQuery('#contact').submit(function(e) {
    e.preventDefault();
  }).validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true
            },
            answer: {
                required: true,
                answercheck: true
            }
        },
        messages: {
            name: {
                required: "come on, you have a name don't you?",
                minlength: "your name must consist of at least 2 characters"
            },
            email: {
                required: "no email, no message"
            },
            message: {
                required: "um...yea, you have to write something to send this form.",
                minlength: "thats all? really?"
            },
            answer: {
                required: "sorry, wrong answer!"
            }
        },
        submitHandler: function(form) {
            jQuery(form).ajaxSubmit({
                type:"POST",
                data: jQuery(form).serialize(),
                url:"http://testtermil.pl/wordpress/process.php",
                success: function() {
                    jQuery('#contact :input').attr('disabled', 'disabled');
                    jQuery('#contact').fadeTo( "slow", 0.15, function() {
                        jQuery(this).find(':input').attr('disabled', 'disabled');
                        jQuery(this).find('label').css('cursor','default');
                        jQuery('#success').fadeIn();
                    });
                },
                error: function() {
                    jQuery('#contact').fadeTo( "slow", 0.15, function() {
                        jQuery('#error').fadeIn();
                    });
                }
            });
        }
    });
});

Answer 2

I guess the reason is, in your html code, you have set input type="submit" which actually refreshes the form(this is browser default behavior):

    <input style="width:80px;margin-left: 315px;" id="submit" name="submit" 
type="submit" value="Send">

Since you want to use ajaxSubmit, change it to button and try.

 <input style="width:80px;margin-left: 315px;" id="submit" name="submit" 
type="button" value="Send">