Bettering the input boxes

I was playing around with JS again and was looking at my old messagebox code... which I deemed crap.

So I just took it from the start and made a completely new class for showing boxes which can be used for asking for user input or just displaying info like alert() and such.

function GenericBox(cssclass, titletxt, messagetxt, showInput, showButton, validatorFunc)
{
 //this function is called when the user presses the OK button
 var validator = validatorFunc;

 //Save a reference to this object for later
 var self = this;
 
 //create the div for the messagebox
 //the box is just defined in CSS and the CSS class it uses
 //is defined in the parameter cssclass
 var element = document.createElement('div');
 element.className = cssclass;
 

 //create the title
 var title = document.createElement('h1');
 title.innerHTML = titletxt;
 element.appendChild(title);
 
 //create the message
 var message = document.createElement('p');
 message.innerHTML = messagetxt;
 element.appendChild(message);
 
 //create the input box
 var input = document.createElement('input');
 input.type = 'text';
 input.onkeydown = function()
 {
  if(!e) var e = window.event;
 
  //if the user presses enter when in the input,
  //call the validator function with a reference to
  //this object and the value of the input field
  if(e.keyCode == 13)
   validator(self,this.value);    
 }

 //hide input if user doesn't want to show it
 if(!showInput)
  input.style.display = 'none';
 
 element.appendChild(input);
 
 element.appendChild(document.createElement('br'));
 
 //Create the OK button
 var button = document.createElement('input');
 button.type = 'button';
 button.value = 'OK';
 button.onclick = function()
 {
  //when the user clicks this we send the data to the func
  validator(self,this.previousSibling.previousSibling.value);
 }

 //again, hide if not wanted
 if(!showButton)
  button.style.display = 'none';
 
 element.appendChild(button);
 
 var visible = false;
 
 //used for showing the box
 this.Show = function()
 {
  if(!visible)
  {
   document.appendChild(element);
   visible = true;
  }
 }
 
 //used for hiding the box
 this.Hide = function()
 {
  if(visible)
  {
   document.removeChild(element)
   visible = false; 
  }
 }
 
 //use this to change the message
 this.SetText = function(newtext)
 {
  message.innerHTML = newtext; 
 }
 
 //this can hide the inputs in the box
 this.HideInputs = function()
 {
  input.style.display = 'none';
  button.style.display = 'none';
 }
}

The basic use is pretty simple again...

function ShowBox()
{
 var box = new GenericBox('genericbox','Example','This is an example box',false,true,HideMe);
 box.Show();
}

function HideMe(obj,input)
{
 obj.Hide();
}

When calling ShowBox, the user would get a box with title "Example" and text "This is an example box" which has a button OK. When the OK button is pressed, HideMe function gets called. The HideMe function just uses the reference to the object and hides it with the Hide() function.

Pretty simple huh?

the CSS class for the box should at least contain the details on the box like position: absolute and it's left and top position and width and height and such.


If the above code would've set the showInput to true, the input parameter in the HideMe function would contain the data in the input field.


The SetText and HideInputs functions are there so you can re-use the box a bit... say, you're sending the data from the input box to a web page so you could do something like first use HideInputs to hide the inputs and then SetText and change the message to something like "Working..." so the user knows you're processing the data.