Getting values from HTML Content Editable, passing those values to Javascript and use AJAX to send to PHP file

Question

I have different content editable in my html file. I have a couple of labels, and a couple of tables with content editable as well.

I want to send the info to a database after user focus out, no buttons to trigger the action.

This is part of my html:

<label id="firstLabel" contenteditable="true">Hello</label>
<table id="firstTable">
  <input type="hidden" name="userId" id="userid" value="<?php echo $userId ?">
  <tr>
     <td id="firstRow" name="firstRow" contenteditable="true">This is first row</td>
  </tr>
</table>
<div class="footer" id="footer" contenteditable="true">Bottom message</div>

I'm new to programming, and I'm trying to figure the best way to get the contenteditable information, and send it to my database. I know I have to use Javascript, Ajax, and send it to a PHP file based on the information I've researched. The PHP part is not a problem for me, but I need a little help with the Javascript and AJAX parts because everything I tried so far has not retrieved any results.

Thank you.

Answer 1

It's not an "out of the box" answer, but a skeleton : you can listen for an element lost the focus, ie the user is no more typing in it.

let edit = document.getElementById("firstRow");

edit.addEventListener("blur", function(e) {
  console.log("You can send to php");
  // please have a look here for ajax : https://developer.mozilla.org/fr/docs/Web/Guide/AJAX
});

<label id="firstLabel" contenteditable="true">Hello</label>
<table id="firstTable">
  <input type="hidden" name="userId" id="userid" value="<?php echo $userId ?">
  <tr>
    <td id="firstRow" name="firstRow" contenteditable="true">This is first row</td>
  </tr>
</table>
<div class="footer" id="footer" contenteditable="true">Bottom message</div>

Answer 2

A simple example of how to do this might be to assign a blur event listener bound to all elements that have the contenteditable attribute set and use fetch api to send the AJAX request using a FormData object to your backend PHP script.

const getparent=(e)=>{
  let n=e.target;
  while(n.tagName.toLowerCase()!='span' && n.className!='record'){
    if(n.tagName=='BODY')return false;
    n=n.parentNode;
  }
  return n;
}

document.querySelectorAll('[contenteditable="true"]').forEach(el=>{
  el.addEventListener('blur',function(e){
    let span=getparent(e);
    if( !span )return;

    let fd=new FormData();
        fd.set('userid', span.querySelector('[name="userId"]').value );
        fd.set('text', this.textContent );
        fd.set('id', this.id );

    fetch( 'https://www.example.com', { method:'post', body:fd, mode:'cors' })
      .then( r=>r.text() )
      .then( text=>{
        console.log( 'Do something with returned response: %s',text )
      })
  })
})

.record{
  display:block;
  margin:1rem;
  border:1px solid red;
  padding:1rem;
}

<span class='record'>
  <label id="label-1" contenteditable="true">Hello World</label>
  <table>
    <input type="hidden" name="userId" value="123456789">
    <tr>
       <td id="row-1" name="firstRow" contenteditable="true">This is first row</td>
    </tr>
  </table>
  <div class="footer" contenteditable="true">A message from the Bottom</div>
</span>


<span class='record'>
  <label id="label-2" contenteditable="true">World Hello</label>
  <table>
    <input type="hidden" name="userId" value="987654321">
    <tr>
       <td id="row-2" name="secondRow" contenteditable="true">This is second row</td>
    </tr>
  </table>
  <div class="footer" contenteditable="true">A bottom from the Message</div>
</span>