Wie bekomme ich td-Wert auf Post-PHP?

Question

<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. 
    } 
    ?> 

Derzeit möchte ich meinen td-Wert nach dem Klicken auf die Schaltfläche Echo, aber es wird nicht angezeigt. Bitte hilf mir. tq.

Answer 1

contenteditable ist nicht Bestandteil des form input Element kann daher nicht über Server wie form-input-elements zugegriffen werden. Es bedeutet, dass Sie nicht contenteditable Elementwert in $_POST/$_GET

aktualisieren hidden Feldwert, wenn der Wert von contenteditable geändert wird zugreifen können. Verwenden Sie input Ereignis. Das Ereignis DOM input wird synchron ausgelöst, wenn der Wert eines Elements <input> oder <textarea> geändert wird. Zusätzlich wird es auf contenteditable Editoren ausgelöst, wenn sein Inhalt geändert wird.

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

Edit: Wie Nate wies darauf hin, es besser ist submit oder click zu verwenden (wenn nicht mit form Umgang) Veranstaltung um den Wert vonfestzulegenElement aus Gründen der Leistung

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>

Answer 2

td nicht Element bilden, so dass es keine solche Attribute wie name oder value hat.

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>

Andere Option wäre jQuery zu verwenden, um Inhalte von td zu bekommen: Sie können diesen Wert auf verstecktes Feld oder Textfeld setzen

$('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 
});