用jquery提交表单，它有多个提交按钮，没有点击触发器？

Question

想象一下：

<form id="form"> 
    <input type="text">
    <button type="submit" name="submit1" value="1">something1</button>
    <button type="submit" name="submit2" value="2">something2</button>
    <button type="submit" name="submit3" value="3">something3</button>
</form>

首先，当我写$('#form').submit() 时，将发送哪个提交值？第一个？

其次，如何在没有click 触发事件的情况下提交具有我想要的值的表单？有可能吗？例如提交带有2 提交值的表单。

我想这样做的原因是在发送我的表单之前有一个带有 sweetalert 的确认弹出窗口，所以这里是：

$('form').on('submit',function(e){
    form = $(this);
    e.preventDefault();
    swal({'some dialog'},function(isConfirm)
        {
            if(isConfirm)
                 form.submit;
                 \\If I use the click trigger I will get stuck in here again.
        })
});

Answer 1

还有另一种选择 - 使用 FormData 您可以创建 FormData 的实例，添加您的 html form，修改条目并发送它。那么这里的一切都在你的掌控之中。

编辑：根据您的编辑，您似乎遇到了重新提交表单的问题。你可以这样处理。

var form = document.querySelector('form');
form.addEventListener('submit', {
    confirmed: false,
    handleEvent: function (event) {
        if (this.confirmed)
            return;

        event.preventDefault();
        doconfirm((confirmed) => {
            if (confirmed) {
                this.confirmed = true;
                form.submit();
            }
        })
    }
}, false);

或者您可以通过在验证后取消绑定 submit 处理程序并再次提交来解决您的问题：$('form').off('submit').submit()

Answer 2

正如@Scott Marcus 所解释的，命名按钮的值将在表单发送到服务器时提交。但是，在您的情况下，这不会有帮助，因为您想在将其提交到服务器之前执行一些逻辑。

问题是 jQuery 无法确定单击了哪个按钮，因为当您通过 $.serialize() 查看表单数据时它不提供提交按钮值，并且有no easy cross-browser friendly way to check the button 触发了$.submit() 事件而不使用点击。

因此，唯一的解决方法是处理 3 个按钮的 click 事件并存储一些在您提交表单之前检查的值，如以下答案所述：How can I get the button that caused the submit from the form submit event?

例如：http://codeply.com/go/Wj85swRyfX

Answer 3

让我们一次一个地回答你的问题...

首先，当我写 $('#form').submit() 时，提交值将 被发送？第一个？

提交表单时，所有带有NAME 属性的表单元素都会将其值（即使该值是空字符串）提交到表单的ACTION 目的地。因此，在您的情况下，所有 3 个按钮都有一个 name 属性，因此所有 3 个按钮都将提交它们的名称/值对。

通常，我们不会在提交按钮上放置name 属性，因为我们只希望它触发提交，而不是实际将其用作数据容器。而且，在大多数情况下，我们通常只包含一个提交按钮。

其次如何在没有点击触发器的情况下提交表单 具有我想要的价值的事件？有可能吗？例如 使用 2 提交值提交表单

你会使用：

 $('#form').submit()

要手动提交，但您需要有一个if() 语句，该语句具有确定适合提交哪个值的逻辑。 您可以使用隐藏的表单字段，而不是将值存储在按钮中，如下所示：

<form id="form"> 
    <input type="text">
    <input type="hidden" name="hidden" value="">

    <button type="submit">something3</button>
</form>

JavaScript：

 $("#form").on("submit", function(evt){
     // Stop the form submission process
     evt.preventDefault();


     // Logic that sets hidden input field to correct value:
     if(condition1){
         $("input[type=hidden]").attr("value", "1");
     } else if(condition2) {
         $("input[type=hidden]").attr("value","2");
     } else {
         $("input[type=hidden]").attr("value","3");
     }

     // Manually submit the form
     $("#form").submit();

 });

Answer 4

我建议使用隐藏的输入标签来使逻辑清晰。