使用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' />");