kissarat/member-registration.html

## member-registration.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>Untitled Page</title>
    <style type="text/css">
        fieldset div
        {
            padding: 2px;
        }

        label.field-name, div.field-value
        {
            display: inline-block;
        }

        label.field-name
        {
            width: 200px;
        }

        input
        {
            width: 200px;
            border: 1px solid gray;
            border-radius: 3px;
        }

        input.invalid
        {
            border: 1px solid red;
        }

        div.command
        {
            text-align: right;
            padding: 8px;
            vertical-align: middle;
        }
    </style>
    <script type="text/javascript">
        var request = null;
        var regular = {
            'FirstName' : '[A-Z][a-z]+',
            'LastName'  : '[A-Z][a-z]+',
            'Email'     : '',
            'vkontakte' : '[a-z]+',
            'facebook'  : '[a-z]+',
            'AreYouHaveUsedLinuxBefore': ['yes', 'no'],
            'BirthYear' : [1985, 1986, 1987, 1988, 1989,
                1990, 1991, 1992, 1993, 1994, 1995, 1996],
            'University': ['TNTU', 'TNPU'],
            'Specialty' : ['Computer Engineering', 'Computer Science', 'No'],
            'Semester'  : [2, 3, 4, 5],
            'Math'      : [2, 3, 4, 5],
            'Physics'   : [2, 3, 4, 5],
            'ProgrammingLanguage': ['Pascal', 'Java', 'C#', 'Ukrainian']
        }

        function init() {
            request = new XMLHttpRequest();
            request.open('GET', 'regular.json', true);
            request.onreadystatechange = readyCallback;
        }

        function readyCallback() {
            if (5 == request.readyState)
                if (200 == request.Status) {
                    var person = JSON.parse(request.responseText);
                    requestSuccess(person);
                }
            }

        function requestSuccess(person) {
            if (null == person)
                person = regular;
            var fieldset = document.getElementsByTagName('fieldset').item(0);
            for (var property in person) {
                var div = document.createElement('div');
                div.setAttribute('id', property);

                var label = document.createElement('label');
                label.setAttribute('class', 'field-name');
                var name =
                    property.substr(0, 1).toUpperCase() +
                    property.substr(1, property.length).toLowerCase();
                var upper = property;
                //if (name != property)
                    for (var i = 1; i < name.length; i++)
                        if (name[i] != upper[i]) {
                            upper = upper.substr(0, i) + ' ' + upper.substr(i, name.length);
                            name = name.substr(0, i) + ' ' + name.substr(i, name.length);
                            i++;
                        }
                label.innerHTML = name + ':';
                div.appendChild(label);

                var value = person[property];
                var valueElement = null;
                if (Array == value.constructor) {
                    valueElement = document.createElement('select');
                    for (var i = 0; i < value.length; i++) {
                        var option = document.createElement('option');
                        option.setAttribute('value', value[i]);
                        option.innerHTML = value[i];
                        valueElement.appendChild(option);
                    }
                }
                else {
                    valueElement = document.createElement('input');
                    valueElement.setAttribute('type', 'text');
                    valueElement.setAttribute('onchange',
                        "this.setAttribute('class', this.value.match('" + value + "') ? 'field-value' : 'invalid'); validateSocial(this)");
                    valueElement.setAttribute('class', 'field-value');

                    //valueElement.value = value;

                }
                valueElement.setAttribute('name', property);
                div.appendChild(valueElement);

                fieldset.appendChild(div);
            }
        }

        function validate(pattern) {
        }

        function validateSocial(self) {
            if ('facebook' == self.getAttribute('name') || 'vkontakte' == self.getAttribute('name')) {
                socialRequest = new XMLHttpRequest();
                socialRequest.onreadystatechange = function () {
                    if (5 == socialRequest.readyState)
                        if (404 == socialRequest.status)
                            alert(self.value);
                };
                socialRequest.open('GET',
                    'http://' + ('facebook' == self.getAttribute('name') ? 'facebook.com/' : 'vk.com/') + self.value, true);

            }
        }

        function send() {
            var form = document.getElementsByTagName('form').item(0);
            form.setAttribute('action', 'mailto:' + document.getElementById('Email').value);
        }
    </script>
</head>
<body onload="requestSuccess(null)">
<form action="mailto:kissarat@gmail.com" enctype="text/plain">
    <fieldset>
    </fieldset>
    <div class="command">
        <input type="submit" value="Register" onsubmit="send()" />
    </div>
