调用JavaScript函数提交表单和单击按钮

我有一个函数，在提交表单和单击按钮时都应该调用它。我曾尝试通过以下代码来实现这一点，但我对JavaScript和jQuery还不熟悉，无法处理这种情况

HTML

---

也许你可以帮我学习，下次我可以自己做。提前谢谢

。可以处理多个事件

$(document).on('submit click', 'form#orderForm', function(event) {
    saveOrderItems(event);
});

---

对于submit和OnClick上的submit按钮完全不同

尝试在JS函数本身中确认提示

<button type="submit" form="saveandlock" onclick="saveOrderItems()" >
    Send order
</button>

---

将代码更改为此示例，并告知结果：

<button type="submit" form="orderForm" id="btn1">Save</button>
<button type="submit" form="saveandlock" id="btn2">Send order</button>
<!-- I have added new IDs to both buttons -->

<script>
$(document).ready(function(){
   $.fn.saveOrderItems = function(){
      // function codes here
   }

   $('#btn1, #btn2').click(function(e){
      answer = confirm('Are you sure?');
      if (!answer) {
          e.preventDefault();
      } else {
          $.fn.saveOrderItems();
      }
   });
});
</script>

---

如果您将实际保存的代码保留在自己的函数中，而不是直接在事件侦听器中编写代码，则始终可以从另一段代码中调用它

使一个名为saveForm的函数不使用事件对象，如果需要，使其完全需要作为参数所需的内容，而不是整个事件。然后，您可以从save按钮的click事件和表单的submit调用它。例如：

$('#myform').on('submit', function(event) {
    saveForm($(this));
    // submits after saving (if saveForm is not async)
});

$('#savebutton').on('click', function(event) {
    saveForm($('#myform'));
}); 

---

这不是很清楚。提交表单和单击按钮时，单击按钮是否提交表单？此外，onsubmit内联事件处理程序分配仅适用于，而不适用于；您可以直接编写saveOrderItems。@marekful，我在单击“保存”按钮时使用Ajax保存表单项。另一个“发送”按钮只是将订单状态设置为“锁定”，但在此之前，我想使用ajax函数保存项目。@JacqueGoupil，我想展示如何在jQuery中构建用户定义的函数和使用多个选择器。这就是提问者所问的。我认为这一点也不可怕。但是在$.fn中添加一个函数，在这种情况下没有任何意义。如果我选择是或否，表单将被提交。我加了返回假；如果确认后{}-无效果。它说事件是未定义的。好吧，这样做几乎可以正确工作。但提交表单saveandlock的按钮不起作用。如果我有onclick=saveOrderItems按钮，则执行函数，但不提交表单。我希望它执行函数，然后提交表单。

<form onsubmit="saveOrderItems()">
  //your content here
</form>

  function saveOrderItems(event) {
    var confirmed = confirm('Are you sure?');
    if (confirmed ) {
     //your other actions here
    }
  }

<button type="submit" form="orderForm" id="btn1">Save</button>
<button type="submit" form="saveandlock" id="btn2">Send order</button>
<!-- I have added new IDs to both buttons -->

<script>
$(document).ready(function(){
   $.fn.saveOrderItems = function(){
      // function codes here
   }

   $('#btn1, #btn2').click(function(e){
      answer = confirm('Are you sure?');
      if (!answer) {
          e.preventDefault();
      } else {
          $.fn.saveOrderItems();
      }
   });
});
</script>

$('#myform').on('submit', function(event) {
    saveForm($(this));
    // submits after saving (if saveForm is not async)
});

$('#savebutton').on('click', function(event) {
    saveForm($('#myform'));
});