良好的解決方案'防止表單上的默認按鈕'問題？

我需要一個針對「默認按鈕」的老化問題的解決方案。即你在文本框中輸入，但在表單上有一個不是你想要觸發的提交按鈕（或者你可能不希望表單根本沒有觸發）。良好的解決方案'防止表單上的默認按鈕'問題？

我想知道下面的'解決方案'。儘管我可以說出來，但是應該是可靠的。

裏面的形式第一件事是一個不可見的按鈕。然後一些jquery立即禁用它。如果你在表單上按下回車鍵，這個按鈕將被視爲「默認按鈕」並被觸發，但由於'return false'事件處理程序不做任何事情。

我之前見過的解決方案依賴於諸如keydown事件處理程序之類的東西，或者其他看似複雜/難以在每個瀏覽器中測試的東西。

我的解決方案（我以前沒見過，但可能不是唯一的）看起來更簡單，我認爲非常可靠。您甚至可以知道javascript是否被禁用，並且有人按下了輸入，因爲服務器將以表單數據接收此按鈕。

<form action="/store/checkout" method="post"> 

    <input id="btnFakeSubmit" name="FakeSubmit" src="/images/pixel.gif" 
    style="width:1px; height:1px; position:absolute;" type="image" /> 

     <script> 
      $('#btnFakeSubmit').click(function() { 
       return false; 
      }); 
     </script>

這個解決方案有什麼建議 - 包括隱藏在所有瀏覽器按鈕的最好方式。

來源

2009-11-07 Simon_Weaver

你是說敲擊回車鍵觸發表格下的「第一個」按鈕！這不是在我的瀏覽器和我的表單（Firefox 3.5） – hasen 2009-11-07 06:31:50

@hasen足夠有趣的情況下發生的，我原來的問題是'第一個按鈕在所有瀏覽器下觸發'，然後它變成這個。恩，不得不檢查一下。 FF做什麼？你不使用一些圖書館搞亂關鍵事件處理程序或任何東西？ – 2009-11-07 10:48:42

不知道FF做了什麼，我認爲它觸發了提交，但經過進一步檢查，似乎並非如此。至少如果沒有提交按鈕;它似乎沒有做任何事情。 – hasen 2009-11-07 11:13:07

有一兩件事你可以做的是：

將提交行動javascript: return false;
不要創建一個提交按鈕
創建另一個按鈕，做的發送;它調用一個函數，將表單上的動作更改爲實際地址，然後在窗體對象上調用submit()。

例如這樣的事情：

<form id="myform" action="javascript: return false"> 
.... 
<input type="button" onclick="submit_myform"> 
... 

function submit_myform() 
{ 
    jQuery("#myform").attr("action", "post.php").submit(); //untested 
}

這樣，除了顯式地點擊此按鈕之外，沒有辦法提交表單。

來源

2009-11-07 06:13:16 hasen

我試圖與你說的jQuery太聰明。這很難成爲'漸進式增強'的時候！ – 2009-11-07 06:14:47

id只是做onClick =「javscript：return false;」在INPUT控件上。我試圖找到影響最小的可靠解決方案。如果其他事件已經連接起來，我不想搞亂表格提交。我認爲那就是你建議做的對嗎？ – 2009-11-07 06:19:44

我的想法是沒有「常規」提交按鈕;該輸入控件是用戶應該看到的唯一「提交」按鈕 – hasen 2009-11-07 06:22:57

只是一個問題：爲什麼你需要不止一個提交按鈕，你爲什麼要隱藏所有的瀏覽器？

來源

2009-11-07 06:15:12 Tereno

你（大部分）在正確的軌道上。首先你需要一個提交按鈕。這應該是第一個形式提交按鈕：

<input id="dummy" name="dummy" type="submit">

現在隱藏：

#dummy { display: none; }

和禁用提交：

$(function() { 
    $("#dummy").click(function() { 
    return false; 
    }); 
});

如果你想滿足誰擁有人禁用Javascript，檢查是否有名爲「dummy」的POST/GET（如適用）變量（因爲只有在實際按下該提交按鈕時纔會發送該變量）。如果您收到它，只需按照原樣將表格發回給用戶。在大多數情況下，可能不值得爲那些禁用Javascript的人提供服務。

您可以選擇只允許提交表單，如果Javascript是通過與動作和其他方法混淆來啓用的，但是（imho）這可能太過沉重。

來源

2009-11-07 06:51:22 cletus

'按鈕不是'提交'按鈕。此外，ISTR某些瀏覽器不喜歡'display：none'並忽略該情況下的按鈕;從我記得我隱藏它而不是顯示它來解決這個問題。 – bobince 2009-11-07 09:53:55

<script> 
var statusSend = valse; 
var checkSend = function(){return statusSend;} 
</script> 

<form id="myForm" action="/store/checkout" method="post" onSubmit="return checkSend();"> 
... 
<button id="myButton">Send Data</button> 
</form> 

<script> 
$("#myButton").click(function(e){ 
    e.stopPropagation(); 
    //check data ok 
    statusSend = true; 
    $("#myForm").submit(); 
}); 
</script>

來源

2009-11-07 06:54:46

這是我用來解決ASP.net項目中的這個問題。

<form runat="server" defaultbutton="DoNothing"> 
     <asp:Button ID="DoNothing" runat="server" Enabled="false" style="display: none;" />

來源

2010-04-16 20:54:40

髒，但它完美的作品:) – NinjaCross 2013-09-23 17:45:15

良好的解決方案'防止表單上的默認按鈕'問題？

回答

相關問題