Javascript Ajax表单在提交后刷新

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

jQuery.validator.addMethod（'answercheck'，函数（值，元素）{
返回此.optional（元素）| |/^\bcat\b$/.test（值）；
}，“键入正确答案-\”；
//验证联系人表单
jQuery（函数（）{
jQuery（'#contact'）。验证({
规则：{
姓名：{
要求：正确，
最小长度：2
},
电邮：{
要求：正确，
电子邮件：真的
},
信息：{
必填项：true
},
答复:{
要求：正确，
答：对
}
},
信息：{
姓名：{
要求：“来吧，你有名字，不是吗？”，
minlength:“您的姓名必须至少包含2个字符”
},
电邮：{
必填：“无电子邮件，无消息”
},
信息：{
要求：“嗯……是的，你必须写一些东西来发送此表格。”，
minlength：“就这些？真的吗？”
},
答复:{
要求：“对不起，回答错了！”
}
},
submitHandler:函数（表单）{
jQuery（表单）.ajaxSubmit({
类型：“POST”，
数据：jQuery（form）.serialize（），
url:“http://testtermil.pl/wordpress/process.php",
成功：函数（）{
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（）；
});
},
错误：函数（）{
jQuery（“#contact”）.fadeTo（“slow”，0.15，function（）{
jQuery（'#error'）.fadeIn（）；
});
}
});
}
});
});

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

?>

下面是live form的链接：

我尝试过使用不同的jquery版本，将代码按不同的顺序添加，但没有帮助。我也已经和我的主机提供商联系过了，电子邮件服务已经开通了

如果你有任何想法，请告诉我。如何做此表单发送电子邮件。 多谢各位，

---

Neko

您必须阻止通过

事件提交表单。preventDefault（）

：

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

编辑（完整代码）

---

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

---

所以你不想刷新页面？我不知道你想要什么。到底是什么问题？你想达到什么目的？我需要表格来工作。它没有发送电子邮件。你看过这篇文章吗？抱歉，那么如何在代码中实现它呢？我是Javascriptyou新手您只需在验证之前添加submit函数我已经尝试了您的代码，但在单击按钮后什么也没有发生。我也尝试了未经验证的代码。我收到了大量空消息。这在这里非常有效：我已经测试了此功能，即使没有默认方法，它也可以正常工作！我试过将标签提交给button，但仍然没有成功。也许是wordpress的问题？哦！如果是这样的话，你最好通过在记事本中获取html和脚本代码来进行外部测试。我通过在我的主页上创建邮箱并将新地址放入process.php页面并在表单中添加process.php in action标记来发送电子邮件。但有一个问题。现在我在提交表格后得到了空白页。如何在提交后将用户重定向回表单？抱歉！我不明白。顺便说一句，你仍然可以通过设置

window.location.href

，让它导航到其他页面。它可以很好地重定向。我现在需要的是确认消息。我应该用php还是js编写它？

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();
                    });
                }
            });
        }
    });
});

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

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