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

Call JavaScript function both submitting form and clicking button

本文关键字：按钮 表单 JavaScript 函数 提交 调用      更新时间：2023-09-26

我有一个函数，在提交表单和单击按钮时应该调用。我试过这样做以下代码，但我是新的JavaScript和jQuery，不能处理这种情况。

<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);
});

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

.on()可以处理多个事件…

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

对于一个提交按钮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
    }
  }

将您的代码更改为这个示例并告诉结果:

<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的函数，它不使用event对象(如果需要的话，让它需要它所需要的作为参数，但不是整个事件)。然后，您可以从保存按钮的单击事件和表单的提交中调用它。例如:

$('#myform').on('submit', function(event) {
    saveForm($(this));
    // submits after saving (if saveForm is not async)
});
$('#savebutton').on('click', function(event) {
    saveForm($('#myform'));
});
相关文章：