CODEWITHSUNDEEP
c#asp.nettextboxvisible
Rithu
Rithu

Reputation: 17

How to make textbox visible when previous textbox contains text

I have a WebForm in which i need to place around 30 textboxes mainly to enter barcode scanned data. I am making only the first textbox visible and i want the next textbox to be visible only when the previous textbox is filled with some text. I tried using 'If' condition as well in the textbox on selected change but it doesn't work. Any solutions?

Upvotes: 0

Views: 5344

Answers (6)

Khadim Ali
Khadim Ali

Reputation: 2598

Comparatively simple solution in JavaScript. The code should be somehow like this.

Define onchange event on text boxes like this:

    <asp:TextBox ID="txt1" runat="server" onchange="show('txt1', 'txt2');"></asp:TextBox>
    <asp:TextBox ID="txt2" runat="server" onchange="show('txt2', 'txt3');" Style="visibility: hidden;"></asp:TextBox>

Then use this JavaScript code to show the next TextBox conditionally. Put this code in the head tag of the page:

<script type="text/javascript">
    function show(txtCurrent, txtNext) {

        var valueCurrent = document.getElementById(txtCurrent).value;
        //alert(valueCurrent);

        if (valueCurrent.length > 0) {
            document.getElementById(txtNext).style.visibility = 'visible';
        }
        else {
            document.getElementById(txtNext).style.visibility = 'hidden';
        }

    }
</script>

Upvotes: 0

kuldeep
kuldeep

Reputation: 70

You should use java-script for this because if you will use server side function for this then It will go to server so many times by this your application performance also will decrease.

So create a java-script function that will accept one argument. This argument will take next text box id (text box u want to display). call this javascript function like this:- onkeyup="calgrid(this,"TextBox2");" pass nexttextbox id in place of TextBox2...

<script type="text/javascript" language="javascript">

 function calgrid(firsttextbox,nexttextbox)
{

    var id=firsttextbox.id;
    var lastindex= id.lastIndexOf("_");
    var strclnt=id.slice(0,lastindex+1);
    var txtboxvalue=document.getElementById(firsttextbox).value;
if(txtboxvalue!="")
{
      document.getElementById(strclnt+nexttextbox).style.visibility='visible';
}
else
{
  document.getElementById(strclnt+nexttextbox).style.display = "none";
}


}
</script>

note:- If you will do visible=false from textbox property then we cannt do visible=true from javascript. So Set style for all textbox style="display:none"

Upvotes: 1

Dwoolk
Dwoolk

Reputation: 1501

I'd name these text boxes similarly like "textbox1", "textbox2", "textbox3" so you can easily find the index of current text box. Then you can use KeyDown event to control what will be shown and what not. This is not a working example but it should give you a good direction.

        int currentIndex = 1;

        private void TextBox1_KeyDown(object sender, KeyEventArgs e)
        {
            TextBox t = Controls["TextBox" + (currentIndex + 1).ToString()] as TextBox;
            t.Visible = true;
            currentIndex +=1;
        }

Upvotes: 1

Neeraj
Neeraj

Reputation: 4489

You can resolve your problem by Jquery. I have make a sample code where i have take four Textbox. Initially only first text box is visible in Web form, when user enter some values in first TextBox next Textbox is automatically display if Previous textbox have a value if not next textbox is not visible.

Sample code is given below :

<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />

$('input:text:not(:eq(0))').hide()
$('input').on("change paste keyup", function () {
    if ($(this).val().length > 0) {
       $(this).next().show();
    }
else
{
    $(this).next().hide();
}
});

I have made sample application for same ,please click on given link for Demo

See Demo application

It's at Client side code so its performance is so fast rather than Server Side.

Please vote me if you feel your problem is resolved by my idea.

Upvotes: 1

Anuj
Anuj

Reputation: 1526

try this code

initially set flag=1 as first textbox is going to be by default visible

private void visibleTextBox(Control c) { int flag = 1;

        foreach (Control c1 in c.Controls)
        {
            if (c1.GetType() == typeof(TextBox))
            {
                if (flag == 1)
                {
                    ((TextBox)c1).Visible = true;
                }
                else
                {
                    ((TextBox)c1).Visible = false;
                }

                if (((TextBox)c1).Text != "")
                {
                    flag = 1;
                }
                else
                {
                    flag = 0;
                }
            }
        }
    }

Upvotes: 0

matzone
matzone

Reputation: 5719

Use can use Keydown event in your first textbox

Upvotes: 0

Related Questions