在div中獲取內容到PHP變量

Question

我正在使用帶有contenteditable="true"的div作為輸入字段，現在我正在尋找一種將div的內容傳遞給PHP變量的方法，以便能夠將其保存在.txt文件中。 我一直在尋找解決方案，到目前為止，我發現的唯一建議是（據我所知）在提交內容之前將其添加到隱藏的輸入字段中-盡管我不確定如何執行此操作，似乎有更好的方法可以解決此問題？

值得一提的是，我對后端的工作經驗不足，因此，對解決方案的任何解釋將不勝感激-即使此時只是指向正確方向的指針也很好。

我目前正在使用常規形式來測試使用$name變量進行保存功能， $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);
}

?>

Answer 1

現在，我可以想到兩種方式：如您所說，將文本從contenteditable div寫入輸入； 和ajax。

1.隱藏輸入方式

因此，這里的工作流程是您將contenteditable div中的html復制到帶有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版-一本非常好的書）

我們使用contenteditable div（用於名稱和文本內容）和提交按鈕（實際上是div，但這並不重要）創建html。 如果用戶單擊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

在div中獲取內容到PHP變量

問題描述

1 個解決方案

解決方案1
4 已采納 2015-01-25 22:03:22

在div中獲取內容到PHP變量

問題描述

1 個解決方案

解決方案1 4 已采納 2015-01-25 22:03:22

解決方案1
4 已采納 2015-01-25 22:03:22