how to invoke an event after losing focus from a textbox, asp.net mvc

Question

1. I have two text boxes A, B using (Html.textboxfor).
2. TextBox 'A' is enabled and TextBox 'B' is disabled.
3. When I type values in Textbox 'A' and click outside( moving out the cursor from the textbox), TextBox 'B' should be populated with somevalue.

For example : iam entering value of TextBox A = "King", if the focus is lost from the box, The value in the Textbox B should be "Peter", which should be filled automatically.

I use asp.net mvc.

Answer 1

you can jsut give the textbox an attrbiute of onblur and call a method which will fill the second textbox

something like:

   <script language="javascript">
       function fllB()
       {
          var txtB = document.getElementById("txtB");
          var txtA = document.getElementById("txtA");

          if (txtA.value == "King")
          {
              txtB.value = "Peter";
          }
        }
    </script>

<input type="text" id="txtA" onblur="fillB()" />
<input type="text" id="txtB" />

Answer 2

jQuery:

<script type="text/javascript">
  $(function()
  {

    $("#txtA").change(function()
    {
      if(this.value == "King") 
        $("#txtB").attr("disabled", "").val( "Peter" );
    });

  });
</script>

Answer 3

It looks as though you want your second textbox to always be disabled? If so include the disabled property in the textboxfor:

<%: Html.TextBoxFor( x => x.XXX, new { id = "txtA" }) %>    
<%: Html.TextBoxFor( x => x.XXX, new { id = "txtB", disabled="true" }) %>

For the JavaScript, I'm assuming you are using the jquery that is included with mvc: (If you don't want to clear txtb if the value is removed from box A, then remove the else statement)

    $(function() 
{
    $("#txtA").change(function()
    {
        if ($("#txtA").val().length > 0) {

            $("#txtB").val(function()
            {
                // Do something to populate #txtb ex: Peter
                var myVar = "Peter";

                return myVar;
            }); 
        }
        else 
        {
            $("#txtB").val("");
        }
    });
});

Answer 4

Hi,

Since you are using ASP.NET, why dont you used the .NET toolbox like asp:textbox. It will be easier to maintain also.

protected void TextBox1_TextChanged(object sender, EventArgs e)
{
    if (TextBox1.Text == "King")
    {
        TextBox2.Text = "Peter";
    }
}