2012-02-01 123 views
1

我想顯示一個確認(更準確地說是彈出式)時,形式是成功submitted.Previously我使用Ajax驗證表單和顯示彈出,但現在我想達到同樣的沒有Ajax
在成功提交表單後調用javascript/jquery中是否有任何事件?還是有其他可用的替代方案嗎?確認的形式提交

謝謝!


編輯1:
我使用Spring 3.0。
下面是詳細情況
1.用戶填寫表格,然後點擊提交
2.請求將被髮送到控制器(服務器端)
3.驗證將在服務器端進行,
4.如果錯誤是否存在我正在使用Spring驗證來顯示它並轉到步驟1
5. else成功提交表單並顯示一個彈出窗口。
6.用戶點擊彈出窗口重定向到其他頁面後。


編輯2:
我完全認爲Ajax是做正確的/最佳方式同意並我已經使用Ajax實現它。但客戶希望使用非Ajax方法,我不能超越他的話。

+0

無AJAX發送是往返服務器。頁面重新加載。除此之外別無選擇。那麼,您是在尋找頁面重新渲染的模式,還是在您提交表單提交「請稍候,我們提交您的數據」時阻止用戶界面? – 2012-02-01 05:17:39

+0

@飛濺-X:我要像展示的通知'形式是成功submitted.' – xyz 2012-02-01 05:25:03

+2

您正在使用什麼服務器端語言?無論您需要將表單內置到您提交表單後呈現的頁面中的語言如何,如果您選擇重新加載他們剛剛提交的同一頁面,並顯示您選擇的消息泡泡。您希望使用的插件類型取決於您希望顯示消息的方式。如果你想要一個模式,你可以使用jQuery UI模式,Fancybox或事件BlockUI。你也可以選擇使用你的服務器端語言來渲染出你的信息的div或p。 – 2012-02-01 05:33:22

回答

2

這個問題引起了我的好奇心,我試圖做同樣的事情用iframe解決方案suggested通過Leon。最後,我成功了,但是,我想建議,而不是使用直接onload屬性,利用jQuery .load() event上的iframe中。

編輯:因此,這裏是我如何設置的形式(使用HTML5,所以引號是沒有必要的):

<div id=message></div> /* Example-specific, see below */ 

<form method=post action=backend.php target=iframe> 
    // Form data here 
</form> 

<iframe name=iframe></iframe> 

添加以下CSS代碼隱藏的iframe:

iframe { 
    border:0px; 
    height:0px; 
    visibility:hidden; 
    width:0px; 
} 

不要使用display:none,因爲一些瀏覽器將拒絕服從,這不是顯示的元素。

然後在我的$(document).ready()的JavaScript ...

$('iframe').load(function(){ 
    // Your load event here. 
}); 

你也可以改變一下,使之明確具體的事件之後纔會觸發(如果你使用動態的形式,例如)。在這種情況下,你可能需要使用.unbind('load')​​之前,以防止調用預先添加的​​功能。

現在提交表單時,它加載到隱藏的iframe。當IFRAME加載頁面(backend.php,在我的例子),它觸發​​功能。在我的具體情況下,我設置了一個<div id=message>以顯示一條消息:

$('iframe').load(function(){ 
    $('#message').html('The form successfully submitted.'); 
}); 
+0

感謝您的建議。你能否添加一些關於你如何做的更多信息? – xyz 2012-02-04 05:20:02

+0

我已經添加了一些更多的編碼細節,以及我如何確認表單提交的具體示例。請注意,加載到iframe中的後端頁面甚至不需要返回任何內容,除非您特別需要它。只要它返回,代碼將在表單提交後觸發。 – Meshaal 2012-02-04 09:37:14

1

我不確定你正在編碼哪種語言。 一個選項 - 使用javascript。

在提交按鈕onclick事件(客戶端事件)上,如果頁面有效,則執行頁面驗證並彈出顯示警報。

<script type="text/javascript"> 
    function OnSubmitClientClick() { 
     Page_ClientValidate(); 
     if (Page_IsValid) { 
      alert('Form has been successfully submitted.'); 
      return true; 
     } 
    } 
</script> 
+0

我正在使用服務器端驗證。 – xyz 2012-02-01 06:14:01

+0

您仍然可以執行服務器端驗證。這將在提交時首先執行客戶端驗證,如果頁面有效,則顯示彈出窗口,然後執行服務器端驗證。 – NomadTraveler 2012-02-01 06:19:35

+0

請檢查我的編輯。我想在服務器端驗證後顯示彈出窗口。 – xyz 2012-02-01 06:21:26

0

爲什麼要放棄AJAX方法?沒有AJAX,服務器端驗證意味着頁面重新加載。在頁面重新加載時,您將失去客戶端(JS)狀態。

一種替代方法是使用隱藏框架/ iframe /新窗口在表單提交上執行服務器端驗證(可能使用您在問題中提到的彈出窗口)。在我看來,這不是正確的方法(A BIG NO)。您可能更願意堅持使用AJAX,或者使用非AJAX的表單提交方式。

+0

感謝您的意見。我完全同意它,我已經以相同的方式實施它,但客戶回答了A BIG NO,並要求(命令)將其刪除。 – xyz 2012-02-01 08:38:25

2

沒有Ajax?沒問題 - 讓我們回去如何在Web真正使用在過去;-)

工作因爲我得到你不想刷新當前頁面,這個怎麼樣的方法:

  1. 具有相同的頁面上隱藏的iframe,一個名字& ID
  2. 點表單的目標屬性,以在上一步
  3. 提交表單現在將「隱藏」
  4. 你可以給名稱iframe上的onload屬性設置爲javascript會見你喜歡的HOD到被調用,一旦形成最終提交
  5. 的JavaScript代碼也可以檢索iframe的內容,並檢查你的服務器端的響應(甚至包括錯誤MSG)
  6. 通知用戶有關導致

這一切很容易設置,讓我們知道它是如何工作的亞..

+0

正在提交到隱藏的iframe? *是* Ajax。 – Quentin 2012-02-01 09:15:15

+1

提交給隱藏的iframe不是AJAX。 – ch4nd4n 2012-02-01 11:10:35