mdawaffe/index.php

## index.php
<?php

if ( $_POST ) {
	var_dump( $_POST, $_FILES );
	exit;
}

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FormData + postMessage()</title>
<script>
var theForm;

function receiveMessage( event ) {
	var formData = new FormData();
	var xhr = new XMLHttpRequest();

	function appendIt( name, value ) {
		if ( value instanceof File ) {
			formData.append( name, value, value.name || value.fileName || "" );
		} else {
			formData.append( name, value );
		}
	}

	Object.keys( event.data ).forEach( function( name ) {
		var value = event.data[name];

		if ( Array.isArray( value ) ) {
			value.forEach( function( value ) {
				appendIt( name, value );
			} );
		} else {
			appendIt( name, value );
		}
	} );

	xhr.open( theForm.method, theForm.action );
	xhr.send( formData );
}

/* http://www.w3.org/TR/html5/forms.html#constructing-the-form-data-set
 *
 * Doesn't properly handle:
 *   <input type="image" />
 *   <keygen>
 *   Buttons
 *   <object>
 *   dirname attributes
 *
 * May not handle line endings correctly.
 */
function submit( event ) {
	event.preventDefault();

	var data = {};
	var length = theForm.elements.length;
	var i, j, input, name, value, datalist, options;
	for ( i = 0; i < length; i++ ) {
		input = theForm.elements[i];
		value = false;

		name = input.name;
		if ( ! name ) {
			continue;
		}

		if ( input.disabled ) {
			continue;
		}

		if ( 'OBJECT' === input.tagName ) {
			continue;
		}

		datalist = false;
		element = input;
		while ( document !== element ) {
			element = element.parentNode;
			if ( 'DATALIST' === element.tagName ) {
				datalist = true;
				break;
			}
		}

		if ( datalist ) {
			continue;
		}

		if ( 'SELECT' === input.tagName ) {
			value = [];
			options = input.getElementsByTagName( 'option' );
			for ( j = 0; j < options.length; j++ ) {
				if ( ! options[j].selected ) {
					continue;
				}

				if ( options[j].disabled ) {
					continue;
				}

				if ( options[j].value ) {
					value.push( options[j].value );
				}
			}

			if ( input.multiple ) {
				data[name] = value;
			} else if ( value.length ) {
				data[name] = value[0];
			}

			continue;
		}

		switch ( input.type ) {
		case 'image' :
			value = false;
			break;
		case 'file' :
			if ( input.multiple ) {
				value = [];
				for ( j = 0; j < input.files.length; j++ ) {
					value.push( input.files[j] );
				}
			} else if ( input.files.length ) {
				value = input.files[0];
			} else {
				value = false;
			}
			break;
		case 'checkbox' :
		case 'radio' :
			if ( ! input.checked ) {
				continue;
			}

			value = input.value;
			if ( ! value ) {
				value = "on";
			}
			break;
		case 'submit' : // should only do if submitter
		case 'button' : // should only do if submitter
		default :
			value = input.value;
			break;
		}

		if ( false !== value && undefined !== value ) {
			data[name] = value;
		}
	}

	window.postMessage( data, document.location.origin );
}

function go() {
	window.addEventListener( 'message', receiveMessage, false );
	theForm = document.getElementById( 'form' );
	theForm.addEventListener( 'submit', submit, false );
}
</script>
</head>

<body onload="go()">
<form id="form" action="" method="POST">
	<p>
		<input type="file" name="file" />
	</p>
	<p>
		<input type="hidden" name="hidden" value="super secret" />
		<input type="text" name="text" value="text" />
	</p>
	<p>
		<input type="tel" name="tel" value="+1 800 555 1212" />
	</p>
	<p>
		<input type="url" name="url" value="http://example.com/path/" />
	</p>
	<p>
		<input type="email" name="email" value="address@example.com" />
	</p>
	<p>
		<input type="password" name="password" value="password" />
	</p>
	<p>
		<input type="datetime" name="datetime" value="2014-01-01T00:00+00" />
	</p>
	<p>
		<input type="date" name="date" value="2014-01-01" />
	</p>
	<p>
		<input type="month" name="month" value="2014-01" />
	</p>
	<p>
		<input type="week" name="week" value="2014-W01" />
	</p>
	<p>
		<input type="time" name="time" value="00:00" />
	</p>
	<p>
		<input type="datetime-local" name="datetime-local" value="2014-01-01T00:00" />
	</p>
	<p>
		<input type="number" name="number" value="42" />
	</p>
	<p>
		<input type="range" name="range" value="42" />
	</p>
	<p>
		<input type="color" name="color" value="#f1831e" />
	</p>
	<p>
		<keygen keytype="rsa" name="keygen" value="" />
	</p>
	<p>
		<textarea name="textarea">textarea</textarea>
	</p>
	<p>
		<select name="select">
			<option value="1">one</option>
			<option value="2">two</option>
			<optgroup label="more">
				<option value="3">three</option>
			</optgroup>
		</select>
	</p>
	<p>
		<input type="submit" />
	</p>
</form>
</body>

