确认联系表格后显示感谢信息 [英] Show a Thank You message after validating contact form
问题描述
我有一个简单的联系表:
I have a simple contact form:
<div class="contact-wrapper">
<div class="grid_8 contact-form-wrapper">
<form id="contactus" method="GET" action="">
<p><em>All fields are required unless otherwise noted.</em></p>
<fieldset>
<legend>Tell us about yourself</legend>
<ol>
<li>
<label for="firstname" accesskey="f">First Name:</label>
<input type="text" id="firstname" name="firstname" tabindex="1" value="" title="First Name" class="required">
</li>
<li>
<label for="lastname" accesskey="l">Last Name:</label>
<input type="text" id="lastname" name="lastname" tabindex="2" value="" title="Last Name" class="required">
</li>
<li>
<label for="email" accesskey="e">E-mail Address:</label>
<input type="text" id="email" name="email" tabindex="3" value="" title="E-mail Address" class="required">
</li>
<li>
<label for="phone" accesskey="p">Phone Number: <em>Optional</em></label>
<input type="text" id="phone" name="phone" tabindex="4" value="" title="Phone Number">
</li>
</ol>
</fieldset>
<fieldset>
<legend>How can we help you?</legend>
<ol>
<li>
<label for="comments" accesskey="y">Your Message:</label>
<textarea name="comments" rows="10" cols="20" id="comments" class="word_count required" tabindex="5" title="Your Message"></textarea>
<span class="counter"> </span></li>
</ol>
</fieldset>
<div class="captcha">Captcha space...</div>
<button type="submit" value="Send Message" class="btn">Send Message</button>
</form>
</div>
<div class="ty">Thank you for your message.</div>
</div>
我正在使用从MS提取的jQuery的Validate插件对其进行验证:
And I'm validating it with the jQuery's Validate plugin taken from MS: http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js
该表单可以很好地验证，但是一旦所有字段均有效并且按下了提交按钮，我就需要淡出整个联系表单并在谢谢"容器中淡出.
The form validates fine, but I need to fade out the entire contact form and fade in the 'Thank You' container once all fields are valid and the submit button is pressed.
我该怎么做?我想我会丢失某些东西，或者就是根本不知道它:p
How do I do that? I would think I'm missing something or just plainly don't know it :p
这是jsfiddle中的 DEMO ...尽管我不知道为什么表单无法在那里正确验证，但可以在我的服务器上正常工作.
Here's a DEMO in jsfiddle... although I don't know why the form doesn't validate correctly there, but it does work in my server.
我是jQuery的新手，到目前为止，我所做的只是通过将我的头撞到墙上，所以我对任何错误表示歉意.
I'm new to jQuery so all I've done so far is by reading and bumping my head into walls, so I apologize for any mistakes in advance.
任何帮助将不胜感激.
推荐答案
更新
DEMO 已进行了更新和代码优化，可以正常工作现在更好了.
The DEMO has been updated and code optimized, it works much better now.
-
德米特里(Dmitriy)，谢谢您的帮助.
Dmitriy, thanks for your help.
我按照您的建议使用了jquery.forms插件，但是我使用的代码略有不同.
I used the jquery.forms plugin as you suggested but the code I used is a little different.
解决方案
正如我所说，我使用jquery.forms插件通过Ajax提交了表单.提交表单时，带有加载程序"或微调框"的DIV会淡入(尽管演示图中未包含微调框图像)，然后淡出，然后逐渐出现谢谢"消息.
As I said, I used the jquery.forms plugin to submit the form via Ajax. On submitting the form a DIV with a 'loader' or 'spinner' fades in (although the spinner image is not included in the demo), then it fades out and then the Thank You message fades in.
加载程序的原因是，使用户在提交表单时看到正在移动"的东西，这样，用户在处理表单时就不必看屏幕无所事事.良好的易用性.
The reason for the loader is so that the user sees something 'moving' while the form is being submitted, this way the user doesn't have to watch the screen doing nothing while the form is being processed. Nice usability touch.
在演示中，加载程序很快出现在按钮的正下方，因此，如果您想看到它的运行，请注意该位置.
In the demo, the loader appears very fast right below the button, so pay attention to that spot if you want to see it in action.
不过请您投票.
再次感谢.
这篇关于确认联系表格后显示感谢信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
