提交后刷新Ajax表单

Question

我已经在Wordpress网站上添加了一个简单的Ajax表单。 验证有效，但是在提交而不是发送电子邮件之后，表单将刷新。

我的代码是：

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

和php.process文件：

<?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);

?>

这是实时表格的链接： http : //testtermil.pl/wordpress/kontakt/

我尝试使用不同的jquery版本添加代码以不同的顺序，但这没有帮助。 我还检查了我的托管服务提供商，并打开了电子邮件服务。

如果您有任何想法请告诉我。 该表格发送电子邮件的方式。 预先非常感谢Neko

Answer 1

您必须阻止通过event.preventDefault()提交表单：

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

编辑（完整代码）

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

我想原因是，在您的html代码中，您设置了输入type =“ submit”，它实际上刷新了表单（这是浏览器的默认行为）：

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

由于要使用ajaxSubmit，请将其更改为button并尝试。

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