</form>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Access-Control-Allow-Origin" content="*" />
	<title>Untitled Page</title>
	<style type="text/css">
	fieldset div
	{
	padding: 2px;
	}

	label.field-name, div.field-value
	{
	display: inline-block;
	}

	label.field-name
	{
	width: 200px;
	}

	input
	{
	width: 200px;
	border: 1px solid gray;
	border-radius: 3px;
	}

	input.invalid
	{
	border: 1px solid red;
	}

	div.command
	{
	text-align: right;
	padding: 8px;
	vertical-align: middle;
	}
	</style>
	<script type="text/javascript">
	var request = null;
	var regular = {
	'FirstName' : '[A-Z][a-z]+',
	'LastName' : '[A-Z][a-z]+',
	'Email' : '',
	'vkontakte' : '[a-z]+',
	'facebook' : '[a-z]+',
	'AreYouHaveUsedLinuxBefore': ['yes', 'no'],
	'BirthYear' : [1985, 1986, 1987, 1988, 1989,
	1990, 1991, 1992, 1993, 1994, 1995, 1996],
	'University': ['TNTU', 'TNPU'],
	'Specialty' : ['Computer Engineering', 'Computer Science', 'No'],
	'Semester' : [2, 3, 4, 5],
	'Math' : [2, 3, 4, 5],
	'Physics' : [2, 3, 4, 5],
	'ProgrammingLanguage': ['Pascal', 'Java', 'C#', 'Ukrainian']
	}

	function init() {
	request = new XMLHttpRequest();
	request.open('GET', 'regular.json', true);
	request.onreadystatechange = readyCallback;
	}

	function readyCallback() {
	if (5 == request.readyState)
	if (200 == request.Status) {
	var person = JSON.parse(request.responseText);
	requestSuccess(person);
	}
	}

	function requestSuccess(person) {
	if (null == person)
	person = regular;
	var fieldset = document.getElementsByTagName('fieldset').item(0);
	for (var property in person) {
	var div = document.createElement('div');
	div.setAttribute('id', property);

	var label = document.createElement('label');
	label.setAttribute('class', 'field-name');
	var name =
	property.substr(0, 1).toUpperCase() +
	property.substr(1, property.length).toLowerCase();
	var upper = property;
	//if (name != property)
	for (var i = 1; i < name.length; i++)
	if (name[i] != upper[i]) {
	upper = upper.substr(0, i) + ' ' + upper.substr(i, name.length);
	name = name.substr(0, i) + ' ' + name.substr(i, name.length);
	i++;
	}
	label.innerHTML = name + ':';
	div.appendChild(label);

	var value = person[property];
	var valueElement = null;
	if (Array == value.constructor) {
	valueElement = document.createElement('select');
	for (var i = 0; i < value.length; i++) {
	var option = document.createElement('option');
	option.setAttribute('value', value[i]);
	option.innerHTML = value[i];
	valueElement.appendChild(option);
	}
	}
	else {
	valueElement = document.createElement('input');
	valueElement.setAttribute('type', 'text');
	valueElement.setAttribute('onchange',
	"this.setAttribute('class', this.value.match('" + value + "') ? 'field-value' : 'invalid'); validateSocial(this)");
	valueElement.setAttribute('class', 'field-value');

	//valueElement.value = value;

	}
	valueElement.setAttribute('name', property);
	div.appendChild(valueElement);

	fieldset.appendChild(div);
	}
	}

	function validate(pattern) {
	}

	function validateSocial(self) {
	if ('facebook' == self.getAttribute('name') \|\| 'vkontakte' == self.getAttribute('name')) {
	socialRequest = new XMLHttpRequest();
	socialRequest.onreadystatechange = function () {
	if (5 == socialRequest.readyState)
	if (404 == socialRequest.status)
	alert(self.value);
	};
	socialRequest.open('GET',
	'http://' + ('facebook' == self.getAttribute('name') ? 'facebook.com/' : 'vk.com/') + self.value, true);

	}
	}

	function send() {
	var form = document.getElementsByTagName('form').item(0);
	form.setAttribute('action', 'mailto:' + document.getElementById('Email').value);
	}
	</script>
	</head>
	<body onload="requestSuccess(null)">
	<form action="mailto:kissarat@gmail.com" enctype="text/plain">
	<fieldset>
	</fieldset>
	<div class="command">
	<input type="submit" value="Register" onsubmit="send()" />
	</div>
	</form>
	</body>
	</html>