使用JQuery更新表單提交中顯示的div

Question

我的表格如下：

    <div class="myForm">
        <input name="fname" id="fname" value="First Name" onfocus="if (this.value == 'First Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'First Name';}" type="text"  />
        <input type="button" value="Submit" id="btnSubmit">
    </div>

然后，在我的JQuery標頭中，我定義了一個腳本，如下所示：

<script>
             $(document).ready(function(){ 
                 $("#btnSubmit").click(function(){
                     var fname = $("#fname").val();
                     $.ajax({
                         url : "updateDb.php", // php file where you write your mysql query to store value
                         type : "POST", // POSTmethod
                         data : {"fistname":fname},
                         success : function(n){
                                                 alert("works"); //function goes here
                         } 
                     });
                 });

我想要的是這樣，當用戶按下“提交”時，表格消失了，取而代之的是一個簡單的屏幕，上面寫着“您的詳細信息已輸入”。 我在想這樣做的最好方法是有兩個div，一個大約和另一個簡單

您的詳細信息已輸入

種工作。 然后，當調用函數時，我可以將div之一更改為折疊狀態，將另一個更改為可見狀態。

那是我這樣做的最好方法嗎？ 我有什么選擇？ 我該如何編寫代碼來完成此任務？

非常感謝。

Answer 1

這取決於是否再次使用該表格。 如果沒有，您可以將其清空並提供文本：

$('.myForm').empty().text('Your details have been entered.');

諸如此類的簡單操作只是清空div並插入文本。 如果您好奇為什么我不使用.html() ，它只是個人喜好（我認為這樣更透明），但是它也明顯更快 。

如果要重新加載要使用多次的表單，我將創建另一個div，將其設置為display:none; ，然后切換它們：

HTML：

<div class="myFormResponse">Your details have been entered.</div>

CSS：

.myFormResponse {
    display:none;
}

jQuery的：

$('.myForm,.myFormResponse').toggle();

如果要再次加載表單，這還將設置調用完全相同的函數。

那應該處理兩種情況。

Answer 2

替換表單的HTML應該可以。

$('#complete-message').html("<h1>Form Submitted!</h1><h2>We will be in touch soon.</h2><img id='checkmark' src='image' />");