防止表单重定向或刷新提交？ [英] Prevent form redirect OR refresh on submit?

问题描述

我搜索了一堆页面，但无法找到我的问题，所以我不得不发布帖子。

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

以下是表单：

 < form id =contactForm> 
< fieldset> 
< label for =名称>名称< / label> 
< input id =contactNametype =text/> 
< / fieldset> 
 
< fieldset> 
< label for =电子邮件>电子邮件< / label> 
< input id =contactEmailtype =text/> 
< / fieldset> 
 
< fieldset class =noHeight> 
< textarea id =contactMessagecols =20>< / textarea> 
< input id =contactSendclass =submittype =submitonclick =sendContactForm（）/> 
< / fieldset> 
< / form> 
   

这里是jQuery：

  function sendContactForm（）{
 $（＃messageSent）。slideDown（slow）; 
 setTimeout（'$（＃messageSent）。slideUp（）; $（＃contactForm）。slideUp（slow）'，2000）; 
} 
  

我尝试过在表单上没有动作元素，但不知道我做错了什么。让我更生气的是，我有一个完美的例子：
stormink.net （我的网站），并查看侧栏中发送给我和发送电子邮件和RSS订阅。这两种表单都是我试图解决这个问题的。

解决方案

只需处理 submit 事件，并返回false：

  $（'＃contactForm'）。submit（function（）{
 sendContactForm（）; 
 return false; 
}）; 
  

您无需再在提交按钮上点击onclick事件：

 < input class =submittype =submitvalue =Send/> 
  

I've searched through a bunch of pages, but can't find my problem, so I had to make a post.

I have a form that has a submit button, and when submitted I want it to NOT refresh OR redirect. I just want jQuery to perform a function.

Here's the form:

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

And here is the jQuery:

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

I've tried with and without an action element on the form, but don't know what I'm doing wrong. What has annoyed me more is that I have an example that does it perfectly: Example Page

If you want to see my problem live, goto stormink.net (my site) and check out the sidebar where it says "Send me and email" and "RSS Subscription". Both are forms that I'm trying to get this to work on.

解决方案

Just handle the form submission on the submit event, and return false:

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

You don't need any more the onclick event on the submit button:

<input class="submit" type="submit" value="Send" />

这篇关于防止表单重定向或刷新提交？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！