The Files

• table_form.html  ::  This is our main HTML file.  It contains a HTML Table and a simple Form.
• table_form.php :: This is the php file which will process the form and return results back to our HTML page
• table_form.js :: This is the Javascript file which will handle submitting data to php and handle the response
• table_form.css :: basic css file to add styling

View a Demo

Download the full Source

I’ve tried to add detailed comments to the source code but if you have any questions just post them in the comments.

The Bare Bones : Row Injection

For those who are only interested in the table row injection here is a function which will get the job done and is crossbrowser. If you find otherwise let me know. The key here is instead of creating individual elements for tr and td and injecting them into the table, you create a full table element with a single row and inject that into your table.

var inject_row = function( table, data )
{
    var str = '';
    data.each(function(item, index){
        str += '<td>'+item+'</td>';
    });
    var tr = new Element('div', {
        html: '<table><tbody><tr>' + str + '</tr></tbody></table>'
    }).getElement('tr');
    tr.inject( table );
}

Example

Show Alert then Fade

Show Alert

To use Hot Flash Alert in your web site you’ll need to complete a few simple steps.

Step 1 : Include the required Javascript and CSS files in your web site header.

The Hot Flash Alert requires Mootools.js, hot_flash.js, and hot_flash.css .

Step 2 : Add the Alert Box DIV to your theme

The Hot Flash Alert is actually a div which sits in your web page until it is called.  It’s probably best to stick the div at the bottom of your web page so that it displays on top of any other absolutely positioned elements.

<div id="alert_box">
   <div id="alert_head">
      <a id="alert_box_x" href="#">close</a>
   </div>
   <div id="alert_box_message"></div>
</div>

You can customize the DIV anyway you want but it will require all four elements ‘alert_box’, ‘alert_head’, ‘alert_box_x’ and ‘alert_box_message’. The styling of these elements is handled by the hot_flash.css file.

Step 3 :  Call the hot_flash() javascript method

Once all the pieces are in place you can pop open the Hot Flash Alert by calling the hot_flash() javacript method.

 // text = the message that will be displayed
 // duration (optional) milliseconds to fade out the alert
 hot_flash( text, duration );

Here are some examples.

  // simple alert that fades out on it's own
  // over 2000 milliseconds ( or 2 seconds )
  hot_flash('hello world', 2000 );

  // simple alert with close button
  hot_flash('goodbye world');

It’s as simple as that.