Question

I’ve the below ajax form. In the form I’ve got 2 textbox. There is a radio button to choose between Unlock and reset the password. All I want to do here is if I select unlock password label and textbox should disappear. I could do this with below javascript function only if the label and textbox were pure html. If I do that then Ajax doesnot pick up the value of password. Your help is much appreciated.

<input name="rblTooType" value="Unlock" type="radio" checked="checked" onclick="rblToolType_OnChange(true)" />Unlock
<input name="rblTooType" value="reset" type="radio" onclick="rblToolType_OnChange(false)" />reset Password 

@using(Ajax.BeginForm("Search","User",new AjaxOptions { 
                UpdateTargetId = "divResults"      
            })){   
            @Html.Label("UserName")
        @Html.TextBox("term")
        @Html.Label("Password")
        @Html.TextBox("Password")
    <input id="btnSubmit" type="submit" value="Unlock"/>
    }

    <script type="text/javascript">
        function rblToolType_OnChange(isUnlock) {
            if (isUnlock) {
                Password.style.display = "none";
                btnSubmit.value = "Unlock";
            }
            else {
                Password.style.display = "";
                btnSubmit.value = "reset Password";
            }
        }
    </script>

Answer 1

You seem to be depending on an old quirk of IE where element names and ids were added as global variables. It is bad practice to rely on that because other browsers don’t support it (it was a very bad idea from the start). Reference your form elements correctly and it should work. e.g.

    function rblToolType_OnChange(isUnlock) {
        var form = document.forms['<form name>']
        if (isUnlock) {
            form.Password.style.display = "none";
            form.btnSubmit.value = "Unlock";
        }
        else {
            form.Password.style.display = "";
            form.btnSubmit.value = "reset Password";
        }
    }