10

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.

ipd
  • 5,674
  • 3
  • 34
  • 49
  • This should be doable by "mucking around with using jQuery". What exactly did you try? – Andrew Hubbs Nov 21 '12 at 00:33
  • i'll edit the question with the javascript when i get a chance. Essentially i was: grabbing the click action on the button, then getting the form and setting the target property, i.e. `$(this).parent().prop('target', '_blank')` – ipd Nov 21 '12 at 00:34
  • How about submitting via keyboard? what action do you want then? – David Hellsing Nov 21 '12 at 00:37
  • That should work assuming `$(this).parent` was actually `$(this).parent()` where parent is the form. – Andrew Hubbs Nov 21 '12 at 00:39

3 Answers3

14

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/

David Hellsing
  • 106,495
  • 44
  • 176
  • 212
  • This works. You can probably leave out the `e.preventDefault()` and `.submit()` parts though. – Andrew Hubbs Nov 21 '12 at 00:57
  • @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). – David Hellsing Nov 21 '12 at 00:59
  • 1
    @David see my answer, you missed one thing, about reusage of the form. – zb' Nov 21 '12 at 01:04
  • @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. – David Hellsing Nov 21 '12 at 01:06
  • @David only if form had no default `target`, right now i think clone() is best :) – zb' Nov 21 '12 at 01:10
  • 1
    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). – Andrew Hubbs Nov 21 '12 at 01:16
  • @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. – David Hellsing Nov 21 '12 at 01:16
  • 1
    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. – ipd Nov 21 '12 at 20:07
1

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>​
zb'
  • 8,071
  • 4
  • 41
  • 68
0

In order to handle all submit cases (not just clicks) I would do something like the following:

$("form").submit(function(e) {
  if($(e.srcElement).is(".popup")){
    $(this).attr("target", "_blank");
  }
});
Andrew Hubbs
  • 9,338
  • 9
  • 48
  • 71