Passing data to a new tab isn't always straight forward. And As in most web cases, there are 2 sides: the one where you only support the latest browsers 🙌, on the other more common side is the legacy support.
Ok, but why do I need this? Well in some cases, you have a list of filtered items with a filter form containing different parameters controlling the items shown in the list.
The client then wants to be able to export these filtered items to a
But for UX reasons you want to trigger this download in a new tab so the user isn't directed away from the filtered list (and app). And let's be honest it's just annoying if your view gets swapped with and in-browser pdf viewer.
But opening a new tab means you need to pass the current filter data so the server knows what items to export!
HTML5, the easy way:
If you only have to support the latest browsers you can solve this with some neat HTML5 attributes.
The form allows the attribute
target="_blank" this in combination with
method="GET" gives you all you need to pass the data into a new tab.🔮 magic
Just as a side note, with HTML5 you can also place form fields outside the form tag, using the name attribute to link them together.
Now for the all browser support it's not that much harder, just a bit more work. The main idea is that we will use a
<a> tag and interrupt the default event to modify the tag's behaviour.
As you can see we will dynamically set the
_blank and append the data to the target URL. Note that this does only work in native JS and not with JQuery because you need to modify the DOM element directly whereas JQuery will keep the changes in memory.