johanneslamers/app.js

## app.js
jQuery(document).ready( function() {

    jQuery('#form').show();
    jQuery('#output').hide();

    jQuery('#get-detail').click( function() {

        var valid = true;

        jQuery('input[type="text"], input[type="password"], input[type="email"]').each( function() {

            var attr = jQuery(this).attr('required');

            // pastikan attribute 'required' wujud
            if (typeof attr !== typeof undefined && attr !== false) {

                // check isi input, pastikan tidak kosong
                if (jQuery(this).val() === '') {

                    valid = false;
                }
            }

            if ( ! isValidEmail( jQuery(this).val() ) ) {
                valid = false;
            }

        });


        if ( valid === true ) {
            getDetails();
        }

        return;
    });

    jQuery('#show-form').click( function() {

        jQuery('#output').slideUp('fast', function() {

            jQuery('input[type="text"], input[type="password"]').each( function() {
                jQuery(this).val('');
            });

            jQuery('#form').fadeIn('fast');
        });
    });
});


function getDetails()
{
    var formData = [];

    jQuery('input[type="text"], input[type="password"]').each( function() {
        formData.push( jQuery(this).attr('name') + '=' + jQuery(this).val() );
    });

    jQuery.ajax({
        url: 'http://mof.demosite.my/detail.php',
        data: formData.join('&'),
        type: 'get',
        dataType: 'jsonp',
        success: function( data ) {
            jQuery('#span-name').text( data.name );
            jQuery('#span-designation').text( data.designation );
            jQuery('#span-department').text( data.department );
            jQuery('#span-organisation').text( data.organisation );
        }

    });

    jQuery('#output').slideDown('fast', function() {
        jQuery('#form').slideUp('fast');
    });
}


function isValidEmail( email ) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test( email );
}

## index.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/libs/jquery/jquery.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <h1>My Details</h1>

        <div id="form">
            <form>
                <p><input type="text" name="name" id="name" placeholder="Enter your name" required></p>
                <p><input type="email" name="email" id="email" placeholder="Enter your email" required></p>
                <p><input type="text" name="designation" id="designation" placeholder="Enter your designation"></p>
                <p><input type="text" name="department" id="department" placeholder="Enter your department"></p>
                <p><input type="text" name="organisation" id="organisation" placeholder="Enter your organisation"></p>

                <button id="get-detail" type="submit">Get My Detail</button>
            </form>
        </div>

        <div id="output">
            <p>Nama: <span id="span-name"></span></p>
            <p>Jawatan: <span id="span-designation"></span></p>
            <p>Bahagian: <span id="span-department"></span></p>
            <p>Organisasi: <span id="span-organisation"></span></p>

            <button id="show-form">New Detail</button>
        </div>

    </body>
</html>
	jQuery(document).ready( function() {

	jQuery('#form').show();
	jQuery('#output').hide();

	jQuery('#get-detail').click( function() {

	var valid = true;

	jQuery('input[type="text"], input[type="password"], input[type="email"]').each( function() {

	var attr = jQuery(this).attr('required');

	// pastikan attribute 'required' wujud
	if (typeof attr !== typeof undefined && attr !== false) {

	// check isi input, pastikan tidak kosong
	if (jQuery(this).val() === '') {

	valid = false;
	}
	}

	if ( ! isValidEmail( jQuery(this).val() ) ) {
	valid = false;
	}

	});


	if ( valid === true ) {
	getDetails();
	}

	return;
	});

	jQuery('#show-form').click( function() {

	jQuery('#output').slideUp('fast', function() {

	jQuery('input[type="text"], input[type="password"]').each( function() {
	jQuery(this).val('');
	});

	jQuery('#form').fadeIn('fast');
	});
	});
	});


	function getDetails()
	{
	var formData = [];

	jQuery('input[type="text"], input[type="password"]').each( function() {
	formData.push( jQuery(this).attr('name') + '=' + jQuery(this).val() );
	});

	jQuery.ajax({
	url: 'http://mof.demosite.my/detail.php',
	data: formData.join('&'),
	type: 'get',
	dataType: 'jsonp',
	success: function( data ) {
	jQuery('#span-name').text( data.name );
	jQuery('#span-designation').text( data.designation );
	jQuery('#span-department').text( data.department );
	jQuery('#span-organisation').text( data.organisation );
	}

	});

	jQuery('#output').slideDown('fast', function() {
	jQuery('#form').slideUp('fast');
	});
	}


	function isValidEmail( email ) {
	var pattern = new RegExp(/^((([a-z]\|\d\|[!#\$%&'\\+\-\/=\?\^_`{\\|}~]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]\|\d\|[!#\$%&'\\+\-\/=\?\^_`{\\|}~]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+))\|((\x22)((((\x20\|\x09)(\x0d\x0a))?(\x20\|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]\|\x21\|[\x23-\x5b]\|[\x5d-\x7e]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))(((\x20\|\x09)(\x0d\x0a))?(\x20\|\x09)+)?(\x22)))@((([a-z]\|\d\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\|(([a-z]\|\d\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|\d\|-\|\.\|_\|~\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|\d\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\|(([a-z]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|\d\|-\|\.\|_\|~\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]\|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
	return pattern.test( email );
	}
	<!DOCTYPE html>
	<!--
	To change this license header, choose License Headers in Project Properties.
	To change this template file, choose Tools \| Templates
	and open the template in the editor.
	-->
	<html>
	<head>
	<title>TODO supply a title</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="js/libs/jquery/jquery.js"></script>
	<script src="js/app.js"></script>
	</head>
	<body>
	<h1>My Details</h1>

	<div id="form">
	<form>
	<p><input type="text" name="name" id="name" placeholder="Enter your name" required></p>
	<p><input type="email" name="email" id="email" placeholder="Enter your email" required></p>
	<p><input type="text" name="designation" id="designation" placeholder="Enter your designation"></p>
	<p><input type="text" name="department" id="department" placeholder="Enter your department"></p>
	<p><input type="text" name="organisation" id="organisation" placeholder="Enter your organisation"></p>

	<button id="get-detail" type="submit">Get My Detail</button>
	</form>
	</div>

	<div id="output">
	<p>Nama: <span id="span-name"></span></p>
	<p>Jawatan: <span id="span-designation"></span></p>
	<p>Bahagian: <span id="span-department"></span></p>
	<p>Organisasi: <span id="span-organisation"></span></p>

	<button id="show-form">New Detail</button>
	</div>

	</body>
	</html>