Sign up form Code in PHP, jQuery and CSS3

CSS

<link rel="stylesheet" type="text/css" href="demo.css" />

JQUERY

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Javascript

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

Birthday html

<div class="input-container">
    <select name="month"><option value="0">Month:</option><?=generate_options(1,12,'callback_month')?></select>
    <select name="day"><option value="0">Day:</option><?=generate_options(1,31)?></select>
    <select name="year"><option value="0">Year:</option><?=generate_options(date('Y'),1900)?></select>
    </div>

Birthday PHP function

function generate_options($from,$to,$callback=false)
{
    $reverse=false;
    
    if($from>$to)
    {
        $tmp=$from;
        $from=$to;
        $to=$tmp;
        
        $reverse=true;
    }
    
    $return_string=array();
    for($i=$from;$i<=$to;$i++)
    {
        $return_string[]='
        '.($callback?$callback($i):$i).'
        ';
    }
    
    if($reverse)
    {
        $return_string=array_reverse($return_string);
    }
    
    
    return join('',$return_string);
}
function callback_month($month)
{
    return date('M',mktime(0,0,0,$month,1));
}

join(value,array) join function is use for join all array value to one, and separated by “value”
array_reverse() — Return an array with elements in reverse order

---

The last two styles are #loading and #error, which select the respective elements by their ID’s and hide them with visibility:hidden by default. We will only show them with jQuery when it is appropriate.

#loading{
    left:10px;
    position:relative;
    top:3px;
    visibility:hidden;
}
#error{
    background-color:#ffebe8;
    border:1px solid #dd3c10;
    padding:7px 3px;
    text-align:center;
    margin-top:10px;
    visibility:hidden;
}

javascript function for loading and error
atc=1 means visible
atc=0 means hide

function hideshow(el,act)
{
    if(act) $('#'+el).css('visibility','visible');
    else $('#'+el).css('visibility','hidden');
}
function error(act,txt)
{
    hideshow('error',act);
    if(txt) $('#error').html(txt);
}

JQUERY
e.preventDefault() cancel the event.
when submit happened, Jquery will run function register();

$(document).ready(function(){
    
    $('#regForm').submit(function(e) {
        register();
        e.preventDefault();
        
    });
    
});

The first lines of code in $(document).ready get executed after the page has loaded and bind our register() function with the form’s onsubmit event utilizing the preventDefault() method in order to stop the form from being submitted.

---

AJAX

The .serialize() method creates a text string in standard URL-encoded notation. It operates on a jQuery object representing a set of form elements. The form elements can be of several types.
The .serialize() method can act on a jQuery object that has selected individual form elements, such as input, textarea, and select. However, it is typically easier to select the form tag itself for serialization.
json file format:
{
“one”: “Singular sensation”,
“two”: “Beady little eyes”,
“three”: “Little birds pitch by my doorstep”
}

function register()
{
    hideshow('loading',1);
    error(0);
    
    $.ajax({
        type: "POST",
        url: "submit.php",
        data: $('#regForm').serialize(),
        dataType: "json",
        success: function(msg){
            
            if(parseInt(msg.status)==1)
            {
                window.location=msg.txt;
            }
            else if(parseInt(msg.status)==0)
            {
                error(1,msg.txt);
            }
            
            hideshow('loading',0);
        }
    });
}

And here is the simplicity of the $.ajax method – in a few lines of code we send to submit.php by POST all of regForm‘s fields (regForm is the ID of our registration form). We receive a response in JSON format (for more on that later) which gets processed by the function given in success. In this example we process the returned object and decide whether to show an error, or redirect to a registered-user-only page.