JS Form Functions

<?php

ob_start();

if( $_POST )
{
    ob_clean(); 

    echo '<pre>';
    print_r( $_POST );
    echo '</pre>';

    exit(); 
}
?>

<script>

function array2obj(arr){
    var oret = null;

    var len = arr.length;
    if( len ){
        oret = {};
        for(var i=0; i<len; i++){

            oret[arr[i]]=i;
        }
    }
    return oret;
}

function formData2Querysreting(frm,option)
{
    var accept = option['accept'] || null;
    var reject = option['reject'] || null;

    var additional = option['additional'] || null;
    
    var sret = '';

    var ele, i;

    if( reject ){
        reject = array2obj( reject.split(',') );

    }
    if( accept ){
        accept = array2obj( accept.split(',') );
    }

    
    for (i = 0; i < frm.elements.length; i++) {
        ele = frm.elements[i];

        var ename = ele['name']; 

        if( '' == ename ){

            continue;
        }
        
        if( ele['disabled'] ){
            continue;

        }
        
        if( accept ){
            if( !(ename in accept) ){
                continue;

            }
        }else if( reject ){
            if( ename in reject){

                continue;
            }
        }
        
        
        switch (ele.type.toLowerCase()) {

        // Text fields, hidden form elements
        case 'text':
        case 'hidden':

        case 'password':
        case 'textarea':
        case 'select-one':

            sret += ename + '=' + encodeURIComponent(ele.value) + '&'
            break;
            

        // Multi-option select
        case 'select-multiple':
            for(var j = 0; j < ele.options.length; j++) {

            var currOpt = ele.options[j];
            if(currOpt.selected) {
                sret += ename + '=' + encodeURIComponent(currOpt.value) + '&';

            }
            }
            break;

        // Radio buttons
        case 'radio':

            if (ele.checked) {
            sret += ename + '=' + encodeURIComponent(ele.value) + '&'

            }
            break;
            
        // Checkboxes
        case 'checkbox':

            if (ele.checked) {
                // Collapse multi-select into comma-separated list
                sret += ename + '=' + encodeURIComponent(ele.value) + '&';

            }
            break;
        }
    }

    if( additional ){

        var tp = (typeof(additional)).toLowerCase();
        if( 'string' == tp ){

            sret += additional + '&';
        }else if( 'object' == tp ){

            for( var k in additional){
                if( 'function' != (typeof(additional[k])).toLowerCase() ){

                    sret += k + '=' + additional[k] + '&';
                }
            }
        }

    }
    
    // Remove trailing separator
    sret = sret.substr(0, sret.length - 1);

    ele = null;
    return sret;
}





window.onload = function (){

    window['dvdebug'] = document.getElementById('dvdebug');
}

function debug( str , append){

    append = append || false;
    if( append ){
        window['dvdebug'].innerHTML = str + '<hr>' + window['dvdebug'].innerHTML;

    }else{
        window['dvdebug'].innerHTML = str;
    }
}

function doajax( frm ){
    var callback_1 = {
        success: function(o){
            debug( o.responseText);

        }
    };

 
    var option =
    {

        accept:document.getElementById('accept_list').value,
        reject:document.getElementById('reject_list').value,

        additional:document.getElementById('additional').value,
        timestamp:true
    }

    var post_data  = formData2Querysreting(frm, option);
    
    post_data +='&ajax=1';
    var uri = 'jsfill.html';

    YAHOO.util.Connect.asyncRequest('POST', uri, callback_1, post_data);
}

</script>
<script type="text/javascript" src="/YAHOO_UTIL_CONNECT.js"> </script>

<!-- <input type="checkbox" id="collapseMulti" ><label for="collapseMulti" >Collapse Multipe </label><br> -->
Accept List<input type='text' id='accept_list' value='' size='100'><br>

Reject List<input type='text' id='reject_list' value='' size='100'><br>
Additional <input type='text' id='additional' value='' size='100'><br>


<br>

<form  method='post' target='iframe1'>
    <input type="hidden" name="hid1" value="hidden 1" />

    <input type="text" name="data" value="text box 1" />
    <input type="checkbox" name="chk1" value="101" />

    <input type="radio" name="rdo1" value="102" />
    <select name="sel1" >

        <option value=''>--Select--</option>
        <option value='YES'>Yes</option>
        <option value='NO'>No</option>

    </select>

    <select name="sel2[]" multiple size="4">
        <option value=''>--None--</option>

        <option value='C01'>Cat_01</option>
        <option value='C02'>Cat_02</option>
        <option value='C03'>Cat_03</option>

    </select>

    <input type="text" name="data[]" value="000" />

    <input type="text" name="data[]" value="111" />

<select name="sel3[]" multiple size="4">

    <option value=''>--None--</option>
    <option value='C01'>Cat_01</option>
    <option value='C02'>Cat_02</option>

    <option value='C03'>Cat_03</option>
</select>
<select name="sel3[]" multiple size="4">

    <option value=''>--None--</option>
    <option value='C101'>Cat_01</option>
    <option value='C102'>Cat_02</option>

    <option value='C103'>Cat_03</option>
</select>

<input type='submit' value="Submit" />

