Question

我有一个功能，在提交表单和单击按钮时都应该调用它。我已经尝试过按照代码执行此操作，但我是JavaScript和jQuery的新手，无法处理这种情况。

HTML

<button type="submit" form="orderForm">
    Save
</button>
<button type="submit" form="saveandlock" onsubmit="saveOrderItems()" onclick="return confirm('Are you sure?')">
    Send order
</button>

id="orderForm"表单action="#"和id="saveandlock"表单action="orders.php"表单。

的JavaScript

function saveOrderItems(event) {
    event.preventDefault();
    var form = $(this);
    $.ajax({
        type: "POST",
        url: "save.php",
        data: form.serialize(),
        success: function (result) {
            if(result == "1") {
                moveToOrder();
            }
        },
        error: function (result) {
            alert("ERROR");
        }
    });
    return false;
}

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

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

Answer 1

.on（）可以处理多个事件......

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

Answer 2

提交按钮OnSubmit和OnClick完全不同，

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

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

和您的表单HTML

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

并在你的JS中

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

Answer 3

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

<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>

Answer 4

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

创建一个名为saveForm的函数，该函数不使用event对象（如果需要，请使其完全符合参数需要，但不是整个事件）。然后，您可以通过保存按钮的点击事件和表单提交来调用它。例如：

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

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

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

4 个答案: