Jquery: dynamically changing the target page of an HTML form)

ArticleDirectory

• (1) directly use linkbutton or link control?
• (2) set the target of form for these buttons!

Seeing Rick Strahl's latest blog changing an HTML form's target with jquery, the solution provided in this article is very simple and practical. Learn from the original article and refresh the summary on and off. This article provides a simple demo for downloading. I hope it will help you as well.

1. Problem Source

"There is a form in the page. Some submit buttons or link buttons need to be clicked to open the new page. How can we make these buttons submit the form information to the correct corresponding page ?"

This seems simple.

Familiar with Asp.net development, we should be very clear that through Asp.net webform, we can set the attributes of runat = "server" form:

 
<Form method = "Post" Action = "default. aspx" id = "form1">
 

As you know, the method attribute is the HTTP data transmission method, and the Action attribute is the target page to be submitted. to open a new page, SetTargetFor _ blank.

For normal page interactions, it is no problem to submit the same form with one or more buttons. However, if the buttons require different pages to be post, this method is powerless. Because this solution is "Global", setting once affects all form submission elements.

2. runat = form of server

At this point, some people may say "gloating" that this is a poor form mechanism for web forms. A page can only have a form with runat = server. We can define several more forms on a page. For different submission buttons, we can set different forms (that is, split the submission button to different forms) for them ), does this solve the problem? (SINA, Netease, Sohu and many other pages open a webpage and view the source code. We can see a lot of forms. I guess they are all used in this way )?

However, this is not an "error" exclusive to web forms, and other development frameworks have similar problems:

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.

One of the original comments replied:

"Good post, as always, but have you noticed that literally everything you want to do with webforms requires a hack or workaround? It's always some rudimentary thing that is easy to do in any other web platform or framework, but the webforms wait action always rears it'sUuglyHead.Bleh, the further I get away from webforms, the more productive I have become."

The word "uugly" is really an image and sinister. Fortunately, Rick promptly replied:

# Re: changing an HTML form's target with jquery
By Rick strahlfebruary 03,201 1 @ am @ Jeff-This isn't specific to webforms as I pointed out at the top of the page. the same applies to MVC or any other framework that has multiple postable options for submission. admittedly, with webforms your options are more limited as you can't easily add additional forms, but when you need to submit form variables to multiple target actions there are no choices regardless of platform...

Also, I feel that the name Jeff is quite excited.

3. simple and practical solution (1). How can I directly use a linkbutton or a link control?

In general, we can easily think of using the properties of the ready-made link control to implement Page Submission. For example, linkbutton:

<Asp: linkbutton runat = "server" id = "btnnewtarget" text = "new target" target = "_ blank" onclick = "bnnewtarget_click"/>
 

Although linkbutton does not have the target attribute, It is not set as above.

However, this is the most feared thing. When viewing the generated HTML source code:

 
<A id = "btnnewtarget" target = "_ blank" href = "javascript :__ dopostback (& #39; btnnewtarget & #39;, & #39 ;&# 39 ;) "> New Target </a>
 

We found that the href attribute of Element A in the generated HTML source code has been set to an easy-to-understand control sending back script. This script makes it impossible for us to submit data to a new window. Why?

What happens with a target tag is thatBeforeThe 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.

The original text is still clear and simple, good, fabulous, excellect... Poor words.

(2) set the target of form for these buttons!

With the following script, we can easily implement our reservation function:

 
$ ("# Btnbuttonnewtarget, # btnnewtarget"). Click (function () {$ ("form"). ATTR ("target", "_ blank ");});
 

For the post of the same page (in this example, the default. aspx page), the effect is different from that of (1. Maybe you are used to asking why. The original Article explains this as follows:

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.

Reading the original article may be a bit difficult to grasp. In my opinion, the key is to understand the "form submission process" in the original article )". When you click the button, you can use a script to change the target of the form on the current page, this is only part of the form submission process (by changing the target from within script code the target change fires as part of the form submission process ).

So what happened to the real "form submission process? Following the meaning of the original article, it looks like a new page is opened, and the form data of the previous page is submitted to the new page, it looks like the previous page) the _ dopostpack function "jumps" to the current new page (also called current page) to trigger clickhandler ...... No.Current page"Replacement? Maybe my own understanding is still biased. The decline in English proficiency is so maddening that it must be supplemented. If you have a better understanding of the explanation, please do not give me any further advice.

Click the previous page to trigger an event on the newly opened page. I Kao, how is it like the legendary Great Migration of Qiankun in the rivers and lakes?

By the way, we can also post parameters on different new pages. You can set the form action on the default page in the demo to "targetpage. aspx" and try again. In fact, I have encountered similar problems mentioned in Rick's article during development. My solution is to directly write a function for a button using JavaScript: first find the form to be operated, modify the action, and then call the form submit method to open a new window, it's really not as concise as Rick's original article.

Download Demo: simplewebapp