setting target _blank for just one form submit action

Question

I'm submitting a form to my rails app, with two submit buttons. They both go to the same controller action, and use the same form, but on one submit action i want to make the form target=_blank so that the form submission results open in a new window.

Is there an easy way to do this?

Doing this works for both actions:

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

I've mucked around with using jQuery to set the target on the form onclick, but with no luck.

Solution 1

On one of the buttons, add a class say popup. Then add some jQuery like this:

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

Demo: http://jsfiddle.net/HxrzD/

Note that there are other ways to submit a form that you might need to consider, f.ex the enter key. You also might need to reset the form’s target attribute in case the user goes back to the parent window and submits again using the other button. In that case you can either just clear the target at the end:

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

Or save the previous state:

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

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

Solution 2

you can intercept click to the button, read it's data and change form before submit:

So, 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;
});

this way you can control the target option in your html markup.

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

in case if you not clear target of the form, you will get the following scenario:

• user click on popup button,
• submitted the form,
• closed window,
• click on non-popup

and that will also popup him form target.

so in my snipplet I clear target in case of data-target=''

if you want mark as popup only one element, you will need to clone your form: 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>​

Comments

[Andrew Hubbs]

This works. You can probably leave out the e.preventDefault() and .submit() parts though.

[David Hellsing]

@AndrewHubbs yes, possibly. But in theory you risk having race conditions, and it feels safer to programmatically control the submit (I admit I havent tested in a lot of browsers).

[zb']

@David see my answer, you missed one thing, about reusage of the form.

[David Hellsing]

@eicto I believe I mentioned that in plain text (not sure if it’s an issue). You can just add a .removeAttr('target') at the end of the chain.

[zb']

@David only if form had no default target, right now i think clone() is best :)

[Andrew Hubbs]

To really be safe with .clone() you probably need to give it double true .clone(true, true) (obviously depending on how bananas the OPs DOM/events really are).

[David Hellsing]

@eicto I’m not sure what you mean, it seems like you are just constructing new "what-if" problems. The OP specifically mentioned the target attribute.

[ipd]

Thanks, @David this works perfectly. One caviat: i was relying on the value of my submit button in my controller action, but this is getting lost now. I worked around this by setting a hidden attribute in the form in my javascript, then removing it. Now i'm wondering if there is a way to preserve this information. But, perhaps a seperate question, thanks again.