更新顯示在表格的div使用JQuery

我有如下形式提交：更新顯示在表格的div使用JQuery

<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摺疊而另一個可見。

這是我最好的辦法嗎？我有什麼選擇？我如何編寫代碼來完成這個任務？

非常感謝。

來源

2013-05-30 Simon Kiely

你可以只使用一個DIV並用新的內容替換內容..你可以用'.beforeSend（）'和'.complete（）'他已經使用成功添加代碼 –

這取決於表單是否會再次使用。如果沒有，你可以清空，並提供文本：

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

一些簡單的像，只是清空文本div和插頭。如果你很好奇我爲什麼沒有使用.html()，它只是個人偏好（我認爲它更透明這種方式），但是it is also remarkably faster。

如果您想要重新加載的形式被多次使用，我會創造另一個div將其設置爲display:none;，並切換它們：

HTML：

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

CSS：

.myFormResponse { 
    display:none; 
}

的jQuery：

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

這也設置了呼叫是完全一樣的功能，如果你想再次加載窗體。

這應該處理任何一種情況。

來源

2013-05-30 21:31:09 PlantTheIdea

替換表單的HTML應該這樣做。

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

來源

2013-05-30 21:33:07 Sneagan

功能......他甚至在OP中調用了函數'// function goes here'，所以我認爲他得到了它。 – PlantTheIdea

嘎！如果我的窗口太窄，沒有看到評論。謝謝！ – Sneagan

更新顯示在表格的div使用JQuery

回答

相關問題