CODEWITHSUNDEEP
javascriptphphtmlinnerhtml
melvin junod
melvin junod

Reputation: 45

PHP: How to get CURRENT innerHTML?

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>

Upvotes: 4

Views: 3455

Answers (3)

Saeed Vaziry
Saeed Vaziry

Reputation: 2355

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

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42736

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)

Upvotes: 0

Joel Harkes
Joel Harkes

Reputation: 11661

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

Upvotes: 2

Related Questions