Question

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

有一种简单的方法吗？

这样做适用于这两种行为：

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

我已经习惯使用jQuery在onclick表单上设置目标，但没有运气。

Answer 1

在其中一个按钮上添加一个类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");
  }
});

仅为一个表单提交操作设置目标_blank

3 个答案: