除了提交按钮之外，还使用 ​​Enter 键提交 JQuery 表单

Posted 2023-05-09

【中文标题】除了提交按钮之外，还使用 ​​Enter 键提交 JQuery 表单

【英文标题】：Submit JQuery form with Enter Key in addition to submit button

【发布时间】：2021-08-28 14:57:06

【问题描述】：

我从另一个开发商那里接手了一个房地产销售网站的开发工作。不幸的是，我不是 JQuery 专家，并且有一个脚本导致了我的问题。

下面的脚本允许用户在特定邮政编码下查找房产的价格信息。然而，表单只会在点击“提交按钮”时提交，而不是在按下回车键时提交。请问有大神可以给个解决办法吗？

jQuery(document).ready(function($) 

    // $('#postcode_form').on('submit', function (e) 
    $('#postcode_form_submit').on('click', function (e) 


    
    
          
          e.preventDefault();
          
          $('.emsg').addClass('hidden');
          $('.emsg').hide();
          // var postcodeRegEx = /[A-Z]1,2[0-9]1,2 ?[0-9][A-Z]2/i; 
          var postcodeRegEx = /[A-Z]1,2[0-9][0-9A-Z]?\s?[0-9][A-Z]2/g; 
         
          if (!postcodeRegEx.test($("#postcode").val()))
          
            // there is a mismatch, hence show the error message
            $('.emsg').removeClass('hidden');
            $('.emsg').show();
            return;
                 
          
          $.ajax(
          
            type: 'post',
            url: '/ajax_getresults.php',
            // url: '/get_properties/',
            data: $('#postcode_form').serialize(),
            data:postcode:$("#postcode").val(),
            success: function (data,status) 
            
              let result=jQuery.parseJSON(data);
              if (result.status=="success")
                             
                   $("#postcode_table").removeClass('hidden');
                   $("#postcode_table").find("tr:gt(0)").remove();
                   // $("#postcode_table").empty();
                  let items=result.data;
                  $.each(items, function(index, value) 
                  
                        //$("#servers").text($("#servers").text() + " " + value.servername);
                        $('#postcode_table').append("<tr>"+
                        "<td>"+value.house_no+"</td>"+
                        "<td>"+value.street+"</td>"+
                        "<td>"+value.sale_price+"</td>"+
                        "<td>"+value.date+"</td>"+
                        +"</tr>");                      
                  );
              
              else
              
                  alert ("invalid results");
              
            
          );
    );

);
</script>
<div class="col-md-12">
<br/>
<hr/>
                            <div class="user_details_row">Please enter a Postcode to look up land registry sale history</div>
<div>
<form id="postcode_form" action="/get_properties/" method="post">
    <label for="property_label_before">
  Please enter postcode in capitals (e.g LS16 5BA):</label>
  <br>
  <input type="text" name="postcode" id="postcode" value="" placeholder="LS16 5BA" size="40" style="max-width: 200px;display: block; margin-bottom: 10px;">
<span class="emsg hidden" style="display: block; font-weight: bold; text-transform: uppercase;" >Please enter a valid postcode</span>
  <input id="postcode_form_submit" type="button" value="View historical sale price data" style="background-color: #0047ab; color: #fff; padding:15px;text-transform: uppercase; font-weight: 700;">
</form>  
</div>
        <div class="col-md-12">
            <br/>
          
            <table id="postcode_table" class="hidden" style="width:100%;text-align:left;">
                <thead>
                    <tr style="font-weight:bold;">
                            <th style="font-weight:bold;">HOUSE NO</th><th style="font-weight:bold;">STREET</th><th style="font-weight:bold;">SALE PRICE</th>
                            <th style="font-weight:bold;">DATE SOLD</th>
                    </tr>
                <thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

【问题讨论】：

看起来这是一个有意识的设计决定，要求用户单击提交，因为新用户（或老年人（全面概括 c））会在中途按 Enter 并提交表单。因此设计师/开发人员将其删除，以免意外发生。特别是如果表单具有多行输入，其中输入 不 提交。将输入作为提交可能会令人困惑。您可以随时 Tab 到提交按钮并按空格键。

【参考方案1】：

为什么$('#postcode_form').on('submit', function (e) 被注释掉了？这是正确的做法，您只需将<input id="postcode_form_submit" type="button" 更改为<input id="postcode_form_submit" type="submit"。如果有提交按钮，浏览器会按 Enter 提交。

【讨论】：

完美，已经解决了，我完全错过了！非常感谢:)