2

我通过使用 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>
4

2 回答 2

2

尝试替换以下代码：

<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 调用获得的结果，而不是显示 div 的内容#formResponse，只需删除#formResponsediv，然后执行以下操作：

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

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

function(data) {
  $("#myForm").hide('slide', function() {$("#formResponse").show('slide');});
}
于 2012-10-12T12:44:56.307 回答
1

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

于 2012-10-12T12:42:45.513 回答