Get content in div to PHP variable

Question

I'm using a div with contenteditable="true" as an input field, and now I'm looking for a way to pass the content of the div to a PHP variable in order to be able to save it in a .txt file. I've been looking around for solutions, and the only suggestion I've found so far would be to (as I understand it) add the content to a hidden input field before submitting it – though I'm not sure how to do this, it seems like there's probably a better way to approach this?

It's worth mentioning that I'm not that experienced working with back-end, so any explanation to a solution would be greatly appreciated – even just a pointer in the right direction at this time would be nice.

I'm currently having a regular form to test the save function with the variable $name for texting purposes, but my goal is to save the text in the div in $textcontent instead. (Preferably I'd use a href to submit instead of a button, but I doubt that makes much difference as to what method to use in order to solve my problem.)

index.php

<?php
//temporary, will be dynamic
$sessionid = "123testID";
?>

<!DOCTYPE html>
<html>
<head></head>

<body>

<div id="results">
    <div name="textcontent" contenteditable="true" class="no-formatting">Content that should be saved to .txt file&#133;</div>

    <!-- for testing only -->
    <form action="index.php" method="post">
        <input type="text" placeholder="Name" name="name">
        <input type="submit" name="submit">
    </form>

    <br>
    <a href="index.php">reload</a>
    <!----->

</div>

</body>
</html>



<?php

$name = $_POST["name"];
$sessionid = "123testID";

?>

<?php
if (strlen($name) > 0) {

    $fp = fopen('stories/'.$sessionid.'.txt', 'a+');

    fwrite($fp, "textcontent:\t".$name."\r\n");

    fclose($fp);
}

?>

possible duplicate of [Using HTML5, how do I use contenteditable fields in a form submission?](http://stackoverflow.com/questions/6247702/using-html5-how-do-i-use-contenteditable-fields-in-a-form-submission) — rjdown, Jan 25 '15 at 21:05
@rjdown Seems like it is, though it doesn't help me all that much. — Lenny, Jan 25 '15 at 21:10
I think it explains it pretty well. Which part are you having issues with? — rjdown, Jan 25 '15 at 21:14
@rjdown It was an error on my part elsewhere in the code (of course....), I'll post my solution once I've tidied up the code a bit. Thanks a lot for pointing me in the right direction! — Lenny, Jan 25 '15 at 21:29

score 4 · Accepted Answer · answered Jan 25 '15 at 22:03

Now i can think of 2 ways: as you said, writing the text from the contenteditable div to the input; and with ajax.

1.hidden input way

so the workflow here is that you copy what html is inside the contenteditable div to a hidden input with javascript. when you click the submit button, $_POST["my-hidden-input"] will store the text .

JS:

var contentText = document.getElementByClassName('no-formatting');
var hiddenInput = document.getElementById('hidden-input');

// copy the text to input when the user writes in contentText div
contentText.onkeyup = function() {
    hiddenInput.innerHTML = this.innerHTML;  // 'this' is pointing to contentText
}

add HTML to the form:

<input type="hidden" id="hidden-input" name="my-hidden-input">
<!-- note: your hidden input :) -->

add PHP:

$textcontent = $_POST["my-hidden-input"];

note: IMO this is silly becouse you can simply do it with a basic non-hidden type="text" input and you're done.

2.AJAX way

so here the workflow is a little complicated if you are not familiar with ajax. if so, google it(i am not giving you links becouse i learned it from Javascript: the definitive guide, 6th edition -- a really good book)

we create our html, with the contenteditable divs (for name and textcontent) and with a submit button (actually a div, but this doesn't matter). if the user clicks the div, it will send through an XMLHttpRequest (ajax) the text written in those divs to your .php file. the variables are stored in $_POST.

HTML & JS :

<!doctype html>
<html>
<head></head>
<body>

<div id="status"></div>

<div contenteditable="true" id="name"></div>
<div contenteditable="true" id="text"></div>
<div id="submit-button">Submit me</div>
<script>
function requestAjax(){
    // Create our XMLHttpRequest object
    var request = new XMLHttpRequest();

    // the php file handling your file saving and other logic
    var url = "my-php-file.php";

    // variables later used in your php file
    var name = document.getElementById("name").innerHTML;
    var text = document.getElementById("text").innerHTML;

    // needed in my-php-file.php. this is important becouse based on these parameters it will be stored in $_POST
    var $POST = "name="+fn+"&text="+ln;

    request.open("POST", url, true);

    // Set content type header information for sending url encoded variables in the request
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    // Access the onreadystatechange event for the XMLHttpRequest object
    request.onreadystatechange = function() {
        if(request.readyState == 4 && request.status == 200) {
            var someCallback = request.responseText;
            document.getElementById("status").innerHTML = someCallback;
        }
    }

    // Send the data to PHP now... and wait for response to update the status div
    request.send($POST); // Actually execute the request

    // in case you want to inform the user if it succeeded or failed
    document.getElementById("status").innerHTML = "still not finished";
}

var submitButton = document.getElementById('submit-button');
// attach event handler
submitButton.onclick = requestAjax;
</script>

</body>
</html>

PHP:

<?php
    //retrieved through AJAX
    $name = $_POST['name'];
    $textcontent = $_POST['text'];
    // insert your code here ...

    echo 'Ajax request completed!'; //this will inform the request we've made that the proccesing is done
?>

So basically this is it. now in the php file you have stored in variables the data's retrieved from the html file :D

Since your example with hidden input is basically an identical solution to the one I made I'll mark this as my accepted answer. The AJAX method might come in handy in the future (either for me or someone else), so thank you for providing alternative solutions with great commenting! — Lenny, Jan 26 '15 at 00:10
Can someone help me understand this line in the "ajax way" section of the accepted answer var $POST = "name="+fn+"&text="+ln; why is the javascript variable in capital letters?? what does "name="+fn"&text="+ln mean?? also, do you really need the onreadystatechange lines and setrequestheader line?? — user2585548, Jul 04 '17 at 17:29

Get content in div to PHP variable

1 Answers1