提交时如何使用 jQuery keydown 选择两个提交按钮之一？

Question

我的表单有两个 "save" 按钮 - 一个用于保存和重定向到索引视图，一个用于保存并返回到编辑视图。

通过鼠标单击操作，它可以正常工作，但我希望能够按 CTRL+S 保存并重定向回“编辑”视图。

这是编辑表单：

<form asp-action="Edit" id="myForm">
    <!-- more form items -->
    <button type="submit" name="save" value="">
        Save and go to index
    </button>
    <button type="submit" name="save" value="stay">
        Save and stay here
    </button>
</form>

这是控制器方法：

public async Task<IActionResult> Edit(int id, string save, [Bind("form fields")] Model model)
{
    // save form data and stuff

    if (save == "stay") // "save" is the name of the submit buttons
    {
        return View(auto.Map<ViewModel>(model));
    }
    else
    {
        return RedirectToAction("Index");
    }
}

这是关键处理jQuery:

$(window).bind('keydown', function(event) {
    if (event.ctrlKey || event.metaKey) {
        if (String.fromCharCode(event.which).toLowerCase() == 's') {
            event.preventDefault();
            $("[name=save]").val('stay');
            $("#myForm").submit();
        }
    }
});

如您所见，我将提交按钮的值设置为 "stay"，试图在保存后返回到编辑视图，按照我的控制器方法逻辑，但我无论如何都会被重定向到索引视图。

如果我用鼠标单击 "stay" 按钮，控制器会收到值 "stay"。如果我按 CTRL+S，则不是。

Answer 1

按钮上设置的值仅在单击时发送。使用 .submit() 时不包括它们。这是预期的行为。

简单的解决方案是使用一个处理程序来管理它，该处理程序将代替您现有的 keydown 绑定。

<form id="myForm">
  <input type="hidden" name="save" value="" />
  <button type="submit" data-save="">Save and go to index</button>
  <button type="submit" data-save="stay">Save and stay here</button>
</form>

请注意，我们已经删除了 name/value 属性，现在可以使用将始终发送到服务器的隐藏输入。

$(':submit[data-save]').on('click', function (event) {
  event.preventDefault(); // 1
  const saveValue = $(this).data('save') || ''; // 2
  $('[name=save]').val(saveValue); // 3
  $('#myForm').submit(); // 4
});

简而言之...

event.preventDefault() 阻止按钮提交表单
saveValue 设置为我们在数据属性中声明的任何内容
用关联值更新隐藏输入
提交表格

您的 keydown 绑定仍然有效，不会受到影响。

Answer 2

这里有两个按钮，所以我不清楚您要更改哪个按钮，或者同时更改两个按钮，但是这段代码在按下 ctl + s 时将两个按钮的值属性设置为 "stay"。这是在这个答案的帮助下完成的：

How to detect if multiple keys are pressed at once using JavaScript?

$(window).bind('keydown', onkeydown);
$(window).bind('keyup', onkeyup);

var map = {}; // You could also use an array
onkeydown = onkeyup = function(e) {
  e = e || event; // to deal with IE
  map[e.keyCode] = e.type == 'keydown';
  if (map[17] && map[83]) { // CTRL+s
    $("button[name='save']").each((i, e) => {
      $(e).val("stay");
    });
    console.log("success");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Click in this window and press ctl + s</h2> 
<form asp-action="Edit" id="myForm">
  <!-- more form items -->
  <button type="submit" name="save" value="">
        Save and go to index
    </button>
  <button type="submit" name="save" value="stay">
        Save and stay here
    </button>
</form>

提交时如何使用 jQuery keydown 选择两个提交按钮之一？

How can I choose one of two submit buttons using jQuery keydown when submitting?

forms

jquery

keydown

asp.net-core-mvc