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

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

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

Answer 2

替换表单的HTML应该这样做。

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

使用JQuery更新表单提交时显示的div

2 个答案: