Showing Hidden Textboxes As They Are Filled
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.log
s 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';
};
Post a Comment for "Showing Hidden Textboxes As They Are Filled"