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

Posted 2023-05-08

【中文标题】jQuery - 如何在 Ajax 表单提交中添加“或”

【英文标题】：jQuery - How to add "or" in the Ajax form submission

【发布时间】：2021-08-02 21:51:26

【问题描述】：

我正在尝试在 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>

【问题讨论】：

将input 放在表单中（它应该在的地方），它不需要任何JS。我还建议删除 form 上的 keydown 事件处理程序

问题/疑问是？

有两种不同的形式，具有不同的值

它应该被分开，因为它是@RoryMcCrossan

@Andreas 问题是如何在提交 ajax 表单时添加这两个事件

【参考方案1】：

鉴于在问题下的 cmets 中，您声明 input 不会放在 form 元素内（尽管它真的应该是，如它对可访问性更好，而且它会在不需要 JS 干预的情况下为您解决问题），您可以通过将 keyup 事件处理程序附加到 input 元素并侦听 CTRL+返回和弦。

另请注意，您的 AJAX 请求还需要至少包含 url 和 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>

【讨论】：

谢谢，但为什么 FormData 不能处理它，错误是：Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

输入区域供ajax search查找产品并通过jQuery将它们添加到form并创建类似invoice form的内容

正如错误所说，FormData() 构造函数只接受一个参数，并且它必须是对 form 元素的引用 - 注意这不是包含表单元素的 jQuery 对象。

只有一个，form的数据是.form数据，不是.search

我建议对此提出一个新问题，确保包含 all 相关的 HTML 和 JS，因为问题中没有足够的代码来诊断问题。