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

【问题标题】：How to give the choice to open a new window or stay on the same on form submit?如何在表单提交时选择打开新窗口或保持不变？
【发布时间】：2019-10-22 21:29:29
【问题描述】：

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

现在，我有一个表单，如果我将目标设置为“_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>

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

请参阅T.J. Crowder 答案。

【讨论】：

很明显，OP 知道 target 属性是如何工作的。 “如果您希望用户在新窗口中填写表单，您必须使用该表单创建一个单独的 html 页面并可能重复使用它。” 不，他们不这样做。

【解决方案2】：

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

您可能会实现一个下拉按钮，其中主要部分提交到当前窗口，但有一个部分是一个下拉箭头，提供提交到新窗口的选择（例如 Bootstrap 中的this example）。

显然，“提交到新窗口”会在提交之前更新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 工具包（无论是自制软件还是标准工具包之一）会让您看起来更智能。

【讨论】：

【解决方案3】：

你可以这样做：

$('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();
}

【讨论】：