JavaScript forms

Submitted by dv on Sun, 2008-09-21 12:35

javascript

The code in question:

<html>
    <head>
        <script type="text/javascript">
            function doIt() {
                var frm = document.getElementById('form1');
                frm.action = 'rightaction.html';
                frm.submit();
            }
        </script>
    </head>
    <body>
        <form action="wrongaction.html" id="form1" method="post">
            <input type="hidden" name="action" value="fieldaction.html" />
            <button onclick="doIt()">do it</button>
        </form>
    </body>
</html>

On IE, instead of updating the action attribute of the form element, it changes the value attribute of the hidden field named “action”. It does this even with frm.setAttribute('action', 'rightaction.html'). The only workaround I found was to temporarily remove the hidden input tag from the DOM, change the form’s action attribute and then reinsert the input tag. Is there a better solution?

Update: After some googling, found the answer. The fix is to use the getAttributeNode() function. The resulting code is as follows:

<html>
    <head>
        <script type="text/javascript">
            function doIt() {
                var frm = document.getElementById('form1');
                frm.getAttributeNode('action').value = 'rightaction.html';
                frm.submit();
            }
        </script>
    </head>
    <body>
        <form action="wrongaction.html" id="form1" method="post">
            <input type="hidden" name="action" value="fieldaction.html" />
            <button onclick="doIt()">do it</button>
        </form>
    </body>
</html>