How do I get the RadTextBox TextMode=Password to accept the Auto Filled value in the code behind?

Question

Google Chrome and FireFox browsers have a feature that allows users to save user name and passwords to their local machine. This allows them to login the next time without much effort or remembering what that information is. The information is basically auto-filled. When those browsers do this it shows the * in the textbox. Showing that the browser successfully placed the value in the RadTextBox. However, when the c# code behind retrieves the value as an empty string.

My code is as follows

<telerik:RadTextBox ID="txtPassword" runat="server" ToolTip="Enter password" 
                    Text="" MaxLength="40" EnableSingleInputRendering="False"
                    Wrap="False" TextMode="Password" CausesValidation="false" Skin="WebBlue">
</telerik:RadTextBox>    

Code Behind:

objLogin.Password = txtPassword.Text;

Even odder is the fact that if you click the button more than once it will then the code behind will see the actual value and proceed to log you in. It seems that the RadTextBox Control needs to be rendered a second time or post back is required for the control to work properly.

What do I need to do to get the RadTextBox control to recognize the inputed value from the browser initially without having to click multiple times for the code behind to see the value?

Thanks for your help.

Answer 1

That is because your textboxes gets the value on the client side alone, while the underlying RadTextBoxes values do not.

I have experienced this issue before where values set to a RadTextBox by using jQuery xxx.val('...') do not get through to the server-side on postback.

The only way to get the value 'assigned' to the RadTextBox control's Text property from client-side is to use:

$find('<%= txtUsername.ClientID%>').set_value('newvalue');

In your case, most probably the browsers set (autofill) the values and only available on client side. Therefore, what you can do to actually assign those values is to intercept before the Login button postbacks, like so:

var un = $('#<%= txtUsername.ClientID%>').val();
var pw = $('#<%= txtPassword.ClientID%>').val();

$find('<%= txtUsername.ClientID%>').set_value(un);
$find('<%= txtPassword.ClientID%>').set_value(pw);

If you are using RadButton as the Login button, this can be done on the button's OnClientClicking/OnClientClicked event like so:

<telerik:RadButton ID="cmdSignin" runat="server" Text="Sign In" 
    SingleClick="true" SingleClickText="Signing In..." 
    OnClientClicking="OnClientClicking"></telerik:RadButton>

Hope that helps.