javascript - 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 版本添加以不同的顺序放置代码，但没有帮助。我还咨询了我的托管提供商，电子邮件服务已开启。

如果您有任何想法，请告诉我。该怎么做才能让此表单发送电子邮件。提前谢谢了，猫

Answer 1

我猜原因是，在你的html代码中，你设置了 input 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">