Question

I have a form, which has a few different submit buttons on it all doing different things with the same post data.

Lets say for simplicity sake the form looks like this:

<form method="post">
  <input type="hidden" name="ids" value="1,2,3,4" />
  <input type="submit" id="picking" name="picking" value="Picking" />
  <input type="submit" id="shipping" name="shipping" value="Shipping" />
  <input type="submit" id="invoice" name="invoice" value="Invoice" />
</form>

At the moment the form submits to itself and I work out server side which submit button is pressed, build a URL from the POST data, then do a PHP redirect to what I need to go. This works fine.

However, I am looking for the form to post its data to a new window, but only when “invoice” is clicked. This rules out just adding target="_blank" to the form, as the other 2 buttons would submit to new pages as well.

I also can’t split the form into 3 different forms as the data is a lot more complex than the above, and a lot of it is input by the user.

Is there a way to do this using JavaScript/JQuery? If so, where would I start?

Thanks

Answer 1

could you not add target blank to the form when invoice is clicked?:

$("#invoice").click(function(){
  $('#form_id').attr('target', '_blank');
});

or:

$(document).on("click","#invoice",function(){
      $('#form_id').attr('target', '_blank');
    });