猿问
下载APP

阻止表单重定向还是在提交时刷新?

我搜索了一堆页面,但是找不到我的问题,所以我不得不发表一个帖子。


我有一个带有提交按钮的表单,提交后我不希望它刷新或重定向。我只希望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);

}

我尝试过在表单上包含和不包含action元素,但不知道我在做什么错。更让我烦恼的是,我有一个完美的例子: 示例页面


如果您想实时查看我的问题,请转到stormink.net(我的网站),并在侧边栏显示“向我发送电子邮件”和“ RSS订阅”。两者都是我正在尝试使之工作的形式。


慕斯709654
浏览 74回答 3
3回答

函数式编程

只需处理Submit事件中的表单提交,然后返回false:$('#contactForm').submit(function () {&nbsp;sendContactForm();&nbsp;return false;});您不再需要提交按钮上的onclick事件:<input class="submit" type="submit" value="Send" />

弑天下

这里:function submitClick(e){&nbsp; &nbsp; &nbsp;e.preventDefault();&nbsp; &nbsp; &nbsp;$("#messageSent").slideDown("slow");&nbsp; &nbsp; &nbsp;setTimeout('$("#messageSent").slideUp();&nbsp; &nbsp; &nbsp;$("#contactForm").slideUp("slow")', 2000);}$(document).ready(function() {&nbsp; &nbsp; $('#contactSend').click(submitClick);});代替使用onClick事件,您将使用jQuery将“ click”事件处理程序绑定到jQuery的Submit按钮(或任何按钮)上,这将以commitClick作为回调。我们将事件传递给回调函数,以调用preventDefault,这将阻止单击提交表单。

慕哥6287543

如果要查看显示的默认浏览器错误,例如,由HTML属性触发的错误(显示在任何客户端代码JS处理之前):<input name="o" required="required" aria-required="true" type="text">您应该使用submit事件而不是click事件。在这种情况下,将自动显示一个弹出窗口,要求“ 请填写此字段 ”。即使preventDefault:$('form').on('submit', function(event) {&nbsp; &nbsp;event.preventDefault();&nbsp; &nbsp;my_form_treatment(this, event);}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment正如有人前面所提到的,return false将停止传播(即,如果有附加到表单提交更多的处理程序,他们就不会被执行),但是,在这种情况下,由浏览器触发的动作总是会首先执行。即使以a return false结尾。因此,如果您想摆脱这些默认弹出窗口,请使用click“提交”按钮上的事件:$('form input[type=submit]').on('click', function(event) {&nbsp; &nbsp;event.preventDefault();&nbsp; &nbsp;my_form_treatment(this, event);}); // -> this will NOT show any popups related to HTML attributes
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答