javascript - フォーム送信後にJQueryを使用してdivタグを置き換えます

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

更新：
div のコンテンツを表示する代わりに、ajax呼び出しから取得した結果を表示したい場合は#formResponse、divを完全に削除#formResponseし、次のようにします。

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

更新2：次
のように、フォームdivを非表示にして、「ありがとう」divを表示することもできます。

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

Answer 2

usesuccess(data)リクエストが成功した場合に実行されるコールバック関数。