</html>
	<?php

	if ( $_POST ) {
	var_dump( $_POST, $_FILES );
	exit;
	}

	?>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>FormData + postMessage()</title>
	<script>
	var theForm;

	function receiveMessage( event ) {
	var formData = new FormData();
	var xhr = new XMLHttpRequest();

	function appendIt( name, value ) {
	if ( value instanceof File ) {
	formData.append( name, value, value.name \|\| value.fileName \|\| "" );
	} else {
	formData.append( name, value );
	}
	}

	Object.keys( event.data ).forEach( function( name ) {
	var value = event.data[name];

	if ( Array.isArray( value ) ) {
	value.forEach( function( value ) {
	appendIt( name, value );
	} );
	} else {
	appendIt( name, value );
	}
	} );

	xhr.open( theForm.method, theForm.action );
	xhr.send( formData );
	}

	/* http://www.w3.org/TR/html5/forms.html#constructing-the-form-data-set
	*
	* Doesn't properly handle:
	* <input type="image" />
	* <keygen>
	* Buttons
	* <object>
	* dirname attributes
	*
	* May not handle line endings correctly.
	*/
	function submit( event ) {
	event.preventDefault();

	var data = {};
	var length = theForm.elements.length;
	var i, j, input, name, value, datalist, options;
	for ( i = 0; i < length; i++ ) {
	input = theForm.elements[i];
	value = false;

	name = input.name;
	if ( ! name ) {
	continue;
	}

	if ( input.disabled ) {
	continue;
	}

	if ( 'OBJECT' === input.tagName ) {
	continue;
	}

	datalist = false;
	element = input;
	while ( document !== element ) {
	element = element.parentNode;
	if ( 'DATALIST' === element.tagName ) {
	datalist = true;
	break;
	}
	}

	if ( datalist ) {
	continue;
	}

	if ( 'SELECT' === input.tagName ) {
	value = [];
	options = input.getElementsByTagName( 'option' );
	for ( j = 0; j < options.length; j++ ) {
	if ( ! options[j].selected ) {
	continue;
	}

	if ( options[j].disabled ) {
	continue;
	}

	if ( options[j].value ) {
	value.push( options[j].value );
	}
	}

	if ( input.multiple ) {
	data[name] = value;
	} else if ( value.length ) {
	data[name] = value[0];
	}

	continue;
	}

	switch ( input.type ) {
	case 'image' :
	value = false;
	break;
	case 'file' :
	if ( input.multiple ) {
	value = [];
	for ( j = 0; j < input.files.length; j++ ) {
	value.push( input.files[j] );
	}
	} else if ( input.files.length ) {
	value = input.files[0];
	} else {
	value = false;
	}
	break;
	case 'checkbox' :
	case 'radio' :
	if ( ! input.checked ) {
	continue;
	}

	value = input.value;
	if ( ! value ) {
	value = "on";
	}
	break;
	case 'submit' : // should only do if submitter
	case 'button' : // should only do if submitter
	default :
	value = input.value;
	break;
	}

	if ( false !== value && undefined !== value ) {
	data[name] = value;
	}
	}

	window.postMessage( data, document.location.origin );
	}

	function go() {
	window.addEventListener( 'message', receiveMessage, false );
	theForm = document.getElementById( 'form' );
	theForm.addEventListener( 'submit', submit, false );
	}
	</script>
	</head>

	<body onload="go()">
	<form id="form" action="" method="POST">
	<p>
	<input type="file" name="file" />
	</p>
	<p>
	<input type="hidden" name="hidden" value="super secret" />
	<input type="text" name="text" value="text" />
	</p>
	<p>
	<input type="tel" name="tel" value="+1 800 555 1212" />
	</p>
	<p>
	<input type="url" name="url" value="http://example.com/path/" />
	</p>
	<p>
	<input type="email" name="email" value="address@example.com" />
	</p>
	<p>
	<input type="password" name="password" value="password" />
	</p>
	<p>
	<input type="datetime" name="datetime" value="2014-01-01T00:00+00" />
	</p>
	<p>
	<input type="date" name="date" value="2014-01-01" />
	</p>
	<p>
	<input type="month" name="month" value="2014-01" />
	</p>
	<p>
	<input type="week" name="week" value="2014-W01" />
	</p>
	<p>
	<input type="time" name="time" value="00:00" />
	</p>
	<p>
	<input type="datetime-local" name="datetime-local" value="2014-01-01T00:00" />
	</p>
	<p>
	<input type="number" name="number" value="42" />
	</p>
	<p>
	<input type="range" name="range" value="42" />
	</p>
	<p>
	<input type="color" name="color" value="#f1831e" />
	</p>
	<p>
	<keygen keytype="rsa" name="keygen" value="" />
	</p>
	<p>
	<textarea name="textarea">textarea</textarea>
	</p>
	<p>
	<select name="select">
	<option value="1">one</option>
	<option value="2">two</option>
	<optgroup label="more">
	<option value="3">three</option>
	</optgroup>
	</select>
	</p>
	<p>
	<input type="submit" />
	</p>
	</form>
	</body>

	</html>