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.

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.

• javascript
• jquery
• html
• ruby-on-rails-3
• simple-form

• This should be doable by "mucking around with using jQuery". What exactly did you try? – Andrew Hubbs Commented Nov 21, 2012 at 0: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 Commented Nov 21, 2012 at 0:34
• How about submitting via keyboard? what action do you want then? – David Hellsing Commented Nov 21, 2012 at 0:37
• That should work assuming $(this).parent was actually $(this).parent() where parent is the form. – Andrew Hubbs Commented Nov 21, 2012 at 0:39

3 Answers 3

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/

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>​

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");
  }
});