Jump to content

How exactly does the form action and target work?


rocky_88

Recommended Posts

I ran into this confusion while trying to write a script for uploading a file using AJAX which would work in IE8. Apparently there is a hack to achieve this which involves the usage of iframes.

 

What I've tried so far is submitting a form with just action attribute which redirects to another page.

<form method="post" action="test.php">
		<input type="text" name="name" />
		<input type="submit" name="send" value="Send" />
</form>

Even if I set the attribute to _self(default value), the page redirects to test.php and shows what ever is printed by the php script.

 

 

Now when I set the target to _blank, the page test.php opens in a new tab and shows what ever is printed by the php script.

<form method="post" action="test.php" target="_blank">
		<input type="text" name="name" />
		<input type="submit" name="send" value="Send" />
</form>

And if I set the target to an iframe name present in the same page, the php response is printed in the iframe(which is the hack to upload a file)

<form method="post" action="test.php" target="some_frame">
		<input type="text" name="name" />
		<input type="submit" name="send" value="Send" />
</form>
<iframe name="some_frame" />

So what I want to know is how does the action and target attribute work once the form is submitted? When the target attribute is set to _self, the page redirects and then prints(action first and then target), but if the target attribute is set to _blank, first a new tab is opened and then the response is printed(first the target and then action) and when the target attribute is set to a frame_name, it prints within the frame(does it load the response from the page into the frame?).

 

It would be really helpful if someone could assist me with a link or an explanation of the flow of a form submission, the order of execution of the action and target attributes and how do they work and in what order do they run.

Link to comment
Share on other sites

The W3C has gone through great lengths to explain, in detail, exactly how processes like this work.

 

HTML 5 Form Submission

 

tl;dr: When submitting a form,

1. Browser does everything up to the actual navigation/request as normal

2. Uses the target to figure out where the request should be made

3. Makes the request (and handles the response, and so on) within that target

 

It's not "print within that target" or "load the response in that target". When the browser is ready to submit the form - that is to navigate, with or without a request body - it does so in that tab/window/frame.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.