css - AJAX 表单提交样式

Question

我正在使用 Ajax 和 jQuery 来提交网络表单。当网络表单提交时，会出现一条很好的感谢消息。该消息涵盖表单本身，并将向用户提供有关下一步操作等的信息。问题是表单可以有多个字段，当用户点击提交时，他们会看到表单消失，但仅此而已。

我添加了一些将用户踢到页面顶部的 JS(并在顶部看到感谢消息)，但表单所在的位置仍然有很多空白区域。

我的问题是如何将表单从其起始状态更改为显示:无；而确认消息显示在其位置。

这是我的代码的副本:

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");
});

希望这对您有所帮助。干杯