1

我正在尝试在不刷新页面的情况下提交表单，但event.preventDefault();无法正常工作。这是我到目前为止所拥有的

$('#contactform').on('submit', function() {
    event.preventDefault();
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};
        that.find('[name]').each(function(index, value) {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();
            data[name] = value;
        });
    $.ajax({
        url: url,
        type: type,
        data: data,
        succss: function(response) {
            console.log(response);
        }
    });
});

但是一旦按下提交按钮，页面仍然会重新加载。有什么建议么？

更新：主表单页面的代码如下；

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/ajax/main.js"></script>
<form action="<?php echo get_template_directory_uri(); ?>/ajax/contact.php" method="post" id="contactform">
    <input type="text" name="fname" placeholder="Name" />
    <input type="email" name="email" placeholder="Email" />
    <textarea name="message" id="" cols="30" rows="10" placeholder="Your Message"></textarea>
    <input type="submit" name="Submit" />
</form>
4

3 回答 3

12

您需要将事件作为第一个参数传递给函数。

$('#contactform').on('submit', function(event) {

    event.preventDefault();

...

如果这不起作用，您可能还有其他问题。在将任何内容绑定到表单之前，您需要确保 DOM 已准备好，方法是将您的侦听器包装在 a 中.ready()：

$(document).ready(function() {
    $('#contactform').on('submit', function(event) {
        event.preventDefault();
        ...
于 2013-07-15T20:55:22.560 回答
4

您需要放入event函数调用：

$('#contactform').on('submit', function(event) { ...
于 2013-07-15T20:55:09.380 回答
2

尝试这个

$('#contactform').submit(function(event) {
event.preventDefault();
 });
于 2013-10-21T07:41:17.627 回答