如何在表单提交时选择打开新窗口或保持不变

Question

我有一个表格，我点击按钮即可提交。我想让用户选择在同一窗口中提交它们或打开一个新窗口。例如，如果用户想要在同一窗口中提交，他/她可以左键单击按钮，如果用户想要打开一个新窗口，他们可以右键单击，然后选择在新窗口中打开。是否可以实现此方法？

现在，我有一个表单，如果我将目标设置为"_self"，它将保留在同一页面上_blank，并将您重定向到不同的页面。

<form role="form" method="post" action="{{ url_for('Request-Compound.run_script') }}" target="_self">
  <input type="submit" class="btn btn-info btns" value="{{button.value}}" name="new_btn" onclick="{{button.onclick}}"/>
</form>

预期结果是能够让用户选择在同一窗口或新选项卡上提交表单。

Answer 1

当用户右键单击并选择"在新窗口中打开"时，您无法提交表单。

您可以实现一个下拉按钮，其中主要部件提交到当前窗口，但有一个部件是一个下拉箭头，提供提交到新窗口的选项(如 Bootstrap 中的此示例(。

显然，"提交到新窗口"会在提交之前更新target。

这是一个非常粗糙的例子(在jsFiddle 上 - 堆栈片段不允许以任何方式或形状的表单(：

<form action="https://google.com/search">
    <div>
        <label>Search: <input type="text" name="q" value="kittens"></label>
    </div>
    <div>
        <div class="button-menu">
            <input type="submit" class="current-window" value="Submit">
            <span class="menu-toggler">V</span>
            <div class="button-menu-content">
                <input type="submit" class="new-window" value="Submit to New Window">
            </div>
        </div>
    </div>
</form>

JavaScript：

$(".button-menu .menu-toggler").on("click", function() {
    $(this).closest(".button-menu").toggleClass("menu-open");
});
$(".new-window").on("click", function() {
    var form = $(this).closest("form");
    form.prop("target", "_blank");
});
$(".current-window").on("click", function() {
    var form = $(this).closest("form");
    form.prop("target", "_self");
});

显然，这非常粗糙，你的UI工具包(无论是自制的还是标准的(会让你看起来更聪明。

Answer 2

你可以

这样做：

$('button [type="submit"]').on('contextmenu', function(e) {
  e.preventDefault();
  // show a popover with your "open in new window button"
});
openInNewWindowButton.on('click', function() {
   $('form').attr('target', '_blank').submit();
}

Answer 3

"target"属性指定一个名称或关键字，指示在何处显示提交表单后收到的响应。

参见T.J.克劳德的回答。