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的内容未插入数据库

2 个答案: