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表單提交樣式

回答

相關問題