Javascript 在表单提交后使用JQuery替换div标记

我正在使用JQuery通过post调用提交表单而不离开页面

在我提交之后，我想用带有感谢信息的表单替换div。问题是在我提交之前显示的消息没有替换，下面是我的代码

$(document).ready(function() {
            //When the form with id="myform" is submitted...
            $("#myform").submit(function() {
                //Send the serialized data to mailer.php.
                $.post("mailer.php", $("#myform").serialize(),
                    //Take our repsonse, and replace whatever is in the "formResponse"
                    //div with it.
                    function(data) {
                        $("#formResponse").html(data);
                    }
                );
                return false;
            });
        });

和HTML

<div data-role="content">
<form id="myform">
  <div data-role="fieldcontain">
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" value=""  />
</div>
<div data-role="fieldcontain">
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" value=""  />
</div>
<div data-role="fieldcontain">
  <label for="company">Company Name:</label>
  <input type="text" name="company" id="company" value=""  />
</div>        
<input type="submit" name="submit" value="Submit" data-icon="star" data-theme="b" />
</form>

</div>
<div data-role="content" div id="formResponse">
    thank you, your quote has been received and you will hear back from us shortly.
    </div>

姓名：
电邮：
公司名称：
谢谢你，你的报价已经收到，你会很快收到我们的回复。

使用

成功（数据）

一个回调函数，该函数在请求成功时执行。

尝试替换以下代码：

<div data-role="content" div id="formResponse">

对于这一个：

<div data-role="content" style="display:none" id="formResponse">

function(data) {
  $("#myForm").html( $("#formResponse").html() );
}

更新：
如果您只想显示从ajax调用获得的结果，而不是显示

#formResponse

div的内容，只需删除

#formResponse

div，然后执行以下操作：

function(data) {
  $("#myForm").html( data );
}

更新2:
您还可以隐藏表单div并显示“谢谢”div，如下所示：

function(data) {
  $("#myForm").hide('slide', function() {$("#formResponse").show('slide');});
}

---

@丹-我认为这是有道理的。。。“在我提交后，我想用一封感谢信中的表格替换div。”请提高您的接受水平我会在一分钟内接受我喜欢Nelson的答案，并正在解决它，仍然有一个小问题，但几乎解决了。这是有道理的，并隐藏了div，但它没有用表格响应替换它？我是否需要将div命名为my form is in id=“myform”？如果您只想显示从ajax调用返回的文本，可以不使用#formResponse div，因此删除它并直接用ajax调用返回的内容替换提交表单内容。请看我的最新答案。对不起，我不太清楚。我想显示#formResponse div的内容，但当我运行此命令并单击submit时，什么也没发生。表单提交得很好，但它只是停留在页面上，没有被我在#formResponse中的感谢信息替换，我想知道是不是因为它不确定替换什么？因此，您的第一个答案很好，但有些地方没有正常工作查看您的javascript控制台中可能会停止执行的错误，我也用另一种方法更新了我的答案。两种方法都会得到一个未捕获的语法错误：意外标记

function(data) {
  $("#myForm").hide('slide', function() {$("#formResponse").show('slide');});
}