Tengo diferente contenido editable en mi archivo html. Tengo un par de etiquetas y un par de tablas con contenido editable también.
Quiero enviar la información a una base de datos después de que el usuario se enfoque, sin botones para activar la acción.
Esto es parte de mi 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>Soy nuevo en la programación y estoy tratando de encontrar la mejor manera de obtener la información editable y enviarla a mi base de datos. Sé que tengo que usar Javascript, Ajax y enviarlo a un archivo PHP basado en la información que he investigado. La parte de PHP no es un problema para mí, pero necesito un poco de ayuda con las partes de Javascript y AJAX porque todo lo que probé hasta ahora no ha arrojado ningún resultado.
Gracias.
No es una respuesta "lista para usar", sino un esqueleto: puede escuchar si un elemento perdió el foco, es decir, el usuario ya no está escribiendo en él.
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>Un ejemplo simple de cómo hacer esto podría ser asignar un detector de eventos blur vinculado a todos los elementos que tienen el conjunto de atributos contenteditable y usar la API de búsqueda para enviar la solicitud AJAX usando un objeto FormData a su secuencia de comandos PHP backend.
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>