Advertisement
Advertisement


catching button clicks in javascript without server interaction


Question

I've got a sign up form that requires the user to enter their email and password, both are in two separate text boxes. I want to provide a button that the user can click so that the password (which is masked) will appear in a popup when the user clicks the button.

Currently my JavaScript code for this is as follows:

    function toggleShowPassword() {       
        var button = $get('PASSWORD_TEXTBOX_ID');
        var password;
        if (button)
        {
            password = button.value;
            alert(password);
            button.value = password;  
        } 
   }

The problem is that every time the user clicks the button, the password is cleared in both Firefox and IE. I want them to be able to see their password in clear text to verify without having to retype their password.

My questions are:

  1. Why does the password field keep getting reset with each button click?

  2. How can I make it so the password field is NOT cleared once the user has seen his/her password in clear text?

2013/05/14
1
1
5/14/2013 12:20:01 PM

Accepted Answer

I did a quick example up of a working version:

<html>
    <head>
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript">
            function toggleShowPassword() {       
                var textBox = $('PasswordText');
                if (textBox)
                {
                    alert(textBox.value);  
                } 
            }
        </script>
    </head>
    <body>
        <input type="password" id="PasswordText" /><input type="button" onclick="toggleShowPassword();" value="Show Password" />
    </body>
</html>

The key is that the input is of type button and not submit. I used the prototype library for retrieving the element by ID.

2008/09/04
1
9/4/2008 6:53:55 PM

I would assume that the browser has some issue with the script attempting to set the value of a password field:

button.value = password;

This line of code has no real purpose. password.value is not affected in the previous lines where you are reading the value and using it in the alert().

This should be a simpler version of your code:

function toggleShowPassword() {       
    var button = $get('PASSWORD_TEXTBOX_ID');
    if (button)
    {
        alert(button.value);
    } 

}

edit: actually I just did a quick test, and Firefox has no problem setting the password field's value with code such as button.value = "blah". So it doesn't seem like this would be the case ... I would check if your ASP.NET code is causing a postback as others have suggested.

2008/09/04

It sounds that you're doing a request to the server on each click, the password box being reset in each page load is typical behavior of the browsers.

2008/09/04

If you don't want the button to submit the form, then be sure it has type 'button' rather than 'submit'. For example, you might do something like this:

<input type="button" value="Show My Password" onclick="toggleShowPassword()"/>
2008/09/04

In your HTML:

<input type="button" onclick="toggleShowPassword();">

You need to use "button" rather than "submit" to prevent your form from posting.

2008/09/04

You didn't say you were using ASP.NET, but...

By design, ASP.NET clears during postback the value of TextBox controls whose Mode is Password. I work around this in a subclass with the following code:

// If the TextMode is "password", the Text property won't work
if ( TextMode == System.Web.UI.WebControls.TextBoxMode.Password )
    Attributes[ "value" ] = stringValue;
2008/09/04

Source: https://stackoverflow.com/questions/44401
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]