Using HTML5, how do I use contenteditable fields in a form submission?

So I have a bunch of paragraph elements which are dynamically populated fro开发者_如何学Cm a db. I have made the elements contenteditable. I now want to submit edits back the the db via a standard form submission. Is there a way to post the contenteditable elements back?

You have to use javascript one way or the other, it won't work as a "standard" form element as it would with a textarea or the like. If you like, you could make a hidden textarea within your form, and in the form's onsubmit function copy the innerHTML of the contenteditable to the textarea's value. Alternatively you could use ajax/xmlHttpRqeuest to submit the stuff a bit more manually.

function copyContent () {
    document.getElementById("hiddenTextarea").value =  
        document.getElementById("myContentEditable").innerHTML;
    return true;
}


<form action='whatever' onsubmit='return copyContent()'>...

If anyone is interested I patched up a solution with VueJS for a similar problem. In my case I have:

<h2 @focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>

In "data" you can set a default value for mainMessage, and in methods I have:

methods: {
  updateMainMessage: function(e) {
    this.mainMessage = e.target.innerText;
  }
}

"d-none" is a Boostrap 4 class for display none. Simple as that, and then you can get the value of the contenteditable field inside "gift[main_message]" during a normal form submit for example, no AJAX required. I'm not interested in formatting, therefore "innerText" works better than "innerHTML" for me.

Does it NEED to be standard form submission? If you cannot or do not want use a form with inputs, you may try AJAX (XMLHttpRequest + FormData), through which you could perform asynchronous requests and control better how response shows up.

If you want it even simpler, try jQuery's $.ajax function (also $.get and $.post). It sends data using simple JS objects.

Made a fully working example based on Rob's idea:

After hitting submit, the (hidden) textarea is updated with the table-data, in JSON-format.
(return true to submit)

function copyContent() {
  const table = [];
  $("tr").each(function() {
    const row = [];
    $("th, td", this).each(function() {
      row.push($(this).text());
    });
    table.push(row);
  });
  $("#rows").val(JSON.stringify(table));

  // return true to submit
  return false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form onsubmit='return copyContent()'>
  <textarea name="rows" id="rows" rows="4"></textarea>
  <button type="submit">Submit</button>
</form>

<table class="table table-striped">
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true">edit </td>
      <td contenteditable="true">me</td>
    </tr>
    <tr>
      <td contenteditable="true">please</td>
      <td contenteditable="true">