AJAX表单提交样式

我使用Ajax和jQuery来提交网络表单。当网络表单提交一个很好的答谢信息时就会出现。该信息涵盖了表单本身，并将向用户提供关于接下来要做什么等的信息。问题是表单可能有多个字段，当用户点击提交时，他们看到表单消失，但这是关于它的。AJAX表单提交样式

我添加了一些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

另外一个说明：如果在窗体上的错误，那么一个简单的方法错误信息消失，表单再次显示？（基本上将状态交换回表单显示的位置与消息）再次感谢您的帮助！

希望所有这些都有道理。

我欢迎任何意见，想法和帮助。

谢谢！

琳达

来源

2011-07-05 L84

其正确显示。成功提交表单后正确显示成功消息。 –

你可以淡出的形式慢慢再展mesage：

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

希望这有助于。干杯

来源

2011-07-05 06:03:43

对我来说这是最好的答案，随着BraedenP的帮助，允许表单如果发生错误，则会退回。谢谢！ – L84

不客气:) –

你的页面的表单中的ID是“给ajaxForm”所以下面应该隐藏表单（使用您在上面定义的$ J对象）：

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

我可以还建议将隐藏/滚动代码放入成功回调函数中？如果表单未成功提交，您不想告诉用户它是，是吗？

编辑，以显示带回形式的错误后（其中buttonID是在MessageBox按钮的ID：

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

来源

2011-07-05 06:00:40 BraedenP

谢谢！隐藏/滚动代码是什么意思？表单提交时会显示成功。如果有错误会显示，而不是成功消息。但是这提出了一个问题。错误代码将显示，但表单将消失。错误消息消失并且表单再次显示的简单方法是什么？（基本上将状态交换回表单显示的位置与消息）再次感谢您的帮助！ – L84

要做到这一点，只需在$ jmessagebox.fadeIn（）函数后加上一个延迟即可。因此，在返回表单之前创建一个5秒的延迟：$ jmessagebox.fadeIn（）。delay（5000）.fadeOut（）; $ j（“＃ajaxform”）。fadeIn（）; – BraedenP

但是，如果您要将它淡入，请考虑使用$ j（“＃ajaxform”），fadeOut（）或$ j（“＃ajaxform”）。hide（），而不是上述代码。这将确保您不会混淆jQuery动画功能。 – BraedenP

您可以使用隐藏的元素.hide()

来源

2011-07-05 06:03:56 run

为什么不从表单中提取信息，并在成功，首先淡出形式，然后褪色消息：

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

要make'em发生一前一后（顺序），你必须提供fadeOut的回调函数。

来源

2011-07-05 06:06:07

AJAX表单提交样式

回答

相关问题