Created
July 25, 2012 09:51
-
-
Save diegolamonica/3175371 to your computer and use it in GitHub Desktop.
Submit outer HTML to the Server
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment