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中的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工具包（无论是自制软件还是标准工具之一）将使您看起来更聪明。

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

“目标”属性指定名称或关键字，该名称或关键字指示在提交表单后将收到的响应显示在何处。

请参见T.J. Crowder答案。

如何选择打开新窗口或保留相同的表单提交？

3 个答案: