使用 jQuery 将表单替换为“谢谢”？ [关闭]答案

【问题标题】：Use jQuery to replace form with 'Thank You'? [closed]使用 jQuery 将表单替换为“谢谢”？ [关闭]
【发布时间】：2014-01-31 16:08:25
【问题描述】：

您好，是否可以在点击提交后隐藏联系表单？有一条消息说谢谢你表格在哪里？

【问题讨论】：

你应该学习 Javascript Ajax，例如检查 jQuery 表单。

标签： forms jquery hide contact

【解决方案1】：

<form id="form">
   <input type="text" name="name" placeholder="Your name">
   <textarea name="message" placeholder="Message"></textarea>
   <input type="submit" value="Send">
</form>
<div id="thanks" style="display:none;">Thank you!</div>

var $form = $('#form');

$form.submit(function( evt ){
    evt.preventDefault();
    $.ajax(function(){
       url  : "send.php",
       type : "POST",
       data : $form.serialize()
    }).done(function( phpSays ){
        if( phpSays == "OK" ){  // make your .php script return an "OK" string
            $('#thanks').show();
        }else{
            // DO something else if something went wrong
        }
    });
});

您会注意到<form> 没有操作和方法属性，
导致所有这些都将通过 AJAX 调用您的 .php 脚本来处理而无需刷新页面。
对于禁用 JS（可使用 <noscript> 信息元素处理）的可怜人来说，此示例可能会失败，但对于防止加载垃圾邮件很有用（因为通常垃圾机器人会在没有 JS 支持的情况下爬行搜索上述方法 em> 和 action 属性）。

http://api.jquery.com/jquery.ajax/

【讨论】：

很好的答案 Roko。我没有时间自己编写 ajax 示例。感谢您介入。做得好。 +1

【解决方案2】：

其实，没那么简单。

提交表单会将用户转移到<form> 标记的action= 属性中指定的文档...除非，正如 Lexib0y 指出的那样，您要使用 AJAX 提交表单但仍保留在同一页。在收到第二个文档中提交的表单元素后，您可以简单地复制第一页，但将“谢谢您的提交”准确地放在表单原来的位置。

或者，您可以将表单提交到您所在的同一文档（通过指定action=""），但即便如此，您还是要重新绘制屏幕。

接下来，这里有一些了解 AJAX 基础知识的好帖子：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

【讨论】：