HTML Forms and the action attribute

Today I had to debug a set of HTML pages. One feature of a website would not work with Internet Explorer. The code was like this:

var f = document.getElementById(‘my-form’); 

f.setAttribute(‘action’, url);

f.submit(); 

This code snippet works perfectly with all the other browsers. It sets the action attribute of the form to a different URL than the default and submits the form where it is expected to go.

Internet Explorer ignores the setAttribute() function call. So I decided to look into a solution.

One way was to use the header(’Location: …’) in the PHP code. However, this looked so ugly that I decided I would need the correct solution instead. So I looked around some more. I read several DOM documentations. And they all said that I should write:

f.action = url;

Okay. That sounds good, but I tried that before and it failed with an error. Something like ‘error setting value’. I had really no idea what that meant. Later I decided to check what was in action since I saw a sample somewhere saying we could do this:

alert(f.action);

So I did. I did not see the URL. Instead, Internet Explorer was saying: [object]. So the action attribute is an object and not a string? Hmmm…

After a little while, I finally decided to test under Sea Monkey since I was getting nowhere with Internet Explorer. I have to say that the Mozilla browsers are simply much better. The alert told me [object HTMLInputObject] or something like that. Right away it told me that I have an input tag named action. Ha! That was the bug.

<form action="go.php">

<input ... name="action" .../>

</form>

This HTML snippet shows the culprit. By putting an input named action within a form, I could not anymore access the action attribute of the form under Internet Explorer. Renaming that input tag “next-action” made the f.action = url code work.

Now it works on all the browsers.