javascript - 为一个表单提交操作设置 target _blank

Question

我正在向我的 rails 应用程序提交一个表单，其中包含两个提交按钮。他们都去同一个控制器操作，并使用相同的表单，但在一个提交操作上，我想制作表单target=_blank，以便表单提交结果在新窗口中打开。

是否有捷径可寻？

这样做适用于两种操作：

<%= simple_form_for @thingy, :target => '_blank' do |f| %>

我一直在使用 jQuery 在表单上设置目标onclick，但没有运气。

Answer 1

在其中一个按钮上，添加一个类 say popup。然后像这样添加一些jQuery：

$('.popup').click(function(e) {
    e.preventDefault(); //prevents the default submit action
    $(this).closest('form').attr('target', '_blank').submit();
});

演示：http: //jsfiddle.net/HxrzD/

请注意，还有其他方法可以提交您可能需要考虑的表单，例如enter密钥。您可能还需要重置表单的目标属性，以防用户返回父窗口并使用另一个按钮再次提交。在这种情况下，您可以在最后清除目标：

$(this).closest('form').attr('target', '_blank').submit().removeAttr('target');

或者保存之前的状态：

var $form = $(this).closest('form'),
    target = $form.attr('target');
$form.attr('target', '_blank').submit().attr('target', target);

http://jsfiddle.net/HxrzD/2/

Answer 2

您可以拦截单击按钮，在提交前读取其数据并更改表单：

所以，HTML：

<form id='double' method="GET" action="http://google.com/search">
   <input name="q" type="text">
   <button class="Submit" data-target=""> Submmit here</button>
   <button class="Submit" data-target="_blank"> Open new</button>
</form>​

JS

$('button.Submit').click( function() {
    var t=$(this);
    var form=t.parents('form');
    form.attr('target',t.data('target'));
    form.submit();
    return false;
});

通过这种方式，您可以控制 html 标记中的目标选项。

http://jsfiddle.net/oceog/gArdk/

如果您不清除target表格，您将获得以下情况：

• 用户点击弹出按钮，
• 提交表格，
• 封闭的窗户，
• 点击非弹出

这也会让他从目标中弹出。

所以在我的snipplet中，如果data-target =''，我会清除目标

如果您只想将一个元素标记为弹出窗口，则需要克隆您的表单：http: //jsfiddle.net/oceog/gArdk/2/

JS：

$('button.Submit.popup').click( function() {
    var t=$(this);
    var form=t.parents('form').clone(true).attr('target','_blank');
    
    form.submit();
    return false;
});

HTML：

<form id='double' method="GET" action="http://google.com/search">
   <input name="q" type="text">
   <button class="Submit"> Submmit here</button>
   <button class="Submit popup"> Open new</button>
</form>​

Answer 3

为了处理所有submit情况（不仅仅是点击），我会执行以下操作：

$("form").submit(function(e) {
  if($(e.srcElement).is(".popup")){
    $(this).attr("target", "_blank");
  }
});