更改表单提交的行为

我在我的主页上使用了一个基本表单，它收集用户的电子邮件地址。没有提交按钮，而是启动模式框的锚链接。（用户输入的电子邮件地址用于模态内容）更改表单提交的行为

当用户填写表单电子邮件输入时，他们的天生本能是按下输入或单击“提交”链接。提交链接通过启动模式很有效，但按下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

更改表单提交的行为

回答

相关问题