Automatic switch between "simple" and "rich" editing (rich text editor) during input

jmgroud 08 Apr, 2020
English
Hello

In a contact form, I would like to offer the user either a "simple" editor for writing mail (simple text) or the "rich" editor (rich text editor).
So I installed a "radio" field with the title "Type of editor" with the 2 choice lines "s = Simple" and "r = Rich" in the "Options" field.
I also inserted 2 fields "Textarea", the first with the parameter "Rich text editor" to "Off" and the second with the same parameter to "On".

Problem 1 :
How can one of the 2 "textarea" fields appear and disappear automatically from the form depending on the user's choice in the "radio" field (Simple or Rich)?
With an "Event Switcher"? With a simple "Switch"? Another method?

Problem 2:
For the 2 "Textarea" fields containing the message, I indicated in the "Validation" tab the "Required" = "On" field so as not to send an empty message (this may be an error).
Since it is not possible to enter the 2 texts at the same time, there is necessarily an empty text which blocks when sending the email.
How to use and test only the "textarea" chosen by the user without testing the other and not blocking the sending of the email because of the hidden "textarea" field.

This question is an example but I think I will need the same behavior style later, that is to make appear or disappear from the form for entering fields or groups of fields according to the value of other fields. Not only when the form is displayed for the first time, but also "live" during data entry.
What interests me here is a concrete example of having a general method.
Thanks for your help

Français
Bonjour

Dans un formulaire de contact, j'aimerai proposer à l'utilisateur, soit un éditeur "simple" d'écriture de mail (texte simple), soit l'éditeur "riche" (rich text editor).
J'ai donc installé un champ "radio" avec le titre "Type d'éditeur" avec les 2 lignes de choix "s=Simple" et "r=Riche" dans le champs "Options".
J'ai également inséré 2 champs "Textarea", le premier avec le paramètre "Rich text editor" à "Off" et le deuxième avec le même paramètre à "On".

Problème 1 :
Comment faire apparaître et disparaître automatiquement du formulaire l'un des 2 champs "textarea" en fonction du choix de l'utilisateur dans le champ "radio" (Simple ou Riche) ?
Avec un "Event Switcher" ? Avec un simple "Switch" ? Autre méthode ?

Problème 2 :
Pour les 2 champs "Textarea" contenant le message, j'ai indiqué dans l'onglet "Validation" le champ "Required" = "On" pour ne pas envoyer une message vide (c'est peut-être une erreur).
Étant donné qu'il n'est pas possible de saisir les 2 textes à la fois, il y a forcément un texte vide qui bloque lors de l'envoi du mail.Comment utiliser et tester uniquement le "textarea" choisi par l'utilisateur sans tester l'autre et ne pas bloquer l'envoi du mail à cause du champ "textarea" caché.

Cette question est un exemple mais je pense avoir besoin plus tard du même style de comportement, c'est à dire faire apparaître ou disparaître du formulaire de saisie des champs ou des groupes de champs en fonction de la valeur d'autres champs. Non seulement lors du premier affichage du formulaire, mais aussi "en live", pendant la saisie.
Ce qui m'intéresse ici, c'est un exemple concret pour avoir une méthode générale.
Merci pour votre aide
GreyHead 08 Apr, 2020
Hi jmground,

I think that you can do this with JavaScript - you will need to hide and disable one element while you show and enable the other. If you use enable/disable you can give both textareas the same name as only enabled inputs are submitted.

Alternatively, you can use a rich text area that offers an option to use plain text, you may need to add a note to let users know that the feature is there.

Bob
jmgroud 08 Apr, 2020
English
Thanks for your response Bob.
I think you're right, and I may have found a solution that also uses JavaScript but that does not require programming.
This solution works to display or hide the 2 input fields but does not work to validate or invalidate the tests of these fields.
- The "Show" and "Hide" events are working ... YES !!!!! 🙂
- But the events "Enable", "Enable validation", "Disable" and "Disable validation" do not work ... 😟

Question 1
Why this difference?
Did I misunderstand how events worked?

Question 2
This solution is practical but if I wish to perform more complex operations, how could I execute a single function when modifying the "type-of-editor" field (group radios) and perform the following operations in this function:
- Show or hide certain fields?
- Activate or deactivate the validation of certain fields?
- Possibly change the validation rules?
- Take into account certain fields and not others in the content of the email?

I think that it is not possible to program it in HTML / PHP because it would be necessary to send an instruction to the server without redisplaying the complete page (perhaps in AJAX ????).
So I imagine a JavaScript solution but I may be wrong.

Jean-Marie

Français
Merci pour ta réponse Bob
Je pense que tu as raison, et j'ai trouvé peut-être une solution qui utilise aussi JavaScript mais qui ne nécessite pas de programmation.
Cette solution fonctionne pour afficher ou cacher les 2 champs de saisies mais ne fonctionne pas pour valider ou dévalider les tests de ces champs.
- Les événements "Show" et "Hide" fonctionnent... YES !!!!! 🙂
- Mais les événements "Enable", "Enable validation", "Disable" et "Disable validation" ne fonctionnent pas... 😟

Question 1
Pourquoi cette différence ?
Ais-je mal compris le fonctionnement des événements ?

Question 2
Cette solution est pratique mais si je désire effectuer des opérations plus complexes, comment pourrais-je exécuter une seule fonction lors de la modification du champ "type-d-editeur" (radios groupe) et effectuer dans celle fonction les opérations suivantes :
- Afficher ou cacher certains champs ?
- Activer ou désactiver la validation de certains champs ?
- Changer éventuellement les règles de validation ?
- Prendre compte certains champs et pas d'autres dans le contenu du mail ?
Je pense qu'il n'est pas possible de le programmer en HTML/PHP car il faudrait envoyer une instruction au serveur sans ré-afficher la page complète (peut-être en AJAX ????).
J'imagine donc une solution JavaScript mais je me trompe peut-être.

Jean-Marie
jmgroud 08 Apr, 2020
Exemple de paramétrage...
​[file=12883]exemple.jpg[/file]
jmgroud 11 Apr, 2020
English
Yes indeed everything works correctly with the triggering of events but be careful!
It seems that events do not always fire, for example if you use a "textarea" type zone with "Rich text editor" to "On" ...
See this post for possible explanations: https://www.chronoengine.com/forums/posts/t108281/error-validating-a-textarea-zone-in-rich-text-editor-mode
Hoping that there is a solution and that it is not a bug ...

Français
Oui en effet tout fonctionne correctement avec le déclenchement des événements mais attention !
Il semblerait que les événements ne se déclenchent pas toujours, par exemple si vous utilisez une zone de type "textarea" avec "Rich text editor" à "On"...
Voir ce post pour avoir éventuellement des explications : https://www.chronoengine.com/forums/posts/t108281/error-validating-a-textarea-zone-in-rich-text-editor-mode
En espérant qu'il y a une solution et que ce n'est pas un bug...
This topic is locked and no more replies can be posted.

VPS & Email Hosting 20% discount
hostinger