更改表單提交的行爲

我在我的主頁上使用了一個基本表單，它收集用戶的電子郵件地址。沒有提交按鈕，而是啓動模式框的錨鏈接。（用戶輸入的電子郵件地址用於模態內容）更改表單提交的行爲

當用戶填寫表單電子郵件輸入時，他們的天生本能是按下輸入或單擊「提交」鏈接。提交鏈接通過啓動模式很有效，但按下Enter鍵將嘗試提交表單。我不希望用戶提交表單，而是通過按下錨鏈接啓動模式。

有沒有什麼辦法：

A）更改進入啓動模式對提交表單的默認行爲？

或

B）禁用提交表單輸入按鈕，迫使用戶點擊錨鏈接？

我使用leanmodal這是非常簡單的，下面的語法：

<a href="#newsForm" rel="leanModal" class="submitModal">Submit</a> 

<div id="#newsForm">Modal content here</div>

注：我不能使用提交輸入爲「模態發射」，因爲模式不兼容投入。

來源

2012-08-08 JCHASE11

A）更改輸入的默認行爲啓動模式與提交表單：

$(function(){ 
    $(document).on('keyup', function(e) { 
     var code = (e.keyCode ? e.keyCode : e.which); 
     if(code == 13) { //Enter keycode 
      //If user press enter will open the modal 
      $('.submitModal').click(); 
     } 
    }); 
});

B）禁用提交表單輸入按鈕，並迫使用戶點擊錨鏈接。

$(function(){ 
    $(document).on('keyup', function(e) { 
     var code = (e.keyCode ? e.keyCode : e.which); 
     if(code == 13) { //Enter keycode 
      //Stop the "submit", nothing will happen when user press enter 
      e.preventDefault(); 
     } 
    }); 
});

C）另一種選擇：你可以「覆蓋」的submit();功能做這個：

$(function() { 
    $('#newsForm').submit(function(e) { 
     $('.submitModal').click(); 
     e.preventDefault(); 
    }); 
});

來源

2012-08-08 16:05:22

兩種選項A和C都很好;儘管當我嘗試輸入我的電子郵件並按回車鍵時，它仍然提交表單，並且不啓動模式。您可以在這裏嘗試一下在頁腳頂部的觸摸區域：http://bajdesign.com/foundationsource/get-started/ – JCHASE11 2012-08-08 16:20:00

不應該使選項C與選項A相同 - 使用preventDefault禁用提交，並點擊發射模式？這是應該發生的事情，但不是。 – JCHASE11 2012-08-08 16:22:00

好吧，讓我看看:-) – 2012-08-08 16:23:05

我寧願建議這樣的事情。

$(function() { 
    $('#newsForm').submit(function(jqEvt) { 
     jqEvt.preventDefault(); 
     $('.submitModal').click(); 
    }); 
});

來源

2012-08-08 16:08:54 Kiruse

這與@ OscarJara的答案中的選項C相同。在Enter中，它仍然提交表單並將用戶帶到頁面的頂部，因爲這不是行動...... – JCHASE11 2012-08-08 16:24:45

@ JCHASE11考慮到我在Oscar Jara甚至更新了他的答案之前發佈了我的答案，甚至包括了選項C. – Kiruse 2012-08-08 19:50:26

更改表單提交的行爲

回答

相關問題