<input type="button" value="Ajax" onclick="javascript:doajax(this.form)" />
<input type="reset" value="Reset" />

</form>

<table><tr>
<td valign='top' ><iframe id='iframe1' name='iframe1' height="500"></iframe></td>

<td valign='top' id='dvdebug'>&nbsp;</td>
</tr></table>

Javascript Cross browser Fading Effect ( JS OOPs )

<html><head>
<script type="text/javascript">

//
//Start fading Object 
//

/**
*Fading Effect 
*
* ops is optional can have keys like def
* id: elements id 

* min: minimum opecity
* max: maximum opecity
* duration: in miliseconds to transform opecity from min <-> max
* remove_onhide: if true set dislay:none else selt visibility:hidden on hide
* onshow: callback function triggred on before showing_start
* onhide: callback function triggred on after hiding_end
*/

var Fading = function ( id , ops  ){
    var def = {min:0, max:100, duration:500, remove_onhide:true, onshow:null, onhide:null };

    
    ops = ops || {};

    this.id = id; 
    this.obj  = document.getElementById(id);
    this.css = this.obj.style;

    this.css_visible_atr = ( 'div' == this.obj.tagName.toLowerCase() ) ? 'table' : ''; //table for div under IE

    this.hiding  = true;
    
    for( var k in def )

    {
        this[k] = ops[k] || def[k];
    }
    this.cur = this.max;
}

/**
* display object with Fading
*/
Fading.prototype.show = function (){
    if( this.cur != this.max ){

        this.cur = this.min;
        this.hiding = true;
        this._opacity( this.min, this.max, this.duration );

    }
}

/**
* hide object with Fading
*/
Fading.prototype.hide = function () {

    if( this.cur != this.min ){
        this.hiding = false;
        this.cur = this.max;

        this._opacity( this.max, this.min, this.duration );
    }
}

/**

*imidiate hide object without trigering callback functions
*/
Fading.prototype.hideSilent = function (){
    
    this.cur = this.min;

    this._changeOpac();
    this._showHide(false);
    this.hiding = false;
}

/**
*imidiate hide object without trigering callback functions
*/
Fading.prototype.showSilent = function (){

    this.cur = this.max;

    this._changeOpac();
    this._showHide(true);
    this.hiding = true;
}


Fading.prototype._changeOpac = function ( ) {
    //change the opacity for different browsers
    //console.debug( this.cur  );
    var opecity_per = this.cur / 100;

    this.css['opacity'] = opecity_per;
    this.css['MozOpacity'] = opecity_per;
    this.css['KhtmlOpacity'] = opecity_per;

    this.css['filter'] = "alpha(opacity=" + this.cur + ")";
    
    this.cur =( this.hiding ) ?  Math.min( this.max, ++this.cur) : Math.max(this.min, --this.cur);

}

Fading.prototype._showHide = function (show_flag){
    if( this.remove_onhide ){
        this.css['display'] = ( show_flag ) ? this.css_visible_atr : 'none';

    }else{
        this.css['visibility'] = ( show_flag ) ? 'visible' : 'hidden';

    }
}

Fading.prototype._opacity = function ( opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);

    var timer = 0, i=0;
    var _self = this;
    //determine the direction for the blending, if start and end are the same nothing happens

    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout( function(){ _self._changeOpac( );  }, (timer * speed) );

            timer++;
        }
        setTimeout(function(){
                       _self._showHide(false);

                        if( 'function' == typeof(_self.onhide) ){
                            _self.onhide.call(_self.obj);
                        }

                    }, (timer * speed) );
                    
    } else if(opacStart < opacEnd) {
        _self._showHide(true);

        if( 'function' == typeof(_self.onshow) ){
            _self.onshow.call(_self.obj);
        }

        for(i = opacStart; i <= opacEnd; i++){
            setTimeout( function(){ _self._changeOpac( );  }, (timer * speed) );
            timer++;
        }

    }
}
//
// END OF FADDING OBJECT
//

window.onload = function (){

    window.oFoo = new Fading('foo');
    window.oBar = new Fading('bar', {duration:2000, onshow:on_bar_showing, onhide:on_bar_hiding});

}

function on_bar_showing(){
    this.innerHTML += '<br> on_bar_showing()' ;

}
function on_bar_hiding(){
    this.innerHTML  += '<br> on_bar_hiding()' ;
}

</script>
<style>
#foo {  display:table; background-color:#450712; border:1px solid #121212; width:100px; height:100px; color:#FFFFFF;}

#bar {  display:table; background-color:#895623; border:1px solid #659898; width:100px; height:100px; color:#FFFFFF;}

</style>
</head>

<body>
<input type="button" onclick="oFoo.show();" value="show Foo" />

<input type="button" onclick="oFoo.hide()" value="hide Foo" />


<br>

<input type="button" onclick="oBar.show();" value="show Bar" />
<input type="button" onclick="oBar.hide()" value="hide Bar" />

<input type="button" onclick="oBar.showSilent();" value="show Bar Silently" />
<input type="button" onclick="oBar.hideSilent()" value="hide Bar Silently" />


<div id="foo" >Foo</div>
<div id="bar" >Bar</div>

</body>
</html>