enable checkbox only when textbox is not empty asp.net

Question

I need to make visible a checkbox and a text near it only when the textbox is filled. Otherwise it should be invisible.

<p>Telefon:<asp:TextBox ID="txtPhone" runat="server"></asp:TextBox></p>  
<asp:CheckBox ID="CheckBox2" runat="server" Visible="False" Text="bla bla"/>

It will be ok either code behind or javascript.

"It will be ok code behind". No, that's a bad way to think about it. If no server side interaction is necessary, then *do not involve* the server. Where is your attempt at making this work? — mason, Feb 18 '15 at 14:31
That's not an attempt. That's just your markup that you're starting from. Make an attempt to accomplish what you want. You clearly know that this can be done with JavaScript. You know that the initiating action is [when the value of the textbox changes](http://stackoverflow.com/questions/1481152) And you know the action you want to do is check if the textbox is empty or not, then make a checkbox and some text visible or not. You know all the pieces. — mason, Feb 18 '15 at 14:35
I made this myself , it works good but the problem is that I must to click on the page to refresh and appear : protected void Page_Load(object sender, EventArgs e) { if (!string.IsNullOrEmpty(this.txtPhone.Text)) { this.CheckBox2.Visible = true; } else { this.CheckBox2.Visible = false; } } — user3623053, Feb 18 '15 at 14:54

score 2 · Accepted Answer · answered Feb 18 '15 at 15:43

2

Mason's answer was partially working for me, meaning the ID's were static and it could hit both conditions within the jQuery. However, my HTML was being rendered with CheckBox2 with a <span></span> element. So I had to do this to make it work.

<p>Telefon:<asp:TextBox ID="txtPhone" ClientIdMode="static" runat="server"></asp:TextBox>  
<asp:CheckBox ID="CheckBox2" ClientIdMode="static" runat="server" Text="blabla" style="display: none;" />

$(function () {
    $('#txtPhone').on('input propertychange paste', function () {
         if ($('#txtPhone').val()) {
                $("#CheckBox2").parent().show();
                }
                else {
                    $("#CheckBox2").parent().hide();
                }
            });
        });

answered Feb 18 '15 at 15:43

KidBilly

3,408
1
26
40

I didn't ask a question...? My answer was complete though, I explained that the span element was there. No need to show it. Nit-picky stack overflow people.. Oh wait, did you mistake me of the OP? – KidBilly Feb 18 '15 at 15:52
1

Sorry, got you confused with the person that asked the question. And I didn't quite understand where you said the span was coming from (your wording is a bit confusing). If your answer is the same as an existing one except for a minor difference, it's usually better form to leave a comment rather than create your own answer. – mason Feb 18 '15 at 15:56

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

You should do this with JavaScript. This question shows us how to detect when the textbox value changes. This question tells us how to tell if the textbox is empty or not. This demo shows us how to hide and show things with jQuery.

Notice that I made the ClientIdMode="static" for the controls, to avoid having different ID's on the client side than on the server. And instead of using the Visible property on the checkbox, I use the display: none CSS. Visible="false" would not even send the markup for the checkbox to the client, and we need that markup so we can show it without a postback.

<p>Telefon:<asp:TextBox ID="txtPhone" ClientIdMode="static" runat="server"></asp:TextBox></p>  
<asp:CheckBox ID="CheckBox2" ClientIdMode="static" runat="server" Text="bla bla" style="display: none" /> 

$(function() {    
    $('#txtPhone').on('input propertychange paste', function() {
        if($('#txtPhone').val()){
            $("#CheckBox2").show();
        }
        else{
             $("#CheckBox2").hide();
        }
    });
});

edited May 23 '17 at 11:57

Community

1
1

answered Feb 18 '15 at 15:01

mason

31,774
10
77
121

Hmm , still not working . I manage to do it throw autopostback set to true, but the problem is that it apears only if I click outside the textbox. Is there anyway to just autopostback after I write something in the textbox , not required an outside click ? – user3623053 Feb 18 '15 at 15:39
@user3623053 Describe still not working. You used my code exactly? How does it not perform the way you want? And no, you do **not need a postback** to accomplish this. Why in the world would you want the server to get involved with changing something simple in the DOM on the client? Totally unnecessary, a waste of resources, and a poor programming habit to get into. *Do things on the client when no server involvement is necessary*. – mason Feb 18 '15 at 15:41
I wanted to do this because it is the only way that works something. I tried more than 10 javascripts code and none of them are working. I changed everything it's necessary and nothing happened on the page. I filled the textbox with a number but the checkbox is still not visible. – user3623053 Feb 18 '15 at 15:51
@user3623053 Just because the JavaScript doesn't work properly doesn't mean that it's the wrong approach. It just means you need to fix the JavaScript. If you tried "more than 10 javascripts code" you should have outlined those in the question and stated how they didn't work. – mason Feb 18 '15 at 15:53

enable checkbox only when textbox is not empty asp.net

2 Answers2