当上一个文本框包含文本时，如何使文本框可见

Question

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?

Answer 1

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.

Answer 2

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;
        }

Answer 3

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"

Answer 4

使用可以在第一个文本框中使用Keydown事件

Answer 5

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; } } } } 

Answer 6

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>