javascript - 使用 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 header 中，我有一个定义如下的脚本:

<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()，这只是个人偏好(我认为这样更透明)，但是 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();

如果您想再次加载表单，这也会设置调用完全相同的函数。

这应该可以处理任何一种情况。