diegolamonica/SubmitToServer.htm

## SubmitToServer.htm
<html>
	<head>
		<script type="text/javascript">

			/**
			 * Submit the outerHTML of the given ElementId to an URL
			 *
			 * @param elementId: the ID of the Element which the HTML will be submitted.
			 * @param page: the url (relaitve to the current page or absolute) to the server page that will receive the html
			 * @param target (optional): the target of the form, leave it empty to sumbit the content to the same window.
			 * @param method (optional): post or get, if not specified the submit will be performed via 'post'.
			 * @param inputName (optional): the name of the input element on the form which will contain the HTML data default value is 'data'
			 *
			 * @author: Diego La Monica
			 * @contacts: me@diegolamonica.info
			 * @webSite: http://diegolamonica.info
			 * @License: Creative Commons 3.0 BY-ND
			 *
			 * Example of usage:
			 *
			 *  // Submit theElementId outerHTML to http://example.com/mytestpage.php using post
			 *
			 *  var sts = new SubmitToServer('theElementId', 'http://example.com/mytestpage.php');
			 *
			 *
			 *  // Submit theElementId outerHTML to http://example.com/mytestpage.php using post
			 *  // submit will be performed in a new window
			 *
			 *  var sts = new SubmitToServer('theElementId', 'http://example.com/mytestpage.php', '_blank');
			 *
			 *
			 *  // Submit theElementId outerHTML to http://example.com/mytestpage.php using get
			 *  // submit will be performed in a new window
			 *
			 *	var sts = new SubmitToServer('theElementId', 'http://example.com/mytestpage.php', '_blank', 'get');
			 *
			 *
			 *  // Submit theElementId outerHTML to http://example.com/mytestpage.php using post
			 *  // submit will be performed in the same window
			 *  // the server will receive data in post.
			 *  // the value is stored in the post key 'html'
			 *
			 *	var sts = new SubmitToServer('theElementId', 'http://example.com/mytestpage.php', '', 'post', 'html');

			 */
			function SubmitToServer(elementId, page, target, method, inputName){

				if(method==undefined) method = 'post';
				if(inputName == undefined ) inputName = 'data';

				this.outerHTML = function(node){
					// if IE, Chrome take the internal method otherwise build one
					return node.outerHTML || (
						function(n){
							var div = document.createElement('div');
							div.appendChild( n.cloneNode(true) );
							var h = div.innerHTML;
							div = null;
							return h;
						}
					)(node);
				}

				var theElement = document.getElementById(elementId);
				var html = this.outerHTML(theElement);

				/*
				 * Create the html form with the input element that will contain the html to be submitted.
				 */
				var theForm = document.createElement('form');
				theForm.setAttribute('method', method);
				theForm.setAttribute('action', page);
				if(target != undefined && target!='') theForm.setAttribute('target', target);
				/*
				 * Create the input element which will contain the outerHTML of the element
				 */
				var theInput = document.createElement('input');
				theInput.setAttribute('type', 'text');
				theInput.setAttribute('name', inputName);
				theInput.setAttribute('value', html);
				theForm.appendChild(theInput);
				document.body.appendChild(theForm);
				theForm.submit();
				/*
				 * After the submit I will remove the HTML form element from the page
				 */
				theForm.parentNode.removeChild(theForm);
				theForm = null;
			}
		</script>
		<title>Simple Test Page</title>
	</head>
	<body>

		<p id="theParagraph">
			This is a paragraph
		</p>


		<table id="theTable">
			<thead>
				<tr>
					<th>
						Column 1
					</th>
					<th>
						Column 2
					</th>
					<th>
						Column 3
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Row #1 of col #1</td>
					<td>Row #1 of col #2</td>
					<td>Row #1 of col #3</td>
				</tr>
				<tr>
					<td>Row #2 of col #1</td>
					<td>Row #2 of col #2</td>
					<td>Row #2 of col #3</td>
				</tr>
				<tr>
					<td>Row #3 of col #1</td>
					<td>Row #3 of col #2</td>
					<td>Row #3 of col #3</td>
				</tr>
			</tbody>
		</table>

		<p>
			<a href="javascript:var x = new SubmitToServer('theParagraph', 	'test.php');">Send the paragraph</a>
			<a href="javascript:var x = new SubmitToServer('theTable', 		'test.php');">Send the table</a>
		</p>

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

	/**
	* Submit the outerHTML of the given ElementId to an URL
	*
	* @param elementId: the ID of the Element which the HTML will be submitted.
	* @param page: the url (relaitve to the current page or absolute) to the server page that will receive the html
	* @param target (optional): the target of the form, leave it empty to sumbit the content to the same window.
	* @param method (optional): post or get, if not specified the submit will be performed via 'post'.
	* @param inputName (optional): the name of the input element on the form which will contain the HTML data default value is 'data'
	*
	* @author: Diego La Monica
	* @contacts: me@diegolamonica.info
	* @webSite: http://diegolamonica.info
	* @License: Creative Commons 3.0 BY-ND
	*
	* Example of usage:
	*
	* // Submit theElementId outerHTML to http://example.com/mytestpage.php using post
	*
	* var sts = new SubmitToServer('theElementId', 'http://example.com/mytestpage.php');
	*
	*
	* // Submit theElementId outerHTML to http://example.com/mytestpage.php using post
	* // submit will be performed in a new window
	*
	* var sts = new SubmitToServer('theElementId', 'http://example.com/mytestpage.php', '_blank');
	*
	*
	* // Submit theElementId outerHTML to http://example.com/mytestpage.php using get
	* // submit will be performed in a new window
	*
	* var sts = new SubmitToServer('theElementId', 'http://example.com/mytestpage.php', '_blank', 'get');
	*
	*
	* // Submit theElementId outerHTML to http://example.com/mytestpage.php using post
	* // submit will be performed in the same window
	* // the server will receive data in post.
	* // the value is stored in the post key 'html'
	*
	* var sts = new SubmitToServer('theElementId', 'http://example.com/mytestpage.php', '', 'post', 'html');

	*/
	function SubmitToServer(elementId, page, target, method, inputName){

	if(method==undefined) method = 'post';
	if(inputName == undefined ) inputName = 'data';

	this.outerHTML = function(node){
	// if IE, Chrome take the internal method otherwise build one
	return node.outerHTML \|\| (
	function(n){
	var div = document.createElement('div');
	div.appendChild( n.cloneNode(true) );
	var h = div.innerHTML;
	div = null;
	return h;
	}
	)(node);
	}

	var theElement = document.getElementById(elementId);
	var html = this.outerHTML(theElement);

	/*
	* Create the html form with the input element that will contain the html to be submitted.
	*/
	var theForm = document.createElement('form');
	theForm.setAttribute('method', method);
	theForm.setAttribute('action', page);
	if(target != undefined && target!='') theForm.setAttribute('target', target);
	/*
	* Create the input element which will contain the outerHTML of the element
	*/
	var theInput = document.createElement('input');
	theInput.setAttribute('type', 'text');
	theInput.setAttribute('name', inputName);
	theInput.setAttribute('value', html);
	theForm.appendChild(theInput);
	document.body.appendChild(theForm);
	theForm.submit();
	/*
	* After the submit I will remove the HTML form element from the page
	*/
	theForm.parentNode.removeChild(theForm);
	theForm = null;
	}
	</script>
	<title>Simple Test Page</title>
	</head>
	<body>

	<p id="theParagraph">
	This is a paragraph
	</p>


	<table id="theTable">
	<thead>
	<tr>
	<th>
	Column 1
	</th>
	<th>
	Column 2
	</th>
	<th>
	Column 3
	</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Row #1 of col #1</td>
	<td>Row #1 of col #2</td>
	<td>Row #1 of col #3</td>
	</tr>
	<tr>
	<td>Row #2 of col #1</td>
	<td>Row #2 of col #2</td>
	<td>Row #2 of col #3</td>
	</tr>
	<tr>
	<td>Row #3 of col #1</td>
	<td>Row #3 of col #2</td>
	<td>Row #3 of col #3</td>
	</tr>
	</tbody>
	</table>

	<p>
	<a href="javascript:var x = new SubmitToServer('theParagraph', 'test.php');">Send the paragraph</a>
	<a href="javascript:var x = new SubmitToServer('theTable', 'test.php');">Send the table</a>
	</p>

	</body>
	</html>