I feel foolish, but the solution to this was very simple (isn’t it always). I omitted to say that ‘formTwo’ had a hidden input tag called ‘action’. Thus my JavaScript was referencing that in the DOM rather than the ‘action’ property of the Form itself. All rather silly!
This has utterly stumped me and a colleague of far superior skills, so I’m putting this out to the wider community. It is not a matter of life or death, hence I’m not logging it as a bug. I’m not sure where one could log such a bug as the issue could be with any of the components, but more than likely is with IE (or the Irritation Engine as I like to call it).
Anyway, here is the little problem:
My page has two forms (for this example); ‘formOne’ that has its action property hardcoded and ‘formTwo’ that uses JSTL to set the form’s details:
... <form id="formOne" name="formOne" action="/aContext/anAction.do" method="post"> ... </form> <form id="formTwo" name="formTwo" action="<c:url value='/anAction.do' />" method="post"> ... </form> ...
Now, if during some bit of JavaScript I decide I would like to access the form’s action property, with the following bit of code (using Prorotype: Prototype-1.4.0.js) like so:
...
alert($('formOne').action);
alert($('formTwo').action);
...
It returns the same if I use vanilla JavaScript as well:
...
alert(document.getElementById('formOne').action);
alert(document.getElementById('formTwo').action);
...
The first one will return as expected ‘/aContext/anAction.do’ whilst the second will return ‘[object]’! Looking at the rendered HTML, they both look like:
... <form id="formOne" name="formOne" action="/aContext/anAction.do" method="post"> <form id="fromTwo" name="formTwo" action="/aContext/anAction.do" method="post"> ...
Weird, can anyone explain this phenomenon?