<p>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.</p>

<p>Currently my JavaScript code for this is as follows:</p>

<pre><code>    function toggleShowPassword() {       
        var button = $get('PASSWORD_TEXTBOX_ID');
        var password;
        if (button)
        {
            password = button.value;
            alert(password);
            button.value = password;  
        } 
   }
</code></pre>

<p>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.</p>

<p>My questions are:</p>

<ol>
<li><p>Why does the password field keep getting reset with each button click?</p></li>
<li><p>How can I make it so the password field is NOT cleared once the user has seen his/her password in clear text?</p></li>
</ol>

[{'answer_id': 44436, 'author': 'matt b', 'author_id': 4249, 'author_profile': 'https://Stackoverflow.com/users/4249', 'pm_score': 1, 'selected': False, 'text': '<p>I would assume that the browser has some issue with the script attempting to set the value of a password field:</p>\n\n<pre><code>button.value = password;\n</code></pre>\n\n<p>This line of code has no real purpose. <code>password.value</code> is not affected in the previous lines where you are reading the value and using it in the <code>alert()</code>.</p>\n\n<p>This should be a simpler version of your code:</p>\n\n<pre><code>function toggleShowPassword() {       \n    var button = $get(\'PASSWORD_TEXTBOX_ID\');\n    if (button)\n    {\n        alert(button.value);\n    } \n</code></pre>\n\n<p>}</p>\n\n<p>edit: actually I just did a quick test, and Firefox has no problem setting the password field\'s value with code such as <code>button.value = "blah"</code>. 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.</p>\n'}, {'answer_id': 44442, 'author': 'Rytis', 'author_id': 979, 'author_profile': 'https://Stackoverflow.com/users/979', 'pm_score': 0, 'selected': False, 'text': "<p>You do not need to do <code>button.value = password;</code> since reading the value does not change it. I'm not sure why it's being cleared, maybe JavaScript does not allow password field values to be modified.</p>\n"}, {'answer_id': 44448, 'author': 'Jesús E. Santos', 'author_id': 4547, 'author_profile': 'https://Stackoverflow.com/users/4547', 'pm_score': 1, 'selected': False, 'text': "<p>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.</p>\n"}, {'answer_id': 44449, 'author': 'harpo', 'author_id': 4525, 'author_profile': 'https://Stackoverflow.com/users/4525', 'pm_score': 1, 'selected': False, 'text': '<p>You didn\'t say you were using ASP.NET, but...</p>\n\n<p>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:</p>\n\n<pre>\n// If the TextMode is "password", the Text property won\'t work\nif ( TextMode == System.Web.UI.WebControls.TextBoxMode.Password )\n    Attributes[ "value" ] = stringValue;\n</pre>\n'}, {'answer_id': 44458, 'author': 'pkaeding', 'author_id': 4257, 'author_profile': 'https://Stackoverflow.com/users/4257', 'pm_score': 1, 'selected': False, 'text': '<p>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:</p>\n\n<pre><code>&lt;input type="button" value="Show My Password" onclick="toggleShowPassword()"/&gt;\n</code></pre>\n'}, {'answer_id': 44462, 'author': 'JesDaw', 'author_id': 4440, 'author_profile': 'https://Stackoverflow.com/users/4440', 'pm_score': 1, 'selected': False, 'text': '<p>In your HTML:</p>\n\n<pre><code>&lt;input type="button" onclick="toggleShowPassword();"&gt;\n</code></pre>\n\n<p>You need to use "button" rather than "submit" to prevent your form from posting.</p>\n'}, {'answer_id': 44468, 'author': 'Dale Ragan', 'author_id': 1117, 'author_profile': 'https://Stackoverflow.com/users/1117', 'pm_score': 2, 'selected': True, 'text': '<p>I did a quick example up of a working version:</p>\n\n<pre><code>&lt;html&gt;\n    &lt;head&gt;\n        &lt;script type="text/javascript" src="prototype.js"&gt;&lt;/script&gt;\n        &lt;script type="text/javascript"&gt;\n            function toggleShowPassword() {       \n                var textBox = $(\'PasswordText\');\n                if (textBox)\n                {\n                    alert(textBox.value);  \n                } \n            }\n        &lt;/script&gt;\n    &lt;/head&gt;\n    &lt;body&gt;\n        &lt;input type="password" id="PasswordText" /&gt;&lt;input type="button" onclick="toggleShowPassword();" value="Show Password" /&gt;\n    &lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n\n<p>The key is that the input is of type button and not submit.  I used the <a href="http://prototypejs.org/" rel="nofollow noreferrer">prototype</a> library for retrieving the element by ID.</p>\n'}, {'answer_id': 44549, 'author': 'eviljack', 'author_id': 750, 'author_profile': 'https://Stackoverflow.com/users/750', 'pm_score': 0, 'selected': False, 'text': '<p>hah!</p>\n\n<p>the answer if here:\n<a href="http://forums.asp.net/p/1067527/1548528.aspx" rel="nofollow noreferrer">http://forums.asp.net/p/1067527/1548528.aspx</a></p>\n\n<p>I figured out the solution... the fix was simple change</p>\n\n<pre><code>  OnClientClick="myOnClick()"\n</code></pre>\n\n<p>to</p>\n\n<pre><code>  OnClientClick="return myOnClick()"\n</code></pre>\n\n<p>Here\'s the fully corrected code...</p>\n\n<p>\n\n    \n        function myOnClick() {\n            //perform some other actions...\n            return false;\n        }\n    \n    Untitled Page\n\n\n    \n    \n        \n    \n    \n\n</p>\n'}]
['https://Stackoverflow.com/questions/44401', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/750/']