如何防止表单重定向或刷新提交?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (59)

我有一个表单有一个提交按钮,并提交时,我希望它不刷新或重定向。我只是想让jQuery执行一个功能。

这里是表格:

<form id="contactForm">
    <fieldset>
        <label for="Name">Name</label>
        <input id="contactName" type="text" />
    </fieldset>

    <fieldset>
        <label for="Email">Email</label>
        <input id="contactEmail" type="text" />
    </fieldset>

    <fieldset class="noHeight">
        <textarea id="contactMessage" cols="20"></textarea>
        <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
    </fieldset>
</form>        
<small id="messageSent">Your message has been sent.</small>

这里是jQuery:

function sendContactForm(){
    $("#messageSent").slideDown("slow");
    setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000);
}

我已经尝试过,没有在表单上的动作元素,但不知道我哪里不对。

提问于
用户回答回答于

只需处理提交事件上的表单提交,并返回false:

$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});

你不需要在提交按钮上进行更多的onclick事件:

<input class="submit" type="submit" value="Send" />
用户回答回答于

这里:

function submitClick(e)
{
     e.preventDefault();
     $("#messageSent").slideDown("slow");
     setTimeout('$("#messageSent").slideUp();
     $("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function() {
    $('#contactSend').click(submitClick);
});

你不必使用onClick事件,而是使用jQuery将“点击”事件处理程序绑定到提交按钮(或任何按钮),将submitClick作为回调。我们将事件传递给回调以调用preventDefault,这将阻止点击提交表单。

扫码关注云+社区

领取腾讯云代金券