Submit form in new window from one button (out of many) in IE8

Question

I have a form that has a "preview" submit input, which submits the same form as the others, but with a "visualize" parameter which has to open a new window (in order to keep the form in its temporary state). If I was designing for shiny-clean HTML5 browsers, I could do this nicely using the new formTarget attribute:

<form id="myForm" action="somecontroller/action">
  <input type="text" name="someValue" />
  <input type="submit" id="visualize" value="Visualize" name="visualize" formTarget="_blank" />
  <input type="submit" value="Submit" name="submit" />
</form>

Sadly, the main userbase of this product is using IE8 still (it's an internal network) so this website has to handle IE8 only. I have yet to find a way to make this simple thing work in javascript.

I found this very nice answer and tried to apply it, it doesn't work in my case since I guess it does not submit the form with a "visualize" parameter, so my action does not process it as a preview. So I asked jQuery to click the right button instead of submitting the form:

$('#visualize').click(function(e) {
  if (!$('#myForm').prop('target')) {
    e.preventDefault(); //prevents the default submit action
    $('#myForm').prop('target', '_blank');
    $('#visualize').click();
  }
  else {
    $('#myForm').prop('target', null);
  }
});

This still does not work. It just submits the form in the same window.

Answer 1

Alright, I finally worked this out, so here's a (dirty but working) solution:

    $('#visualize').click(function(e) {
            e.preventDefault(); //prevents the default submit action
            var $form = $(this).closest('form');
            $('<input />').attr('type', 'hidden')
            .attr('name', "visualize")
            .attr('id', "visualizeTemp")
            .attr('value', "1")
            .appendTo($form);
            $form.prop('target', '_blank').submit().prop('target', '_self');
            $('#visualizeTemp').remove();
    });

Basically I create an entire temporary hidden input named just like my button (visualize) and submit the form. Then, I just remove my temporary input.

As a side note, I also stumbled upon this issue when calling $form.submit() so I had to rename my submitting button:

<form id="myForm" action="somecontroller/action">
  <input type="text" name="someValue" />
  <input type="submit" id="visualize" value="Visualize" name="visualize" formTarget="_blank" />
  <input type="submit" value="Submit" name="save" />
</form>