Javascript in anchor tag not working in FireFox and IE. Does work in Chrome

Question

I'm trying to debug a browser issue. The user can click the Change Password button which brings up a colorbox modal popup. If they click "Yes" nothing happens in Firefox or IE, but it works in Chrome.

                <a href="#doneChangePassword" id="changePasswordActivate" class="right modal button">Change Password</a>
                **<input class="hidden" type="submit" id="changePasswordButton" value="Change Password" />**

</section>

<div id="changePasswordContainer" class="modal_container confirm">
    <div id="doneChangePassword">
        <div>
            <div style="padding:10px;">
                <p style="font:size: 18px; text-align: center;">You are changing the password for<br /><strong>@TempData["UserFullName"]</strong>.</p>
                <div style="width: 180px; margin: 0 auto; text-align: center;">
                    <p style="margin: 0 0 10px 0;">Are you sure?</p>
                    <div class="closeBox right button_disabled_plain" onclick="$.colorbox.close();">No</div>
                    **<a href="javascript:$.colorbox.close();document.getElementById('changePasswordButton').click();return false;" class="left button">Yes</a>**
                    <div class="clr"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

I suggest you use a library like jQuery and bind a click event to the element

If you must do inline Javascript, It is also usually more reliable at least to use the HTML onclick attribute. If you do this I suggest you don't use the 'a' tag so you don't have to deal with the default behavior of it being a link. Use a span or div and style it how you like.

    <span onclick="myfunction()" class="left button">Yes</span>

    <script type="text/javascript">
     // as pointed out by the comment, the colorbox library may not have loaded yet..
     // if using jquery you could wrap this function in the page load event 
       function myfunction() {
            $.colorbox.close();
            document.getElementById('changePasswordButton').click();
        }
    </script>