En utilisant HTML5, comment puis-je utiliser des champs modifiables dans un formulaire de soumission ?

Question

J'ai donc un ensemble d'éléments de paragraphe qui sont alimentés dynamiquement à partir d'une base de données. J'ai rendu les éléments modifiables en termes de contenu. Je veux maintenant soumettre les modifications à la base de données via un formulaire standard. Existe-t-il un moyen de renvoyer les éléments modifiables ?

Answer 1

Vous devez utiliser le javascript d'une manière ou d'une autre, cela ne fonctionnera pas comme un élément de formulaire "standard" comme ce serait le cas avec un textarea ou autre. Si vous le souhaitez, vous pouvez créer une zone de texte cachée dans votre formulaire et, dans la fonction onsubmit du formulaire, copier l'innerHTML du contenteditable dans la valeur de la zone de texte. Vous pouvez également utiliser ajax/xmlHttpRqeuest pour soumettre le contenu de manière un peu plus manuelle.

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

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

Answer 2

Si cela intéresse quelqu'un, j'ai mis au point une solution avec VueJS pour un problème similaire. Dans mon cas, j'ai :

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

Dans "data" vous pouvez définir une valeur par défaut pour mainMessage, et dans les méthodes j'ai :

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

"d-none" est une classe Boostrap 4 pour l'affichage none. C'est aussi simple que cela, et vous pouvez alors obtenir la valeur du champ contenteditable dans "gift[main_message]" lors d'une soumission normale du formulaire par exemple, sans AJAX. Je ne suis pas intéressé par le formatage, c'est pourquoi "innerText" fonctionne mieux que "innerHTML" pour moi.

Answer 3

Doit-il s'agir d'un formulaire de soumission standard ? Si vous ne pouvez ou ne voulez pas utiliser un formulaire avec des entrées, vous pouvez essayer AJAX (XMLHttpRequest + FormData), qui vous permet d'effectuer des requêtes asynchrones et de mieux contrôler l'affichage de la réponse.

Si vous voulez que ce soit encore plus simple, essayez la méthode de jQuery. $.ajax (également $.get y $.post ). Il envoie des données en utilisant de simples objets JS.

Answer 4

Si vous utilisez jquery, vous pouvez soumettre le contenu à l'aide d'un événement .click() (c'est-à-dire "save" ou "submit"...).

Dans votre fonction de clic, envoyez-le à un script côté serveur en utilisant un "post" ajax pour l'insérer dans votre base de données.

Exemple