web-dev-qa-db-fra.com

À l'aide de HTML5, comment utiliser les champs contenteditable dans une soumission de formulaire?

J'ai donc un tas d'éléments de paragraphe qui sont dynamiquement remplis à partir d'une base de données. J'ai rendu les éléments contenteditable. Je veux maintenant soumettre les modifications de la base de données via une soumission de formulaire standard. Est-il possible de poster les éléments contenteditable?

html5contenteditable
33
MFB

Vous devez utiliser javascript d'une manière ou d'une autre, cela ne fonctionnera pas comme un élément de formulaire "standard", contrairement à ce qui se passe avec une zone de texte ou similaire. Si vous le souhaitez, vous pouvez créer une zone de texte masquée dans votre formulaire et, dans la fonction onsubmit de celui-ci, copier le innerHTML du contenu modifiable dans la valeur de la zone de texte. Vous pouvez également utiliser ajax/xmlHttpRqeuest pour soumettre les éléments un peu plus manuellement.

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


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

Si quelqu'un est intéressé, j'ai corrigé 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. Dans les méthodes, j'ai:

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

"d-none" est une classe de Boostrap 4 pour display none .. C'est aussi simple que cela. Vous pouvez ensuite obtenir la valeur du champ contenteditable dans "gift [message_message]" lors d'une soumission de formulaire normal, par exemple, non AJAX requis. Je ne suis pas intéressé par le formatage, donc "innerText" fonctionne mieux que "innerHTML" pour moi.

0
Alberto T.

Faut-il que le formulaire soit standard? Si vous ne pouvez ou ne voulez pas utiliser un formulaire avec des entrées, vous pouvez essayer AJAX (XMLHttpRequest + FormData), grâce auquel vous pouvez effectuer des requêtes asynchrones et mieux contrôler l'affichage des réponses.

Si vous voulez encore plus simple, essayez $.ajax function (également $.get et $.post) de jQuery. Il envoie des données en utilisant de simples objets JS.

0
byeolbit.99

Si vous utilisez jquery, vous pouvez soumettre le contenu avec un événement .click () (c'est-à-dire "enregistrer" ou "soumettre" ...) 

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

Exemple

0
Sparkup