I want to make editable element as input form field

Question

My code

<form action="" method="post">

    <div name="name" contentEditable="true">You Favorite Movie</div>
    <p name="Comment"  contentEditable="true">Your Comment</p>

<button>Submit</button>
<form>

Answer 1

As far as I know, only <input> tags are sent in the form data. However, ou could use invisible <input> tags which have data copied into them, like this:

<form action="" method="post">
    <div id="name" contentEditable="true" onchange="copyToHidden('name', 'nameInput')">You Favorite Movie</div>
    <input type="hidden" name="name" id="nameInput">
    <p id="comment" contentEditable="true">Your Comment</p>
    <input type="hidden" name="Comment" id="commentInput" onchange="copyToHidden('comment', 'commentInput')">
    <button>Submit</button>
<form>

then have this JavaScript somewhere in a script tag

function copyToHidden(elementId, inputId) {
    document.getElementById(inputId).value = document.getElementById(elementId).textContent;
}