防止表单在autosuggest上提交

Preventing form from submition on autosuggest

本文关键字：提交 autosuggest 表单      更新时间：2023-09-26

我有以下表格:

<form action="/web/projects/add" id="EventAddForm" method="post" accept-charset="utf-8">
    <div style="display:none;"><input type="hidden" name="_method" value="POST"/></div> 
    <div class="input text">
        <label for="AddressSearch">Search address</label>
        <input name="adress_search" type="text" id="AddressSearch"/>
    </div>
    <div class="input text required">
        <label for="EventAddress">Address</label>
        <input name="data[Event][address]" type="text" id="EventAddress"/>
    </div>
    <div class="input text required">
        <label for="EventPostNr">Post nr</label>
        <input name="data[Event][post_nr]" type="text" id="EventPostNr"/>
    </div>
    <div class="input text required">
        <label for="EventCity">City</label>
        <input name="data[Event][city]" type="text" id="EventCity"/>
    </div>
    <div class="submit">
        <input  type="submit" value="Save"/>
    </div>
</form>

前面提到的字段用于选择谷歌地图自动建议的地址，为了更好的可读性，我省略了该代码，但是当自动建议下拉菜单出现时，问题就出现了。如果用户通过键盘导航到其中一个建议并按下enter，则提交整个表单。我有以下函数来防止表单在鼠标点击时提交:

jQuery('#EventAddForm').submit(function( event ) {
  if ( $("#AddressSearch").is(":focus") ||
    $("#EventPostNr").is(":focus") ||
    $("#EventCity").is(":focus"))
    event.preventDefault();
 });

但是我想做的是防止表单上的enter点击。

我缺乏一些jQuery知识，只是无法使它运行，所以任何帮助或指导都是非常感谢的。

指定所有字段并不是一个好主意，以防它们发生变化。

应该使用更通用的选择器。

jQuery('#EventAddForm').submit(function( event ) {
    if ($(this).find('input:text:focus').length) event.preventDefault();
});
http://jsfiddle.net/KpXD3/

尝试将此条件添加到if块中:

jQuery('#EventAddForm').submit(function( event ) {
    if ( $("#AddressSearch").is(":focus") ||
      $("#EventPostNr").is(":focus") ||
      $("#EventCity").is(":focus") ||
      event.which == 13) //13 is code for enter key
      event.preventDefault();
});
相关文章：