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