10

2 つの送信ボタンを使用して、Rails アプリにフォームを送信しています。target=_blankどちらも同じコントローラー アクションに移動し、同じフォームを使用しますが、1 つの送信アクションで、フォーム送信結果が新しいウィンドウで開くようにフォームを作成したいと考えています。

これを行う簡単な方法はありますか？

これを行うと、両方のアクションで機能します。

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

jQuery を使用して form にターゲットを設定することをいじりましたonclickが、うまくいきませんでした。

4

3 に答える 3

13

ボタンの 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キーです。ユーザーが親ウィンドウに戻り、他のボタンを使用して再度送信した場合に備えて、フォームの target 属性をリセットする必要がある場合もあります。その場合、最後にターゲットをクリアすることができます:

$(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/

于 2012-11-21T00:38:56.233 に答える
1

ボタンへのクリックをインターセプトし、そのデータを読み取り、送信前にフォームを変更できます。

したがって、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と、次のシナリオが発生します。

  • ユーザーがポップアップボタンをクリックし、
  • フォームを送信し、
  • 閉じた窓、
  • 非ポップアップをクリック

また、それは彼をターゲットからポップアップさせます。

私のスニプレットでは、 data-target='' の場合にターゲットをクリアします

1 つの要素のみをポップアップとしてマークする場合は、フォームを複製する必要があります: 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>​
于 2012-11-21T00:47:50.787 に答える
0

（クリックだけでなく）すべてのsubmitケースを処理するには、次のようにします。

$("form").submit(function(e) {
  if($(e.srcElement).is(".popup")){
    $(this).attr("target", "_blank");
  }
});
于 2012-11-21T00:47:59.173 に答える