时间戳

首页 > 解决方案 > jQuery - 如何在 Ajax 表单提交中添加“或”

jquery - jQuery - 如何在 Ajax 表单提交中添加“或”

问题描述

我正在尝试在 ajax 表单上添加一个功能，以便能够同时使用Submit Button和Ctrl+Enter功能。
它的两个分开的形式，它应该是原样，但必须有两个事件可用于提交 ajax 表单。
这是我到目前为止所做的：

  $(document).ready(function() {
    $(".form").on('submit keydown',(function(e) {
      e.preventDefault();
      $.ajax({
        success: function(data) {
          $('.result').html('Ajax Submit');
        },
      });
    }));
  });
<input class="search1">
  <form class="form">
    <button>Submit</button>
  </form>
  <div class="result"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

标签： jqueryajaxformssubmit

解决方案

鉴于在问题下的评论中您声明input不会将其放置在form元素内（尽管它确实应该放置，因为它对可访问性更好，而且它会在不需要 JS 干预的情况下为您解决问题），您可以通过将keyup事件处理程序附加到input元素并侦听CTRL+Return和弦来实现您的目标。

另请注意，您的 AJAX 请求至少还需要包含urland data。

jQuery($ => {
  let $form = $('.form');
  let $search = $('.search1').on('keyup', e => {
    if (e.ctrlKey && e.keyCode === 13)
      $form.submit();
  });
  
  $form.on('submit', e => {
    e.preventDefault();
    console.log('making ajax request...');
    
    /*
    $.ajax({
      url: '/search',
      data: {
        term: $search.val()
      },  
      success: function(data) {
        $('.result').html('Ajax Submit');
      }
    });
    */
  });
});
<input class="search1">
<form class="form">
  <button>Submit</button>
</form>
<div class="result"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读