1

我有一个如下表格：

    <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，一个 as about，另一个简单

您的详细信息已输入

一种工作。然后，当调用该函数时，我可以将其中一个 div 更改为折叠，另一个更改为可见。

这对我来说是最好的方法吗？我的替代方案是什么？我怎样才能编写代码来完成这个？

非常感谢。

4

2 回答 2

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

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

那应该处理任何一种情况。

于 2013-05-30T21:31:09.243 回答
0

替换表单的 HTML 应该可以做到。

$('#complete-message').html("<h1>Form Submitted!</h1><h2>We will be in touch soon.</h2><img id='checkmark' src='image' />");
于 2013-05-30T21:33:07.917 回答