Showing Hidden Textboxes As They Are Filled

I have a page of thirty text boxes with Id's roughly correlating to _Q0/_Q1/_Q2/_Q3 etc. I'm trying to design a JS code that will hide all but the first box, and then will reveal t

Solution 1:

This does what you want:

$(function () {
    var $boxes = $("[id^=_Q]").hide().keyup(function(){   //Hide all, then attach keyupvar i = $(this).index();  //Index of the box being typed
       $boxes.eq(i+1).show();    //Get and show next textbox
    });
    $boxes.first().show();  //Show next textbox
});

Btw $("[id^=_Q]") selects all elements whose id starts with _Q

Working OK here: http://jsfiddle.net/edgarinvillegas/8b7pH/7/

Cheers

Solution 2:

My suggestion is that you assign a function to the onchange event of the text boxes, and give each one an id as follows:

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>functiontextChange(){
    // Get the number of the caller's idvar inputNumber = $(event.target).attr('id').split("txt")[1];

    // Select the next input by increasing the inputNumber and set its "display" attr to block
    $("#txt" + ++inputNumber).css("display", "block");
}
</script><from><inputtype="text"id="txt1"onchange="textChange()" /><inputtype="text"style="display:none;"id="txt2"onchange="textChange()" /><inputtype="text"style="display:none;"id="txt3"onchange="textChange()" /><inputtype="text"style="display:none;"id="txt4"onchange="textChange()" /><inputtype="text"style="display:none;"id="txt5"onchange="textChange()" /></form>

A working example can be found here: http://jsfiddle.net/WChd8/

Solution 3:

Thanks for the fiddle. I've updated it to a working one.

Here's the code:

$(function () {
    for(var i=1;i<=5;i++){
    var t = i;
        document.getElementById("_Q" + t).style.visibility = 'hidden';
    }

    var idNumber = 0;
    document.getElementById("_Q" + idNumber).onkeyup = function(){console.log("hi"); returnboxAdder();};

    functionboxAdder(){
        console.log("ho");
        idNumber = idNumber+1;
        document.getElementById("_Q" + idNumber).style.visibility = 'visible';
        document.getElementById("_Q" + idNumber).onkeyup = function(){returnboxAdder();};
    }


});

The significant change was the syntax for onkeyup: element.onkeyup = function(). Other than that, there were a bunch of missing semicolons that didn't matter. I added console.logs that can obviously be removed.

EDIT

Edgar found a valid bug, so I put in a fix. Basically, remove the onkeyup event as soon as it's called:

document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; returnboxAdder();};

functionboxAdder(){
    idNumber = idNumber+1;
    document.getElementById("_Q" + idNumber).style.visibility = 'visible';
    document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; returnboxAdder();};
}

Note the new this.onkeyup = null; in two places.

Solution 4:

This is a javascript only approach, based on what you already had, that also checks for the content written in the input. If is blank, it hides the next one again.

for(var i=0;i<30;i++){
    var element = document.getElementById("_Q" + i);
    if(element != null)
    {
        element.onkeyup = function() {
            var next = parseInt(this.id.replace("_Q", "")) + 1;
            document.getElementById("_Q" + next).style.visibility = (this.value != "" ? "visible" : "hidden");
        }
    }
    if(i>0)
        element.style.visibility = 'hidden';
};