Changing an HTML Form's Target with jQuery
- by Rick Strahl
This is a question that comes up quite frequently: I have a form with several submit or link buttons and one or more of the buttons needs to open a new Window. How do I get several buttons to all post to the right window? If you're building ASP.NET forms you probably know that by default the Web Forms engine sends button clicks back to the server as a POST operation. A server form has a <form> tag which expands to this: <form method="post" action="default.aspx" id="form1">
Now you CAN change the target of the form and point it to a different window or frame, but the problem with that is that it still affects ALL submissions of the current form. If you multiple buttons/links and they need to go to different target windows/frames you can't do it easily through the <form runat="server"> tag.
Although this discussion uses ASP.NET WebForms as an example, realistically this is a general HTML problem although likely more common in WebForms due to the single form metaphor it uses. In ASP.NET MVC for example you'd have more options by breaking out each button into separate forms with its own distinct target tag. However, even with that option it's not always possible to break up forms - for example if multiple targets are required but all targets require the same form data to the be posted.
A common scenario here is that you might have a button (or link) that you click where you still want some server code to fire but at the end of the request you actually want to display the content in a new window. A common operation where this happens is report generation: You click a button and the server generates a report say in PDF format and you then want to display the PDF result in a new window without killing the content in the current window. Assuming you have other buttons on the same Page that need to post to base window how do you get the button click to go to a new window?
Can't you just use a LinkButton or other Link Control?
At first glance you might think an easy way to do this is to use an ASP.NET LinkButton to do this - after all a LinkButton creates a hyper link that CAN accept a target and it also posts back to the server, right? However, there's no Target property, although you can set the target HTML attribute easily enough.
Code like this looks reasonable:
<asp:LinkButton runat="server" ID="btnNewTarget" Text="New Target"
target="_blank" OnClick="bnNewTarget_Click" />
But if you try this you'll find that it doesn't work. Why? Because ASP.NET creates postbacks with JavaScript code that operates on the current window/frame:
<a id="btnNewTarget" target="_blank" href="javascript:__doPostBack('btnNewTarget','')">New Target</a>
What happens with a target tag is that before the JavaScript actually executes a new window is opened and the focus shifts to the new window. The new window of course is empty and has no __doPostBack() function nor access to the old document. So when you click the link a new window opens but the window remains blank without content - no server postback actually occurs.
Natch that idea.
Setting the Form Target for a Button Control or LinkButton
So, in order to send Postback link controls and buttons to another window/frame, both require that the target of the form gets changed dynamically when the button or link is clicked. Luckily this is rather easy to do however using a little bit of script code and jQuery.
Imagine you have two buttons like this that should go to another window:
<asp:LinkButton runat="server" ID="btnNewTarget" Text="New Target"
OnClick="ClickHandler" />
<asp:Button runat="server" ID="btnButtonNewTarget" Text="New Target Button"
OnClick="ClickHandler" />
ClickHandler in this case is any routine that generates the output you want to display in the new window. Generally this output will not come from the current page markup but is generated externally - like a PDF report or some report generated by another application component or tool. The output generally will be either generated by hand or something that was generated to disk to be displayed with Response.Redirect() or Response.TransmitFile() etc.
Here's the dummy handler that just generates some HTML by hand and displays it:
protected void ClickHandler(object sender, EventArgs e)
{
// Perform some operation that generates HTML or Redirects somewhere else
Response.Write("Some custom output would be generated here (PDF, non-Page HTML etc.)");
// Make sure this response doesn't display the page content
// Call Response.End() or Response.Redirect()
Response.End();
}
To route this oh so sophisticated output to an alternate window for both the LinkButton and Button Controls, you can use the following simple script code:
<script type="text/javascript">
$("#btnButtonNewTarget,#btnNewTarget").click(function () {
$("form").attr("target", "_blank");
});
</script>
So why does this work where the target attribute did not? The difference here is that the script fires BEFORE the target is changed to the new window. When you put a target attribute on a link or form the target is changed as the very first thing before the link actually executes. IOW, the link literally executes in the new window when it's done this way.
By attaching a click handler, though we're not navigating yet so all the operations the script code performs (ie. __doPostBack()) and the collection of Form variables to post to the server all occurs in the current page. By changing the target from within script code the target change fires as part of the form submission process which means it runs in the correct context of the current page. IOW - the input for the POST is from the current page, but the output is routed to a new window/frame. Just what we want in this scenario.
Voila you can dynamically route output to the appropriate window.© Rick Strahl, West Wind Technologies, 2005-2011Posted in ASP.NET HTML jQuery
