javascript — получить содержимое в переменную div в PHP

Я использую div с contenteditable="true" в качестве поля ввода, и теперь я ищу способ передать содержимое div в переменную PHP, чтобы иметь возможность сохранить его в файле .txt. Я искал решения, и единственное предложение, которое я нашел до сих пор, было бы (насколько я понимаю) добавить контент в скрытое поле ввода перед его отправкой — хотя я не уверен, как это сделать Кажется, что есть лучший способ подойти к этому?

Стоит отметить, что я не настолько опытен в работе с серверной частью, поэтому любое объяснение решения будет с благодарностью — даже хороший указатель в правильном направлении в настоящее время был бы хорош.

В настоящее время у меня есть обычная форма для проверки функции сохранения с переменной $name для текстовых целей, но моя цель — сохранить текст в DIV в $textcontent вместо. (Желательно использовать href для отправки вместо кнопки, но я сомневаюсь, что это сильно влияет на то, какой метод использовать для решения моей проблемы.)

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);
}

?>

1

Решение

Теперь я могу придумать 2 способа: как вы сказали, записать текст из contenteditable div для ввода; и с Аяксом.

1. скрытый способ ввода

поэтому рабочий процесс здесь заключается в том, что вы копируете, что HTML внутри contenteditable div для скрытого ввода с помощью JavaScript. когда вы нажимаете кнопку отправки, $_POST["my-hidden-input"] будет хранить текст.

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
}

добавить HTML в форму:

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

добавить PHP:

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

нота: IMO, это глупо, потому что вы можете просто сделать это с помощью основного не скрытого type="text" вход и все готово.

2. AJAX путь

так что здесь рабочий процесс немного сложен, если вы не знакомы с ajax. если это так, Google это (я не даю вам ссылки, потому что я узнал об этом из Javascript: полное руководство, 6-е издание — действительно хорошая книга)

мы создаем наш HTML, с contenteditable div (для имени и текстового содержимого) и с кнопкой отправки (на самом деле div, но это не имеет значения). если пользователь щелкает элемент div, он отправляет через XMLHttpRequest (ajax) текст, записанный в этих элементах div, в ваш файл .php. переменные хранятся в $ _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
?>

Так что в основном это все. Теперь в php-файле, который вы сохранили в переменных, данные извлекаются из html-файла: D

4

Другие решения

Других решений пока нет …