PHP: How to get CURRENT innerHTML?

Question

To put it simply, I tried to make a website where the user can make an element, and then put it in a div element with the id "box". The js script works perfectly fine, and p elements can be created.

And then, I made a php script where it saves the innerHTML of the "box" div and then save it in a .txt file.

Now, the problem is, the script returns the innerHTML value as the original value, before p elements were added in there.

Here's my php script:

 <?php
//Basically a function
if(isset($_POST["use_button"]))
{
    //Loads the file, which is named test.php
    $dom= new DOMDocument(); 
$dom->loadHTMLfile("test.php"); 

//Gets the innerhtml value
$div = $dom->getElementById("box")->nodeValue;

//Writes it down in a file.
    $file = fopen("stuff.txt","w");
fwrite($file,$div);
fclose($file);

//Just for fast-checking if the code has any errors or not
    echo "File saved.";
}
?>

I'd suppose the question is already pretty clear. Which is how to get the CURRENT value instead of the ORIGINAL one.

Here's the entire code if it helps:

<html>
<head>
<script>
//The javascript function to add a "para" into a div with the id "box"

function addstuff() {
    var parag = document.createElement("P");        // Create a <button> element
var t = document.createTextNode("Lorem Ipsum");       // Create a text node
parag.appendChild(t);
    document.getElementById("box").appendChild(parag);
}
</script>
</head>
<body>



<!--Button to call the funtion-->
<button onclick="addstuff()">Add it</button>


<!--The form for the button to work-->
<form action="" method="post">

<!--The div to put the "para"s in. The style only adds borders-->
<div id="box" style="border: 2px solid black;">
<!--A pre-existing paragraph-->
<p>This was here before</p>

</div>

<!--The button to call the php-->
<input type="submit" name="use_button" value="Store in file" style="width:100%;" />
</form>

<!--The PHP-->
<?php
//Basically a function
if(isset($_POST["use_button"]))
{
    //Loads the file, which is named test.php
    $dom= new DOMDocument(); 
$dom->loadHTMLfile("test.php"); 

//Gets the innerhtml value
$div = $dom->getElementById("box")->nodeValue;

//Writes it down in a file.
    $file = fopen("stuff.txt","w");
fwrite($file,$div);
fclose($file);

//Just for fast-checking if the code has any errors or not
    echo "File saved.";
}
?>
</body>
</html>

Html inside a
isn't sent to the server on the form submission... the html that was added would need to be added to some input control that would then be sent to the server — Patrick Evans, Oct 19 '17 at 12:30
Possible duplicate of [What is AJAX and how does it work?](https://stackoverflow.com/questions/6009206/what-is-ajax-and-how-does-it-work) — Joel Harkes, Oct 19 '17 at 12:30
Because PHP runs on your server an JS runs in a browser somewhere maybe half around the world. There is no direct connection between them. You communicate data between them through HTTP. DOM modified in the browser is not mirrored on the server. When you write `$dom->loadHTMLfile("test.php"); ` you are loading some file on your server, not the HTML your user (in a browser) just edited. — Sergiu Paraschiv, Oct 19 '17 at 18:12

score 2 · Accepted Answer · answered Oct 19 '17 at 12:29

This is not possible:

PHP generates HTML which is then send to the browser.
The browser executes javascript in the page.

There is no PHP in the browser! and server can't know about anything the user does in the browser!!

you can do an AJAX calls with javascript to send data to the server.

Please refer to this answer: https://stackoverflow.com/a/6009208/1275832

score 0 · Answer 2 · answered Oct 19 '17 at 12:51

You seem to be confused on how <form> element's work. Just adding HTML code to a form client side does not send that HTML code as form data to the server upon form submission. Nor does it automatically update some PHP file.

You would need to add the HTML code to some input control (input, textarea, etc) that is part of the <form>. Then that input's value will be sent to the server on submission at which point you can then use that sent data.

So on the client side you could have a hidden input that will hold the html that is to be sent. Updating it every time you need to change the html

HTML

<form action="" method="post">
  <input id="boxinput" type="hidden" name="boxinput"/>
  <!--- Rest of form -->
</form>

JS

//cache these so you don't need to call getByElementById every call
var box = document.getElementById("box");
var boxinput = document.getElementById('boxinput');
function addstuff() {
  var parag = document.createElement("P");
  var t = document.createTextNode("Lorem Ipsum");
  parag.appendChild(t);
  box.appendChild(parag);
  //update the input field
  boxinput.value = box.innerHTML;  
}

And then on server side, get the input data from the $_POST global and use it as needed

if(isset($_POST["use_button"])) {
  $boxHtml = $_POST['boxinput'];
  //..
  fwrite($file,$boxHtml);
  //..
}

Obligatory note: if you are going to be using this saved html in some way, eg echoing it back on some new page, you should sanitize it before saving/using it. Or only showing it in a sandboxed frame (kinda like how Stack Overflow has sandboxed its Stack Snippets)

score 0 · Answer 3 · answered Oct 20 '17 at 00:12

This is not possible.

But you can handle it manually by using query parameters that are same in php and javascript

Generate your page elements by query parameters.

For example when you got test.php?div=box generate a page that contains a <div id='box'>

There is so many solutions like this

PHP: How to get CURRENT innerHTML?

3 Answers3