in asp.net how can I dynamically hide one field based off anothers value?

Question

I have 4 asp:Textbox fields on a form. IDs being A1, A2 and B1, B2 for simplicity. If any one of the As or Bs is populated, I need to hide the other one. So I enter something in A1, hide A2, enter something in B2, hide B1.

I thought I could use a javascript OnBlur event to do this but it doesn't do anything unfortunately. I'm trying to get the fields to appear/disappear without having to do a postback.

Any suggestions or examples would be great.

thanks, Q

Answer 1

Add the event trigger onKeyDown to your four text boxes (You can read about key press event handlers here: http://help.dottoro.com/ljlkwans.php) and use the handler to hide the unwanted text box. Or if you just want to disable and not hide it this will work for you:

<asp:TextBox ID="A1" onKeyDown="disableText('A2')" runat="server"></asp:TextBox>

And then for the javascript:

function disableText(textbox)
{
    document.getElementById(textbox).disabled=true;
}

Answer 2

with jquery

$(function(){
    $('#A1').blur(function(){
    if ($('#A1').value() == "")
    {
        $('#A2').fadeIn();
    }
    else
    { 
        $('#A2').fadeOut();
    }
    });
});

Though if you're using a master page id's will be different!

Answer 3

Ok, so I tried basically the idea that Paul suggested:

$(document).ready(function(){ $('#ctl00_masterContentPlaceHolder_planLimitDollars').blur(function() { if ($('#ctl00_masterContentPlaceHolder_planLimitDollars').length <1) { $('#ctl00_masterContentPlaceHolder_planLimitTextBox').fadeIn(); } else { $('#ctl00_masterContentPlaceHolder_planLimitTextBox').fadeOut(); } }); });

If I clear the field out of the planLimitDollars text box, the planLimitTextBox disappears. If I put something back in the field does not reappear. I tried value=="" and length<1 but neither bring the field back.

Any thoughts?

Answer 4

piece of cake, and without jQuery :P

<script>
    function txtChange(x1, x2){
        x1=document.getElementById(x1);
        x2=document.getElementById(x2);
        x2.style['display'] = (x1.value.length>0) ? 'none' : '';
    }
</script>

and

protected void Page_Load(object sender, EventArgs e)
{
    a1.Attributes["onchange"] = string.Format("txtChange('{0}','{1}')", a1.ClientID, a2.ClientID);
    a2.Attributes["onchange"] = string.Format("txtChange('{0}','{1}')", a2.ClientID, a1.ClientID);
    b1.Attributes["onchange"] = string.Format("txtChange('{0}','{1}')", b1.ClientID, b2.ClientID);
    b2.Attributes["onchange"] = string.Format("txtChange('{0}','{1}')", b2.ClientID, b1.ClientID);
}