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（）查看表单数据时它没有提供提交按钮值，并且{{3}触发$ .submit（）事件而不使用click。

因此，唯一的解决方法是处理3个按钮的click事件并存储在提交表单之前检查的一些值，如本答案中所述：no easy cross-browser friendly way to check the button

示例：How can I get the button that caused the submit from the form submit event?

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

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

使用jquery提交表单，其中有多个提交按钮而没有单击触发器？

4 个答案: