如何在后 php 上获取 td 值 - How to get td value on post php?

<form action="" method="post" name="theform">
    <table width="693" border="1" style="table-layout:fixed;" >
    <tr>
    <td width="683" id="mymessage" contenteditable="true" name="mymessage">Write message here...</td>
    </tr>
    </table>
    <span class="notranslate"><input type="submit" id="btnSend" name="btnSend" value="Send"></span>
    </form>
    <?php
    if (isset($_POST['btnSend']))
    {
        $getmsg = $_POST['mymessage'];//i can't seem to get the value of td here
        echo $getmsg;//i want to echo the message for example.
    }
    ?>

目前，我想在单击按钮后回显我的 td 值，但它没有出现。请帮助我。

contenteditable不是form input元素的一部分，因此无法像form-input-elements那样通过服务器访问它。这意味着您无法访问contenteditable $_POST/$_GET中的元素值

更改contenteditable的值时hidden更新字段值。使用input事件。更改<input>或<textarea>元素的值时，将同步触发 DOM input 事件。此外，当其内容发生更改时，它会在contenteditable编辑器上触发。

document.getElementById('mymessage').addEventListener('input', function() {
  document.getElementById('hiddenInput').value = this.innerHTML;
  console.log(document.getElementById('hiddenInput').value);
});
document.getElementById('hiddenInput').value = document.getElementById('mymessage').innerHTML; //To set the value initially..
console.log(document.getElementById('hiddenInput').value);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<form action="" method="post" name="theform">
  <table width="693" border="1" style="table-layout:fixed;">
    <tr>
      <td width="683" id="mymessage" contenteditable="true" name="mymessage">Write message here...</td>
    </tr>
  </table>
  <input type="hidden" id='hiddenInput' name='hiddenInput'>
  <span class="notranslate"><input type="submit" id="btnSend" name="btnSend" value="Send"></span>
</form>

.PHP：

<?php
if (isset($_POST['btnSend']))
{
    $getmsg = $_POST['hiddenInput'];
    echo $getmsg;
}
?>

编辑：正如Nate指出的那样，为了性能，最好使用submit或click(如果不处理form(事件来设置hidden元素的值

document.querySelector('[name="theform"]').addEventListener('submit', function(e) {
  e.preventDefault(); //Prevented submit action just to demonstrate..
  document.getElementById('hiddenInput').value = document.getElementById('mymessage').innerHTML;
  console.log(document.getElementById('hiddenInput').value);
})

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<form action="" method="post" name="theform">
  <table width="693" border="1" style="table-layout:fixed;">
    <tr>
      <td width="683" id="mymessage" contenteditable="true" name="mymessage">Write message here...</td>
    </tr>
  </table>
  <input type="hidden" id='hiddenInput' name='hiddenInput'>
  <span class="notranslate"><input type="submit" id="btnSend" name="btnSend" value="Send"></span>
</form>

td不是

表单元素，因此它没有name或value等属性。您可以将该值放入隐藏字段或文本字段：

input {
  border: none;
  background-color: transparent;
  outline: none;
}

<table width="693" border="1" style="table-layout:fixed;">
  <tr>
    <td width="683" contenteditable="true">
      <input id="mymessage" type="text" value="Write message here..." name="mymessage" />
    </td>
  </tr>
</table>

另一种选择是使用 jQuery 来获取 td 的内容：

$('form').submit(function () {
    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: {
            mymessage: $('#mymessage').text()
        },
        success: function () {
            // do something on success
        }
    });
    return false; // return false so that form will not submit reloading page. Form submitting is now done via Ajax
});