表單提交後使用jQuery替換div標記

我通過post調用提交表單而不離開我的頁面使用JQuery。表單提交後使用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>

來源

2012-10-12 Nate Norman

@丹 - 我認爲這是有道理的... *「我提交後，我想用它的形式替換與感謝信息的形式。」* –

請提高您的接受程度 – sakhunzai

我會在一分鐘內接受我喜歡Nelsons的回答，並正在努力通過它，仍然有一個小問題，但幾乎得到它。 –

嘗試更換你的下面的代碼：

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

UPDATE：
如果你只是想顯示來自AJAX調用獲取而不是顯示#formResponse div的內容，結果，只是刪除#formResponse DIV可言的，只要做到以下幾點：

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

更新2：
您還可以隱藏表單的DIV，並顯示了「謝謝你」的div，像這樣：

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

來源

2012-10-12 12:44:56 Nelson

這是有道理和隱藏的div，但它沒有取代它的形式響應？我是否需要爲div命名我的表單位於id =「myform」？ –

如果你只是想顯示從ajax調用返回的文本，你可以不用#formResponse div，所以刪除它，直接用你的ajax調用返回的內容直接替換你提交的表單內容。看到我更新的答案。 – Nelson

對不起，我不是很清楚。我想顯示#formResponse div的內容，但是當我運行這個並單擊提交沒有發生任何事情。表單提交正常，但它只是留在頁面上，而不是被#formResponse中的我的感謝信息所取代，我在想，是不是因爲它不知道要替換什麼？所以，你的第一個答案是偉大的，但事情並沒有你的一些錯誤可能被停止執行JavaScript控制檯正確 –

使用success(data)如果請求成功時執行的回調函數。

來源

2012-10-12 12:42:45 Abubakkar

表單提交後使用jQuery替換div標記

回答

相關問題