如何使用jQuery發佈表單？

我有一個提交按鈕的表單，它工作正常，但我現在有一個用戶請求，如果單擊頁面上的鏈接並且窗體是「髒的」，表單將被保存（發佈以保存操作）。如何使用jQuery發佈表單？

我已經有了一個isDirty JavaScript變量的邏輯，現在我想從JavaScript函數發佈表單，當它是髒的。

我的形式聲明如下：

<form id="formSmart" action="<%= ResolveUrl("~/SmartForm/Proceed") %>" 
      method="post" enctype="multipart/form-data">

，我的JavaScript是：

function checkLink() { 
    if (isDirty) { 
    $("#formSmart").submit(); 
    } 
}

的進行操作不會被調用，但是當我點擊提交表單它按鈕工作正常。我在做什麼JavaScript錯誤？（）「＃formSmart」）。submit（）;這個函數調用了checkLink（）方法。不會發布到「繼續」操作。

來源

2010-09-09 Mark Kadlec

您有正確的方式根據您發佈的內容和名稱匹配來提交表單。

您確定您要撥打checkLink，並且是isDirty等於true？

把你和alert('Test');提交之前，並在if範圍內。

編輯：來裝你的活動，你需要做到以下幾點：

$('#yourLinkID').click(checkLink(); return false;);

注return false這將導致你的鏈接到不執行導航。如果你想鏈接導航，你可以刪除該部分。

來源

2010-09-09 22:15:31 Kelsey

是的，我已經添加了警報（），它是射擊，沒有錯誤被拋出，但我的控制器行動中的斷點不會受到打擊。當我點擊提交時，斷點被擊中。 – 2010-09-09 22:29:12

但我總是希望我的表單導航，只是想執行提交（它保存字段），但由於某種原因，我的控制器後沒有被調用。 – 2010-09-09 22:32:49

@Mark Kadlec你能否驗證$（「＃formSmart」）沒有返回正確的表單？一些東西看起來很奇怪，因爲一切看起來應該是工作...也許它是如此簡單的事情，我們都俯瞰它...需要新鮮的眼睛:) – Kelsey 2010-09-09 22:43:45

聽起來像要求是'點擊頁面上的鏈接'。

也許將此事件附加到頁面上的所有<a>標記。

$(document).ready(function() { 
    // all <a> tags get the checkLink attached to them 
    $("a").click(checkLink()); 
});

來源

2010-09-09 22:14:40

我想如果單擊了超鏈接，則調用該函數，所以我可以以任何方式調用該函數（以某種方式在關閉的事件或onc上舔事件）。 – 2010-09-09 22:27:47

我基本上試圖消除從窗體中的數據丟失，並強制提交，如果窗體很髒 – 2010-09-09 22:28:13

你的問題是瀏覽器在頁面執行提交之前導航。
解決方案暫停導航，直到您保存表單。

醜陋的解決方案：
你能做到這一點買節省了廣告點擊的網址，在一個隱藏字段，
返回false停止導航，
和之後的值有提交檢查，如果存在的話做導航

更好的解決方案：
通過AJAX發佈形式和Ajax調用完成後（無需檢查成功或錯誤）進行導航（使它很容易只使用給ajaxForm ajaxForm plugin）
此解決方案的唯一問題是，如果鏈接有target =「_ blank」，因爲那麼您必須使用窗口。開放可能通過彈出窗口攔截
you can play with a simple jsbin sample i prepared showing this

這個例子可以阻止張貼一些值到舊版本本頁面+導航到谷歌，打開Fiddler並看到它的第一篇文章，然後導航。

如果你去了jsbin頁面終止閱讀這裏
下面是HTML：

<form id="formSmart" action="http://jsbin.com/oletu4/edit" method="post"> 
<input type="text" name="someLie" /> 
<input type="text" name="someLie2" /> 
<input type="submit" value="submit" /> 
<a id="lnkNavOut" href="http://www.google.com">www.google.com</a>

這裏是JS：

$(document).ready(function(){ 
    $("#lnkNavOut").click(function(){ 
    var jqFormSmart = $("#formSmart"); 
    //check here if the form is dirty and needs to be saved 
    var jqClickedLink = $(this); 
    $.ajax({ 
      url: jqFormSmart.attr("action"), 
      type: "POST", 
      data:jqFormSmart.serialize(), 
      complete:function(){ 
      location = jqClickedLink.attr("href"); 
      } 
     }); 
    return false;//stop navigation 
    }); 
});

來源

2010-09-13 07:42:04

謝謝Avi，我非常欣賞Ajax解決方案，看起來不錯。 – 2010-09-14 01:51:36

如何使用jQuery發佈表單？

回答

相關問題