Question

我提交的表单没有通过邮件调用使用JQuery离开我的页面。

我提交后，我想用谢谢你的消息替换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>

Answer 1

尝试替换以下代码：

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

这个：

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

然后替换以下javascript函数：

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

这个：

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');});
}

Answer 2

use success(data)请求成功时执行的回调函数。

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

2 个答案: