I want to sent a chunk of html to the server using XMLHttpRequest. The chunk I have is this:
<body id="publish">
<p>Vous avez à parler à vous même</p>
<input type="button" name="Submit" value="Submit" onClick="SaveDomHTML()">
</body>
This chunk is packed by JavaScript in 'content' and transferred to the server via PHP script. The problem I encounter is, when I try to print the 'content' in a server side file by php:
fwrite($fh, $content);
I get the following instead of my html chunk.
[object HTMLBodyElement]
Moreover, php gettype($content) gives string and not object !!!
I have looked around for a solution such as:
How to get innerHTML of DOMNode?
http://stackoverflow.com/questions/2087103/how-to-get-innerhtml-of-domnode
Send POST data using XMLHttpRequest
http://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest
But none of them working for me.
Any help to solve the problem is very much appreciated.
My full files, which were elaborated thanks to Answer 1, but in JavaScript rather than in jquery:
<!doctype html>
<html lang="fr">
<head>
<meta charset="iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" charset="iso-8859-1">
function SaveDomHTML(){
"use strict";
var content = document.getElementById('publish');
console.log("content:", content);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/cgi-bin/domsave.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (this.readyState === 4 || this.status === 200){
console.log(this.responseText);
}
};
xhr.send("content=" + content);
}
</script>
</head>
<body id="publish">
<p>Vous avez à parler à vous même</p>
<input type="button" name="Submit" value="Submit" onClick="SaveDomHTML()">
</body>
</html>
Php file:
<?php
$user_dom_html = 'user_dom_'.time().'.html';
$fh = fopen($user_dom_html, 'w');
echo $user_dom_html;
$content = $_POST['content'];
fwrite($fh, $content);
fclose($fh);
?>
Server side functionality Step.
Third step child point.
Need to target to your html DOM part
Client side js code.
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
var content = $('#html_dom').html();
$.ajax({
type: 'POST',
url: 'dom_sever_file.php',
data: {content: content}
}).done(
function( data ){
if(result){console.log("success")};
}
);
});
});
Server side php code.
//get auth user.
$user_session_id = $_SESSION['user_id'];
$user_dom_html = "user_dom_".time()."html";
$fh = fopen($user_dom_html, 'w');
$stringData = $_POST['content'];
fwrite($fh, $stringData);
//need to store only html file name and user id in mysql
//this part will be your mysql connection and insert query.