div 的内容未插入数据库

Question

我有一个 div，它使用 contenteditable 允许用户编辑其中的文本。

提交表单时，我使用 Javascript 将隐藏输入字段的值设置为 div 的内容，然后将其插入到数据库中。

我的问题是 div 的内容没有输入数据库。

<?php
if(isset($_POST['submit'])) {
echo'
<script>
  document.getElementById("hiddenTextarea").value =  
    document.getElementById("post").innerHTML;
  return true;
</script>
';

$post = $_POST['hiddenTextarea'];
$stmt = $con->prepare("INSERT INTO posts (post) VALUES (:post)");
$stmt->bindParam(':post', $post);
$stmt->execute();
}
?>

<form method="post">
<div id="post" contenteditable></div>
<input type="hidden" id="hiddenTextarea" name="hiddenTextarea">
<input type="submit" name="submit">
</form>

问题可能是在 Javascript 代码更改 #hiddenTextarea 的值之前执行查询吗？

Answer 1

使用以下代码：

<?php
if(isset($_POST['submit'])) {
     $post = $_POST['post'];
     $stmt = $con->prepare("INSERT INTO posts (post) VALUES (:post)");
     $stmt->bindParam(':post', $post);
     $stmt->execute();
}
?>

<form method="post">
     <textarea name="post"></textarea>
     <input type="hidden" id="hiddenTextarea" name="hiddenTextarea">
     <input type="submit" name="submit" onsubmit="return copyContent()">
</form>

Answer 2

根据不同论坛和不同用户的各种建议，我能够使用 Javascript 的 onkeyup 事件提出解决方案：

<?php
if(isset($_POST['submit'])) {
$post = $_POST['hiddenTextarea'];
$stmt = $con->prepare("INSERT INTO posts (post) VALUES (:post)");
$stmt->bindParam(':post', $post);
$stmt->execute();
}
?>

<form method="post">
<div id="post" contenteditable></div>
<input type="text" name="hiddenTextarea" id="hiddenTextarea">
<input type="submit" name="submit">
</form>

<script>
var contentText = document.getElementById('post');
var hiddenInput = document.getElementById('hiddenTextarea');
contentText.onkeyup = function() {
    hiddenInput.value = this.innerHTML; 
};
</script>

当用户输入contenteditable div时，也会自动输入到隐藏的输入字段中，然后可以通过变量定义输入到数据库中。

div 的内容未插入数据库

Content of div not being inserted into database

html

javascript

php

contenteditable