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…</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);
}
?>
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…</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);
}
?>
- 1 possible duplicate of Using HTML5, how do I use contenteditable fields in a form submission? – rjdown Commented Jan 25, 2015 at 21:05
- @rjdown Seems like it is, though it doesn't help me all that much. – Lenny Commented Jan 25, 2015 at 21:10
- I think it explains it pretty well. Which part are you having issues with? – rjdown Commented Jan 25, 2015 at 21:14
- @rjdown The content never reaches the .txt for some reason. – Lenny Commented Jan 25, 2015 at 21:18
- @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 Commented Jan 25, 2015 at 21:29
1 Answer
Reset to default 4Now 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 plicated 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 pleted!'; //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