Question

我使用Ajax和jQuery提交webform。当webform提交一个很好的谢谢你的消息出现。该消息涵盖了表单本身，并将为用户提供有关下一步操作的信息等。问题是表单可以包含多个字段，当用户点击提交时，他们会看到表单消失，但就此而言。

我添加了一些JS，可以将用户踢到页面顶部（并在顶部看到感谢信息），但表单中仍有很多空白区域。

我遇到的问题是如何将表单从开始状态更改为display：none;而确认消息显示在其位置。

以下是我的代码的副本：

function jqsub() {

var $j = jQuery.noConflict();
var $jform = $j('#ajaxform'); // form ID
var $jmessagebox = $j('#ajaxdiv'); // message box ID
var $jsuccessmessage = "<h3>Thank You For Your Submission!</h3>"; // success message in HTML format
var $jerrormessage = "<h3>Error - Please Try Again</h3>"; //error message in HTML format

$j.ajax({
    type: 'POST',
    url: $jform.attr('action'),
    data: $jform.serialize(), 
    success: function (msg) { 
                        if (msg.FormProcessV2Response.success) {
                        $jmessagebox.append($jsuccessmessage) 
                        $jmessagebox.fadeIn();
                        }
                        else {
                        $jmessagebox.append($jerrormessage) 
                        $jmessagebox.fadeIn();  
                        }    
                },
    error: function (msg) {
                        $jmessagebox.append($jerrormessage) 
                        $jmessagebox.fadeIn();
                },
     });
$j( 'html, body' ).animate( { scrollTop: 0 }, 0 );
}

以下是我正在使用的页面：http://ubhape2remodel.businesscatalyst.com/testform.html

另一个注意事项：如果表单上有错误，那么让错误消息消失并且表单再次显示的简单方法是什么？（基本上将状态交换回表单显示的位置与消息的对比）再次感谢您的帮助！

希望所有这一切都有道理。

我欢迎任何建议，想法和帮助。

谢谢！

林达

Answer 1

你可以慢慢淡出你的表格，然后显示信息：

$jform.fadeOut("slow", function(){
  $jmessagebox.fadeIn("slow");
});

希望这会有所帮助。干杯

Answer 2

您可以使用.hide()

隐藏元素

Answer 3

页面上的表单ID是'ajaxform'，因此以下内容应隐藏表单（使用您在上面定义的$ j对象）：

$j("#ajaxform").css("display","none");

我是否还建议将隐藏/滚动代码放在成功回调函数中？如果表单未成功提交，您不希望告诉您的用户，是吗？

编辑显示错误后显示表单（其中buttonID是消息框中按钮的ID：

$j("#buttonID").live("click",function(){
    $jmessagebox.fadeOut("slow", function(){
        $jform.fadeIn("slow");
    });
});

Answer 4

为什么不从表单中提取消息，并且在成功时，先淡出表单，然后淡出消息：

 if (success) {
     $('#formId').fadeOut('fast', function(){
          $('#messageId').fadeIn('fast');
     });
 }

要让'em'一个接一个地发生（顺序），你必须为fadeOut提供一个回调函数。

AJAX表单提交样式

4 个答案: