Textbox Invisible

[IrishKnights]

I am making a order form, want say 50 textboxes, but 45 of them invisible, when they tab to the end it must name 1 visible, and each time they go to that 1, another must become visible.

 

How do I make then invisible and visible

[obsidian]

Well, first of all, to hide them, you simply would attach a class with the CSS attribute of "display: none" ... then, when there is a focus given to the last textarea, you can display the next one in line. Something like this should get you in the right direction:

 

First, create our textboxes and generate helpful IDs to use:

<?php
for ($i = 1; $i <= 50; $i++)
{
  echo "<textarea name=\"mybox[]\" cols=\"60\" rows=\"8\" id=\"textbox-{$i}\" onfocus=\"showNextBox({$i});\"";
  echo ($i > 5) ? ' class="hidden"' : ' class="shown"';
  echo "></textarea>\n";
}
?>

 

Then, the supporting CSS to hide and show the boxes:

.hidden {
  display: none;
}

.shown {
  display: block;
}

 

Finally, we write our JavaScript showNextBox() function to support the code above:

function showNextBox(i)
{
  var id = 'textbox-' + (i + 1); // Next incremental box
  var el = document.getElementById(id);
  el.className = 'shown';
}

 

Hope this helps.