Formulaire : tentative JS de poster une réponse à la suite d'un sujet plutôt que d'en créer un nouveau

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonsoir,

j'ai créé une page HTML à part qui fonctionne parfaitement bien.
Ce formulaire permet de créer une page de personnage, avec des données et des calculs automatiques.

Cela créé une nouvelle réponse, boom boom tout est parfait.

Mais lorsqu'on veut mettre à jour, le code HTML se déformant, ce qui est normal, j'ai pensé à l'idée de re-soumettre un nouveau formulaire A LA SUITE du sujet déjà créé , afin de voir l'évolution et que ça ne créé pas des tonnes de sujets...  :

> (lien caché)

Soucis : HTML fonctionnant. JS dynamique des joueurs fonctionnant... post impossible. En effet lorsqu'on change dynamiquement si necessaire "newpost" par "reply"... ça ne fonctionne pas.

Voici pour test deux sujets (vous n'avez pas accès en visiteurs )
> https://albastrya.bbactif.com/t123-feuille-de-elora-chante-brume
> https://albastrya.bbactif.com/t149-fiche-de-perso-manon

J'ai soutiré les : t123 et t149, sans succès...

Code:

   <div class="form">
        <form id="mainForm" action="/post" method="post" enctype="multipart/form-data" onsubmit="return envoiMessage(this)">
            <input type="hidden" name="lt" value="0" />
            <input type="hidden" name="mode" value="newtopic" /> <!-- Ce champ sera mis à jour en "reply" si nécessaire -->
            <input type="hidden" name="topictype" value="0" />
            <input type="hidden" name="message" value="" />
            <input type="hidden" name="f" value="18" />
            <input type="hidden" name="subject" id="titre" value="" />
            <input type="hidden" name="t" id="threadId" value="" /> <!-- ID du sujet à répondre -->


            <div id="characterForm">
                <!-- Liste déroulante pour choisir un personnage -->
                <div class="form-group">
                    <label for="characterSelect">Choisissez un personnage :</label>
                    <select id="characterSelect" name="character" onchange="handleSelectionChange(this)">
                        <option value="" selected>Sélectionnez votre joueur</option>
                        <!-- Les options seront ajoutées dynamiquement par JavaScript -->
                    </select>
                </div>
            </div>

LE JS :

Code:

       // Exemple de données simulées
        const personnages = [
            { id: '149', nom: 'Personnage 1', sujetId: '1001' },
            { id: '150', nom: 'Personnage 2', sujetId: '1002' },
            { id: '151', nom: 'Personnage 3', sujetId: '1003' }
        ];

        // Fonction pour peupler la liste déroulante avec les personnages
        function populateCharacterSelect() {
            const select = document.getElementById('characterSelect');
            select.innerHTML = ''; // Vider les options existantes
            personnages.forEach(personnage => {
                const option = document.createElement('option');
                option.value = personnage.id;
                option.textContent = personnage.nom;
                select.appendChild(option);
            });
        }

        // Fonction appelée lors du changement de sélection du personnage
        function handleSelectionChange(selectElement) {
            const characterId = selectElement.value;
            const personnage = personnages.find(p => p.id === characterId);

            if (personnage) {
                document.getElementById('threadId').value = personnage.sujetId;
                document.getElementById('titre').value = ""; // Définir le titre si nécessaire
                document.querySelector('input[name="mode"]').value = "reply"; // Changer le mode à "reply"
                console.log("Mode changé en reply et threadId mis à jour :", personnage.sujetId);
            } else {
                document.getElementById('threadId').value = "";
                document.getElementById('titre').value = "";
                document.querySelector('input[name="mode"]').value = "newtopic"; // Revenir au mode "newtopic"
                console.log("Mode changé en newtopic");
            }
        }
  
          // Initialiser la liste des personnages lorsque le document est prêt
        document.addEventListener('DOMContentLoaded', populateCharacterSelect);

Je voudrais donc savoir pourquoi dans un formulaire, lorsqu'on change le mode de "post", cela créé "Mode de réponse non spécifié" alors qu'indirectement, si, j'ai juste demandé de ne pas créer de nouveaux sujets mais de réponse à un sujet spécifique...  


Merci de votre aide !

[Tite-May]

Bonjour !

Je pense que le souci vient du fait que tu aies un "f" et un "t".

Code:

            <input type="hidden" name="f" value="18" />
            <input type="hidden" name="subject" id="titre" value="" />
            <input type="hidden" name="t" id="threadId" value="" /> <!-- ID du sujet à répondre -->

Pour moi si tu mets juste le "t" ça suffit pour la réponse en fait, le f c'est uniquement pour poster (il me semble).
Si ça n'est pas ça je pourrais regarder en détail

[Kaehlyth]

Bonjour,

On avance en effet. En changeant le f par t, j'ai :



Par contre le lien en choisissant le personnage ne fonctionne pas ..

Le lien pour le personnage 1 : https://albastrya.bbactif.com/t149-fiche-de-perso-manon

Le but est que lorsque je choisis le personnage ( 1 2 3 4 ect... ) cela permet de changer dynamiquement le lien pour poster le formulaire.

Merci de ton aide !

[Tite-May]

Re coucou
C'est parce que ton threadId est ton sujetId, il devrait être ici ton "id" tout court.

En fait ici :

Code:

           <input type="hidden" name="t" id="threadId" value="" /> <!-- ID du sujet à répondre -->


Tu lui cible
albastrya.bbactif.com/t149-fiche-de-perso-manon ceci de ton lien
et d'après ton tableau de personnage, tu dois sélectionner celui qui a l'ID 149

donc ici :

Code:

 function handleSelectionChange(selectElement) {
            const characterId = selectElement.value;
            const personnage = personnages.find(p => p.id === characterId);
 
            if (personnage) {
                document.getElementById('threadId').value = personnage.id;

Je pense qu'il serait plus simple de faire rediriger le bouton "répondre" vers le formulaire avec directement les bons codes, ça sera plus simple pour les membres non ?

[Kaehlyth]

Ta solution revient au même que d'avoir la page HTML avec le bouton répondre de cette page qui envoie vers le sujet déjà créé.

Dans tous les cas il faut passer par le formulaire. Par contre ce qu'il est possible de faire c'est que si je choisis un personnage, le bouton "poster" changé pour le lien ?

Le formulaire a normalement la base JS qui permet soit de créer un sujet, soit de répondre si le lien du sujet existe déjà.

Simplement pour l'heure ça ne fonctionne pas car je ne suis pas experte du tout avec le JS. Je commence juste à appréhender ce codage. Et peut être forumactif a des limites.


Je vais patienter voir s'il y a une solution

[Kaehlyth]

Léger up de la demande avec précision.

[Kaehlyth]

Après renseignement,

il semblerait qu'il soit impossible à FA de permettre semble-t-il une sorte de formulaire qui va chercher un API pour répondre dans un sujet déjà créé.
Le formulaire peut générer un nouveau sujet, mais pas une nouvelle réponse dans ce dit sujet, même en passant par le JS semble-t-il.

Je vais laisser ouvert ici si le sujet est intéressant ou non.

De mon côté, j'ai pris parti d'utiliser la fonction de fusion des sujets en attendant.

[Scoubifitz]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonsoir,

j'ai créé une page HTML à part qui fonctionne parfaitement bien.
Ce formulaire permet de créer une page de personnage, avec des données et des calculs automatiques.

Cela créé une nouvelle réponse, boom boom tout est parfait.

Mais lorsqu'on veut mettre à jour, le code HTML se déformant, ce qui est normal, j'ai pensé à l'idée de re-soumettre un nouveau formulaire A LA SUITE du sujet déjà créé , afin de voir l'évolution et que ça ne créé pas des tonnes de sujets...  :

Je voudrais donc savoir pourquoi dans un formulaire, lorsqu'on change le mode de "post", cela créé "Mode de réponse non spécifié" alors qu'indirectement, si, j'ai juste demandé de ne pas créer de nouveaux sujets mais de réponse à un sujet spécifique...  

Merci de votre aide !

Après renseignement,

il semblerait qu'il soit impossible à FA de permettre semble-t-il une sorte de formulaire qui va chercher un API pour répondre dans un sujet déjà créé.
Le formulaire peut générer un nouveau sujet, mais pas une nouvelle réponse dans ce dit sujet, même en passant par le JS semble-t-il.

Je vais laisser ouvert ici si le sujet est intéressant ou non.

De mon côté, j'ai pris parti d'utiliser la fonction de fusion des sujets en attendant.

Bonsoir,

Vous avez un formulaire pour ouvrir un nouveau sujet . vous désirer coller un message à la suite de ce sujet via un nouveau formulaire.
Alors, il est possible d'envoyer un message à la suite d'un sujet via un formulaire. On peut même faire un listing de topics pour choisir la destination.

Un petit "retour vers le futur" de 10 ans en arrière : https://forum.forumactif.com/t367165-choisir-ou-envoyer-le-contenue-d-un-formulaire#3112432

Maintenant , plus il y aura de posts , plus il y aura de noms à rajouter ...
Alors que le problème de départ était celui-ci :

lorsqu'on veut mettre à jour, le code HTML se déformant, ce qui est normal,

Non, ce n’est pas normal qu'un message se déforme à l'édition . il serait plus simple de travailler cette partie pour éviter une "usine à gaz" de formulaires ...
Mais ce n'est que mon avis .

[Kaehlyth]

Bonjour Scoubifitz !

Merci de ta réponse. 

En fait, de ce que j'ai compris des différents codages, passer du HTML > au bbcode (donc le message posté) fait que l'ensemble des espaces que l'on met dans notre code HTML pour y voir plus clair et indéxer les différentes balises, se transforment automatiquement dans l'éditeur de texte en "espace" qui aaaaaggggrraaaandiiiit et déforme l'ensemble du code. Peut-être en cela suis-je responsable car mon sujet posté a des balises avec des margins. (seul moyen que je connaisse pour personnaliser. Je ne suis pas une grande codeuse, je bidouille, comme beaucoup)

Aussi, j'ai du passer par un site qui permet de "compresser" tout mon code et qu'on édite ou non, le code ne bouge pas ! Car aucun espace, donc respect des balises. Soucis : l'édition est INDIGESTE pour les membres qui ne comprennent rien au codage. Ce qui est normal, on est passionné ou non. 

J'ai tenté donc de transformer mon code HTML en bbcode pour que le bouton "basculer en mode édition" permette un visuel "esthétique" de mes tableaux et donc, pouvoir éditer la page sans créer de nouveau un message. Je n'ai pas réussi à avoir le même résultat aussi, j'ai abandonné ... 

Si vous souhaitez que l'on travaille ensemble sur tous ces points, j'en serais plus que ravie ! 

A la suite mon code de la page :
/!\ Ce code permet de créer un nouveau sujet. J'ai abandonné comme dit plus haut, l'idée de passer par une option tierce de répondre à la suite d'un message.

[Scoubifitz]

Bonjour Scoubifitz !

Merci de ta réponse. 

En fait, de ce que j'ai compris des différents codages, passer du HTML > au bbcode (donc le message posté) fait que l'ensemble des espaces que l'on met dans notre code HTML pour y voir plus clair et indéxer les différentes balises, se transforment automatiquement dans l'éditeur de texte en "espace" qui aaaaaggggrraaaandiiiit et déforme l'ensemble du code. Peut-être en cela suis-je responsable car mon sujet posté a des balises avec des margins. (seul moyen que je connaisse pour personnaliser. Je ne suis pas une grande codeuse, je bidouille, comme beaucoup)

Aussi, j'ai du passer par un site qui permet de "compresser" tout mon code et qu'on édite ou non, le code ne bouge pas ! Car aucun espace, donc respect des balises. Soucis : l'édition est INDIGESTE pour les membres qui ne comprennent rien au codage. Ce qui est normal, on est passionné ou non. 

Il y a un peu de travail , en effet ...

1ère question : Pourquoi ne pas avoir opté pour une feuille de style à la place du style dans chaque <div> du message envoyé ?
(çà allègerait déjà beaucoup le message à transmettre et le CSS pourra être utilisé pour le topic et les messages suivants)

2ème question : le premier formulaire envoie le pseudo , une image , une vidéo , des statistiques et deux commentaires .
faut-il la même structure pour les messages suivants ? des éléments peuvent-ils être supprimés ?

j'ai un petit test pour vous :
copier-coller le code suivant dans un message sur votre forum ,
prévisualisez plusieurs fois pour voir le résultat .

Code:

<div style="font-family: Caudex; padding: 0px; margin: 0; background-image: url(https://zupimages.net/up/24/29/dhid.jpg); background-repeat: repeat; box-shadow: 1px 1px 3px #000;"><!--
--><div style="display: flex; flex-wrap: wrap; gap: 10px;"><!--
--> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <!--
--><div style="background-color: #ED7D31; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect psychologique et moral </div><!--
--> <div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Caractère</div> <!--
--><input type="text" value="${form.psychologique_caractere.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Émotions</div> <!--
--><input type="text" value="${form.psychologique_emotions.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Valeurs</div> <!--
--><input type="text" value="${form.psychologique_valeurs.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> <!--
--></div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Total</div> <!--
--><input type="text" value="${document.getElementById('total_psychologique').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--></div> <!--
--></div> <!--
--><div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <!--
--><div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect physique </div> <!--
--><div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Puissance</div> <!--
--><input type="text" value="${form.physique_puissance.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Adresse</div> <!--
--><input type="text" value="${form.physique_adresse.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Sens</div> <!--
--><input type="text" value="${form.physique_sens.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Total</div> <!--
--><input type="text" value="${document.getElementById('total_physique').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> <!--
--></div> <!--
--></div> <!--
--></div> <!--
--><div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <!--
--><div style="background-color: #ED7D31; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect identitaire </div> <!--
--><div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Statut familial</div> <!--
--><input type="text" value="${form.identitaire_statut_familial.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Revenus</div> <!--
--><input type="text" value="${form.identitaire_revenus.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Possessions</div> <!--
--><input type="text" value="${form.identitaire_possessions.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Total</div> <!--
--><input type="text" value="${document.getElementById('total_identitaire').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--></div> </div> <!--
--><div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 196px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <!--
--><div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect social et culturel </div> <!--
--><div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Aisance</div> <!--
--><input type="text" value="${form.social_statut_social.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Empathie</div> <input type="text" value="${form.social_education.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Culture</div> <!--
--><input type="text" value="${form.social_ethnie.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Total</div> <!--
--><input type="text" value="${document.getElementById('total_social').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--></div> <!--
--></div> <!--
--></div> <!--
--><div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;"> <!--
--><div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; max-width: 205px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);margin-left:15em"> <!--
--><div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Capacités </div> <!--
--><div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Capacité combat</div> <!--
--><input type="text" value="${form.combat.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Capacité Magie</div> <!--
--><input type="text" value="${form.magie.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Capacité d'Exploration</div> <!--
--><input type="text" value="${form.exploration.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Capacité Monte</div> <!--
--><input type="text" value="${form.monte.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Capacité Craft</div> <!--
--><input type="text" value="${form.craft.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--></div> <!--
--></div> <!--
--><div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; max-width: 205px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <!--
--><div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Statistiques </div> <!--
--><div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Point de vie</div> <!--
--><input type="text" value="${form.point_de_vie.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Initiative</div> <!--
--><input type="text" value="${form.initiative.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Point d'Action</div> <!--
--><input type="text" value="${form.point_action.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--><div style="display: flex; align-items: center; margin-bottom: 10px;"> <!--
--><div style="font-weight: bold; width: 120px;">Défense Passive</div> <!--
--><input type="text" value="${form.defense_passive.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <!--
--></div> <!--
--></div> <!--
--></div><!--
--></div> <!--
--><div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; margin-top: 20px; max-width: 95%; margin-left: 1em;"> <!--
--><div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: -30px; margin-top: -25px;"> Aspect Annexe </div> <!--
--><div> <!--
--><div> <!--
--><div style="font-weight: bold; margin-bottom: 5px;">Spécialités autres & secret(s) :</div> <!--
--><div style=" width: 100%; padding: 10px; box-sizing: border-box; font-size: 1em; border-radius: 5px; border: none; white-space: pre-wrap; background-color: #423030; color: #fff; word-wrap: break-word; /* Assure que les longs mots se cassent */ margin: 0; /* Évite les marges non désirées */ display: block; /* Permet à la boîte de s'ajuster à la hauteur du contenu */ "> ${nl2br(form.specialites_autres_secrets.value)} </div> <!--
--></div> <!--
--><div> <!--
--><div style="font-weight: bold; margin-bottom: 5px;">Commentaires & Background :</div> <!--
--><div style=" width: 100%; padding: 10px; box-sizing: border-box; font-size: 1em; border-radius: 5px; border: none; white-space: pre-wrap; background-color: #423030; color: #fff; word-wrap: break-word; /* Assure que les longs mots se cassent */ margin: 0; /* Évite les marges non désirées */ display: block; /* Permet à la boîte de s'ajuster à la hauteur du contenu */ "> ${nl2br(form.commentaires.value)} </div> <!--
--></div> <!--
--></div><!--
--></div>


J'ai tenté donc de transformer mon code HTML en bbcode pour que le bouton "basculer en mode édition" permette un visuel "esthétique" de mes tableaux et donc, pouvoir éditer la page sans créer de nouveau un message. Je n'ai pas réussi à avoir le même résultat aussi, j'ai abandonné ... 

Si vous souhaitez que l'on travaille ensemble sur tous ces points, j'en serais plus que ravie ! 

Il est possible de simplifier une partie du tableau (en BBcode ou en HTML ) , tout dépend du rendu voulu .

[Kaehlyth]

1ère question : Pourquoi ne pas avoir opté pour une feuille de style à la place du style dans chaque <div> du message envoyé ?
(çà allègerait déjà beaucoup le message à transmettre et le CSS pourra être utilisé pour le topic et les messages suivants)

Réponse : parce que le css déjà existant ne marchait pas une fois le formulaire envoyé... Peut être reitéré sur la feuille de style de base.

2ème question : le premier formulaire envoie le pseudo , une image , une vidéo , des statistiques et deux commentaires .
faut-il la même structure pour les messages suivants ? des éléments peuvent-ils être supprimés ?

Réponse : oui , ne rien toucher. C'est ce que je veux afficher.


Concernant, le code. Non ça ne déforme rien !
Par contre on voit certains codes. Sûrement fait exprès ? Et en effet on voit le HTML donc indigeste pour l'édition des membres.

[Scoubifitz]

Réponse : parce que le css déjà existant ne marchait pas une fois le formulaire envoyé... Peut être reitéré sur la feuille de style de base.

voui,voui! à remettre sur la feuille de style de base.

2ème question : des éléments peuvent-ils être supprimés ?

Réponse : oui , ne rien toucher. C'est ce que je veux afficher.

Il y aura une différence , l'affichage d'un listing des membres ayant ouvert un sujet (à compléter en éditant le formulaire)

Concernant, le code. Non ça ne déforme rien !
Par contre on voit certains codes. Sûrement fait exprès ? Et en effet on voit le HTML donc indigeste pour l'édition des membres.

Le fait de mettre des balises commentaires permet d'isoler certaines zones du code , pas besoin d'en mettre partout.
C'est plutôt pensé pour l'édition d'un modérateur.

[Kaehlyth]

1 - Même si on prend parti de vouloir utiliser le formulaire pour qu'il réponde dans le sujet d'un des nombreux membres, en effet, chaque information RP est précieuse. Il peut s'agit de secret ou d'une histoire rajoutée. Donc, oui, on ne peut pas réduire ! J'aurai bien voulu, cependant, l'ensemble est important.


2 - Oui, c'est bien dommage que l'éditeur de texte n'affiche pas le visuel en source comme il le ferait pour le bbcode.
ça éviterait de faire et refaire et refairefaire des formulaires.


Avez vous une solution sur le problème initial, et donc, le HTML qui se déforme ?

[Scoubifitz]

En attendant de trouver une solution de codage en BBcode pour éditer en mode WYSIWYG pour vos membres , et qui ne se déforme pas ,
je vous poste le code du formulaire bis avec une liste déroulante des membres , à vous de compléter cette liste.

mis sous hide :

[Kaehlyth]

En attendant de trouver une solution de codage en BBcode pour éditer en mode WYSIWYG pour vos membres , et qui ne se déforme pas ,
je vous poste le code du formulaire bis avec une liste déroulante des membres , à vous de compléter cette liste.

mis sous hide :

Concernant le code, j'admets quand sans instruction, je ne vois pas ce que je dois compléter ?
J'y vois bien la liste déroulante, avec un choix de pseudo. Je vois bien qu'il y a avant le lien du forum à rediriger.... mais est-ce tout ?

Car lorsque je teste le code simplement brute ainsi, j'ai le message d'erreur : "Mode de sujet non spécifié".

Merci pour la future réponse !

[Scoubifitz]

 hmmmm... je n'avais pas ce message lors du test ...

on réessaie ?

Code:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formulaire de Création de Fiche de Personnage</title>
<style> /* Style pour le formulaire */ body {font-family: Caudex;text-align: center;color: #fbd6c0;display: flex;justify-content: center;align-items: center;min-width: 97vw;background: linear-gradient(to left, rgb(127 167 134 / 11%), rgb(163 78 92 / 20%)), url(https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png);} .custom-background {width: 96em; margin: 0 auto; padding: 20px;background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png); background-size: cover;background-position: center;background-repeat: no-repeat; border-radius: 0px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); position: relative;overflow: hidden;display: flex;flex-direction: column;justify-content: flex-end;} .container {display: flex;gap: 10px;flex-wrap: nowrap;z-index: 1;} .aspect {background-color: #fff;border: 1.5px solid #ED7D31;border-radius: 5px;padding: 10px;width: 190px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);} .aspect-header {background-color: #ED7D31;color: #fff;font-weight: bold;padding: 10px;text-align: center;border-radius: 3px;margin-bottom: 10px;} .aspect-content {display: flex;flex-direction: column;} .sub-category {display: flex;align-items: center;margin-bottom: 10px;} .category-name {font-weight: bold;width: 120px;color: #ab583a;} input[type="text"] {width: 60px;margin-left: 10px;border: 1px solid #ED7D31;padding: 5px;box-sizing: border-box;text-align: center;font-size: 1em;background-color: #fff;} input[type="text"]:focus {border-color: #ED7D31;outline: none;} .large-box {background-color: #fff;border: 1.5px solid #ED7D31;border-radius: 5px;padding: 10px;width: calc(100% - 40px);box-shadow: 0 2px 5px rgba(0,0,0,0.1);margin-top: 20px;} .large-box-header {background-color: #795548;color: #fff;font-weight: bold;padding: 10px;text-align: center;border-radius: 3px;margin-bottom: 10px;} .large-box-content {display: flex;flex-direction: column;gap: 10px;} .large-box-content textarea {width: 100%;height: 100px;border: 1px solid #ED7D31;padding: 10px;box-sizing: border-box;font-size: 1em;border-radius: 5px;resize: vertical;} .form {margin: 10px auto;max-width: 87%;z-index: 1;} center {display: block;text-align: center;margin-top: 20px;} #errormsg {color: red;} .form-group {display: flex;align-items: center;margin-bottom: 10px;width: 37.2em;} .form-group label {flex: 1 0 0px;font-weight: bold;text-align: left;margin-right: 25px;} .form-group input[type="text"] {flex: 1;padding: 5px;border: 1px solid #ED7D31;border-radius: 3px;margin-left: -3em;} .submit-btn {background-color: #ED7D31;color: #fff;border: none;padding: 10px 20px;font-size: 1em;font-weight: bold;border-radius: 5px;cursor: pointer;box-shadow: 0 2px 5px rgba(0,0,0,0.1);transition: background-color 0.3s ease;} .submit-btn:hover {background-color: #db6c27;} .responsive-image {max-width: 650px;height: auto;} .video-preview iframe {width: 79%;margin-left: 7em;height: 60px;} .content {display: none;} .show-content {display: flex;} #characterForm {margin: 10px auto;width: 30.4em;padding: 20px;background-color: #f9f9f9;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border: 1px solid #ED7D31;} #characterForm .form-group {display: flex;align-items: center;margin-bottom: 10px;margin-left: -7.4em;} #characterForm .form-group label {flex: 0 1 150px;font-weight: bold;text-align: left;margin-right: 25px;color: #ab583a;} #characterForm .form-group select {flex: 1;padding: 5px;border: 1px solid #ED7D31;border-radius: 3px;width: 100%;appearance: none;background-color: #fff;color: #333;font-size: 16px;} .background-g {z-index: 3;position: absolute;left: -0.4em;top: 1em;clip-path: inset(0 0 0 0);} .background-d {z-index: 3;position: absolute;right: -0.7em;clip-path: inset(0 0 0 0);top: 1em;} .background-h {z-index;position: absolute;top: 0.2em;right: -1.7em;clip-path: inset(0 0 84% 4.2%);} .background-b {z-index: 1;position: absolute;bottom: -3.9em;right: 1em;clip-path: inset(0 0 0 24.8%);z-index: 3;} .background-hh {z-index;position: absolute;top: 0.2em;left: -2.7em;clip-path: inset(0 0 84% 4.2%);} .background-bb {z-index: 1;position: absolute;bottom: -3.9em;left: 4em;width: 54em;clip-path: inset(0 0 0 0);z-index: 3;} .sparkle {position: absolute;z-index:2;width: 0.2em;height: 0.5em;border-radius: 50%;pointer-events: none;opacity: 0.6;transform: translateY(100%);animation: sparkle-animation 1.5s ease-in-out infinite;background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent);} .base-theme .sparkle {background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent);z-index:2;} #qeel {position: absolute;top: 0;left: 0;width: 100%;z-index: 0;opacity: 0.5;} .sparkle {position: absolute;z-index:2;width: 0.2em;height: 0.5em;border-radius: 50%;pointer-events: none;opacity: 0.6;transform: translateY(100%);animation: sparkle-animation 1.5s ease-in-out infinite;background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent); /* Orange */} .base-theme .sparkle {background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent);z-index:2; /* Orange */} /* Variations pour les positions et les délais d'animation */ .sparkle1 { left: 54%; bottom: 6.6em; animation-delay: 1.9s; } .sparkle2 { left: 30%; bottom: 6.6em; animation-delay: 0.3s; } .sparkle3 { left: 50%; bottom: 6.6em; animation-delay: 0.5s; } .sparkle4 { left: 70%; bottom: 6.6m; animation-delay: 0.9s; } .sparkle5 { left: 90%; bottom: 0.5em; animation-delay: 1.2s; } .sparkle6 { right: 24%;bottom: 6.6em; animation-delay: 0.2s; } .sparkle7 { left: 42%; bottom: 6.6em; animation-delay: 0.4s; } .sparkle8 { left: 35%; bottom: 6.6em; animation-delay: 1.4s; } .sparkle9 { left: 62%; bottom: 6.6em; animation-delay: 0.6s; } .sparkle10 { left: 81%; bottom: 2em; animation-delay: 1.9s; } /* Animation des éclats */ @keyframes sparkle-animation { 0% {transform: translateY(100%) scale(0.5);opacity: 0.6;} 100% {transform: translateY(-100%) scale(1);opacity: 0;}} </style>
</head>
<body><div class="custom-background">
   <img src="https://i.servimg.com/u/f55/16/14/86/50/colonn18.png" class="background-g"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn13.png" class="background-h"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn13.png" class="background-hh"/>
   <img src="https://i.servimg.com/u/f55/16/14/86/50/colonn17.png" class="background-d"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn14.png" class="background-b"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn14.png" class="background-bb"/>
   <img src="https://i.servimg.com/u/f44/20/41/07/60/qeel1310.png" class="qeel" id="qeel"/>
   <div class="form">
      <form id="mainForm" action="/post" method="post" enctype="multipart/form-data" onsubmit="return envoiMessage(this)">
      <input type="hidden" name="mode" value="reply" />
<input type="hidden" name="topictype" value="0" checked="checked"/> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="t" value="" />
         <!-- ID du sujet à répondre -->
         <!-- Champ pour entrer le titre du sujet -->
         <div id="characterForm">
            <div class="form-group">
               <label for="pseudo"></label>
               <select id="t" name="t">
               <option value="" selected='selected'>Votre pseudo</option>
               <option value="123">Chante brume</option>
               <option value="149">Manon</option>
               </select>
            </div>
         </div>
         <!-- Champ pour entrer un lien d'image -->
         <div id="characterForm">
            <div class="form-group">
               <label for="imageURL"></label>
               <input type="text" name="imageURL" id="imageURL" placeholder="Entrez l'URL de l'image" oninput="updateImagePreview()"/>
            </div>
         </div>
         <!-- Champ pour entrer un lien vidéo -->
         <div id="characterForm">
            <div class="form-group">
               <label for="videoURL"></label>
               <input type="text" name="videoURL" id="videoURL" placeholder="Entrez l'URL de la vidéo" oninput="updateVideoPreview()"/>
            </div>
         </div>
         <div class="video-preview" id="videoPreview">
         </div>
         <div class="image-preview" id="imagePreview" style="text-align-last: center;">
         </div>
         <div class="container">
            <!-- Chaque aspect avec ses champs -->
            <div class="aspect">
               <div class="aspect-header">
                  Aspect psychologique et moral
               </div>
               <div class="aspect-content">
                  <div class="sub-category">
                     <div class="category-name">
                        Caractère
                     </div>
                     <input type="text" name="psychologique_caractere" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Émotions
                     </div>
                     <input type="text" name="psychologique_emotions" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Valeurs
                     </div>
                     <input type="text" name="psychologique_valeurs" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Total
                     </div>
                     <input type="text" id="total_psychologique" readonly/>
                  </div>
               </div>
            </div>
            <div class="aspect">
               <div class="aspect-header">
                  Aspect physique
               </div>
               <div class="aspect-content">
                  <div class="sub-category">
                     <div class="category-name">
                        Puissance
                     </div>
                     <input type="text" name="physique_puissance" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Adresse
                     </div>
                     <input type="text" name="physique_adresse" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Sens
                     </div>
                     <input type="text" name="physique_sens" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Total
                     </div>
                     <input type="text" id="total_physique" readonly/>
                  </div>
               </div>
            </div>
            <div class="aspect">
               <div class="aspect-header">
                  Aspect identitaire
               </div>
               <div class="aspect-content">
                  <div class="sub-category">
                     <div class="category-name">
                        Statut familial
                     </div>
                     <input type="text" name="identitaire_statut_familial" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Revenus
                     </div>
                     <input type="text" name="identitaire_revenus" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Possessions
                     </div>
                     <input type="text" name="identitaire_possessions" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Total
                     </div>
                     <input type="text" id="total_identitaire" readonly/>
                  </div>
               </div>
            </div>
            <div class="aspect">
               <div class="aspect-header">
                  Aspect social et culturel
               </div>
               <div class="aspect-content">
                  <div class="sub-category">
                     <div class="category-name">
                        Aisance
                     </div>
                     <input type="text" name="social_statut_social" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Empathie
                     </div>
                     <input type="text" name="social_education" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Culture
                     </div>
                     <input type="text" name="social_ethnie" placeholder="0" oninput="calculateTotals()"/>
                  </div>
                  <div class="sub-category">
                     <div class="category-name">
                        Total
                     </div>
                     <input type="text" id="total_social" readonly/>
                  </div>
               </div>
            </div>
            <div class="container">
               <!-- Section des Capacités -->
               <div class="aspect">
                  <div class="aspect-header">
                     Capacités
                  </div>
                  <div class="aspect-content">
                     <div class="sub-category">
                        <div class="category-name">
                           C. combat
                        </div>
                        <input type="text" name="combat" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           C. Magie
                        </div>
                        <input type="text" name="magie" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           C. d'Exploration
                        </div>
                        <input type="text" name="exploration" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           C. de Monte
                        </div>
                        <input type="text" name="monte" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           C. de Craft
                        </div>
                        <input type="text" name="craft" placeholder="0"/>
                     </div>
                  </div>
               </div>
               <!-- Section des Statistiques -->
               <div class="aspect">
                  <div class="aspect-header">
                     Statistiques
                  </div>
                  <div class="aspect-content">
                     <div class="sub-category">
                        <div class="category-name">
                           Point de vie
                        </div>
                        <input type="text" name="point_de_vie" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           Initiative
                        </div>
                        <input type="text" name="initiative" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           Point d'action par tour
                        </div>
                        <input type="text" name="point_action" placeholder="0"/>
                     </div>
                     <div class="sub-category">
                        <div class="category-name">
                           Défense passive
                        </div>
                        <input type="text" name="defense_passive" placeholder="0"/>
                     </div>
                  </div>
               </div>
            </div>
            <div style="width: 100%; text-align: center;">
               <span style="color: red; display: inline-block; margin: auto;" id="errormsg"></span>
            </div>
         </div>
         <div class="large-box">
            <div class="large-box-header">
               Spécialités autres & secret(s) :
            </div>
            <div class="large-box-content">
               <textarea name="specialites_autres_secrets" placeholder="Entrez ici vos spécialités autres et secrets..."></textarea>
            </div>
         </div>
         <div class="large-box">
            <div class="large-box-header">
               Background et Commentaires
            </div>
            <div class="large-box-content">
               <textarea name="commentaires" placeholder="Entrez ici vos commentaires... avec votre BG"></textarea>
            </div>
         </div>
         <div class="sparkle sparkle1">
         </div>
         <div class="sparkle sparkle2">
         </div>
         <div class="sparkle sparkle3">
         </div>
         <div class="sparkle sparkle4">
         </div>
         <div class="sparkle sparkle5">
         </div>
         <div class="sparkle sparkle6">
         </div>
         <div class="sparkle sparkle7">
         </div>
         <div class="sparkle sparkle8">
         </div>
         <div class="sparkle sparkle9">
         </div>
         <div class="sparkle sparkle10">
         </div>
         <center>
         <br/><label><span style="color:brown;font-family: sans-serif;text-shadow: 0 0 2px #340e6a;">Le titre du sujet sera créé automatiquement !</span></label><br/><br/>
         <img src="https://zupimages.net/up/24/28/7oin.png"/><br/><br/>
         <input type="submit" name="post" value="Créer !" class="submit-btn"/><br/>
         </center>
      </form>
   </div>
</div>
</body>
</html>
<script>
// Calcul des totaux pour chaque aspect
function calculateTotals() {
const aspects = ['psychologique', 'physique', 'identitaire', 'social'];
aspects.forEach(aspect => {
let total = 0;
const inputs = document.querySelectorAll(`input[name^="${aspect}"]`);
inputs.forEach(input => {
total += parseFloat(input.value) || 0;
});
document.getElementById(`total_${aspect}`).value = total;
});
}
// Mise à jour de l'aperçu de l'image
function updateImagePreview() {
const url = document.getElementById('imageURL').value;
const imagePreview = document.getElementById('imagePreview');
imagePreview.innerHTML = '';
if (url) {
const img = document.createElement('img');
img.src = url;
img.onload = () => {
imagePreview.appendChild(img);
};
img.onerror = () => {
imagePreview.innerHTML = 'Erreur de chargement de l\'image.';
};
}
}
// Prévisualisation de la vidéo YouTube
function updateVideoPreview() {
const url = document.getElementById('videoURL').value;
const videoPreview = document.getElementById('videoPreview');
const youtubeRegex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
const match = url.match(youtubeRegex);
if (match) {
const videoId = match[1];
videoPreview.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>`;
} else {
videoPreview.innerHTML = 'Veuillez entrer un lien YouTube valide.';
}
}
// Conversion des sauts de ligne en balises <br />
function nl2br(str) {
return str.replace(/\n/g, '<br />');
}
// Validation et préparation du message pour l'envoi
function envoiMessage(form) {
// Mise à jour des aperçus avant la soumission
updateImagePreview();
updateVideoPreview();
// Validation des champs requis
const requiredFields = [
'psychologique_caractere', 'psychologique_emotions', 'psychologique_valeurs',
'physique_puissance', 'physique_adresse', 'physique_sens',
'identitaire_statut_familial', 'identitaire_revenus', 'identitaire_possessions',
'social_statut_social', 'social_education', 'social_ethnie',
'commentaires', 'specialites_autres_secrets'
];
for (let field of requiredFields) {
if (!form[field].value.trim()) {
document.getElementById("errormsg").innerText = `Vous devez remplir le champ ${field.replace(/_/g, ' ').toUpperCase()}.`;
return false;
}
}
// Génération du message
const imageUrl = form.imageURL.value.trim();
    var element = document.getElementById('t');
    var pseudo = element.options[ element.selectedIndex ].text;
const videoUrl = form.videoURL.value.trim();
function toggleContent(id) {
var contentDiv = document.getElementById(id).querySelector('.content');
if (contentDiv.style.display === 'none' || contentDiv.style.display === '') {
contentDiv.style.display = 'flex';
} else {
contentDiv.style.display = 'none';
}
}
let txt_message = `
${imageUrl ? `<div style="text-align: center; margin-left: 15em; border-top-left-radius: 19px; border-top-right-radius: 19px; max-width: 61%;" class="fond_fiche_predef"><div class="titre_predef">${pseudo ? `${pseudo}` : ''}</div>
${videoUrl ? ` <iframe width="560" height="315" src="https://www.youtube.com/embed/${videoUrl.match(/(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/)[1]}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
` : ''}
<img class="responsive-image" src="${imageUrl}"/>
</div>
` : ''}<div style="font-family: Caudex; padding: 0px; margin: 0; background-image: url(https://zupimages.net/up/24/29/dhid.jpg); background-repeat: repeat; box-shadow: 1px 1px 3px #000;"> <div style="display: flex; flex-wrap: wrap; gap: 10px;"> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #ED7D31; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect psychologique et moral </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Caractère</div> <input type="text" value="${form.psychologique_caractere.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Émotions</div> <input type="text" value="${form.psychologique_emotions.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Valeurs</div> <input type="text" value="${form.psychologique_valeurs.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_psychologique').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect physique </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Puissance</div> <input type="text" value="${form.physique_puissance.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Adresse</div> <input type="text" value="${form.physique_adresse.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Sens</div> <input type="text" value="${form.physique_sens.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_physique').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #ED7D31; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect identitaire </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Statut familial</div> <input type="text" value="${form.identitaire_statut_familial.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Revenus</div> <input type="text" value="${form.identitaire_revenus.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Possessions</div> <input type="text" value="${form.identitaire_possessions.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_identitaire').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 196px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect social et culturel </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Aisance</div> <input type="text" value="${form.social_statut_social.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Empathie</div> <input type="text" value="${form.social_education.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Culture</div> <input type="text" value="${form.social_ethnie.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_social').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> </div> <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;"> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; max-width: 205px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);margin-left:15em"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Capacités </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Capacité combat</div> <input type="text" value="${form.combat.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Capacité Magie</div> <input type="text" value="${form.magie.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Capacité d'Exploration</div> <input type="text" value="${form.exploration.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Capacité Monte</div> <input type="text" value="${form.monte.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Capacité Craft</div> <input type="text" value="${form.craft.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; max-width: 205px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Statistiques </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Point de vie</div> <input type="text" value="${form.point_de_vie.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Initiative</div> <input type="text" value="${form.initiative.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Point d'Action</div> <input type="text" value="${form.point_action.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Défense Passive</div> <input type="text" value="${form.defense_passive.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> </div></div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; margin-top: 20px; max-width: 95%; margin-left: 1em;"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: -30px; margin-top: -25px;"> Aspect Annexe </div> <div> <div> <div style="font-weight: bold; margin-bottom: 5px;">Spécialités autres & secret(s) :</div> <div style=" width: 100%; padding: 10px; box-sizing: border-box; font-size: 1em; border-radius: 5px; border: none; white-space: pre-wrap; background-color: #423030; color: #fff; word-wrap: break-word; /* Assure que les longs mots se cassent */ margin: 0; /* Évite les marges non désirées */ display: block; /* Permet à la boîte de s'ajuster à la hauteur du contenu */ "> ${nl2br(form.specialites_autres_secrets.value)} </div> </div> <div> <div style="font-weight: bold; margin-bottom: 5px;">Commentaires & Background :</div> <div style=" width: 100%; padding: 10px; box-sizing: border-box; font-size: 1em; border-radius: 5px; border: none; white-space: pre-wrap; background-color: #423030; color: #fff; word-wrap: break-word; /* Assure que les longs mots se cassent */ margin: 0; /* Évite les marges non désirées */ display: block; /* Permet à la boîte de s'ajuster à la hauteur du contenu */ "> ${nl2br(form.commentaires.value)} </div> </div> </div></div>
`;
form.message.value = txt_message;
form.subject.value = "Fiche de personnage " + pseudo;
return true;
}
</script>
</body>
</html>

Si ça marche , les explications suivront .


édit : 06.09.2024 / 13:51:33
le même souci qu'ici ?
https://forum.forumactif.com/t407363-mode-de-sujet-non-specifie-js#3395348

[Tite-May]

Après renseignement,

il semblerait qu'il soit impossible à FA de permettre semble-t-il une sorte de formulaire qui va chercher un API pour répondre dans un sujet déjà créé.
Le formulaire peut générer un nouveau sujet, mais pas une nouvelle réponse dans ce dit sujet, même en passant par le JS semble-t-il.

Je vais laisser ouvert ici si le sujet est intéressant ou non.

De mon côté, j'ai pris parti d'utiliser la fonction de fusion des sujets en attendant.

Hello !

Désolée j'ai loupé pas mal de messages.
Je t'assure qu'il est possible de répondre à un sujet déjà créé, nous en avions fait un tuto à l'époque ici [clique].
Et je viens de le tester à nouveau, ça marche parfaitement
Mais c'est ce que je te disais plus haut, il faut modifier correctement l'en-tête de ton code, pour mettre à jour comme il faut l'id du sujet.

Si tu le souhaites, je peux t'aider à revoir ton code pour que ça match, mais je te laisse d'abord voir avec la solution proposée par Scoubifitz

Bonne journée

PS : n'hésite pas à me taguer si tu me réponds

[Kaehlyth]

 hmmmm... je n'avais pas ce message lors du test ...

on réessaie ?

Code:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formulaire de Création de Fiche de Personnage</title>
<style> /* Style pour le formulaire */ body {font-family: Caudex;text-align: center;color: #fbd6c0;display: flex;justify-content: center;align-items: center;min-width: 97vw;background: linear-gradient(to left, rgb(127 167 134 / 11%), rgb(163 78 92 / 20%)), url(https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png);} .custom-background {width: 96em; margin: 0 auto; padding: 20px;background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png); background-size: cover;background-position: center;background-repeat: no-repeat; border-radius: 0px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); position: relative;overflow: hidden;display: flex;flex-direction: column;justify-content: flex-end;} .container {display: flex;gap: 10px;flex-wrap: nowrap;z-index: 1;} .aspect {background-color: #fff;border: 1.5px solid #ED7D31;border-radius: 5px;padding: 10px;width: 190px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);} .aspect-header {background-color: #ED7D31;color: #fff;font-weight: bold;padding: 10px;text-align: center;border-radius: 3px;margin-bottom: 10px;} .aspect-content {display: flex;flex-direction: column;} .sub-category {display: flex;align-items: center;margin-bottom: 10px;} .category-name {font-weight: bold;width: 120px;color: #ab583a;} input[type="text"] {width: 60px;margin-left: 10px;border: 1px solid #ED7D31;padding: 5px;box-sizing: border-box;text-align: center;font-size: 1em;background-color: #fff;} input[type="text"]:focus {border-color: #ED7D31;outline: none;} .large-box {background-color: #fff;border: 1.5px solid #ED7D31;border-radius: 5px;padding: 10px;width: calc(100% - 40px);box-shadow: 0 2px 5px rgba(0,0,0,0.1);margin-top: 20px;} .large-box-header {background-color: #795548;color: #fff;font-weight: bold;padding: 10px;text-align: center;border-radius: 3px;margin-bottom: 10px;} .large-box-content {display: flex;flex-direction: column;gap: 10px;} .large-box-content textarea {width: 100%;height: 100px;border: 1px solid #ED7D31;padding: 10px;box-sizing: border-box;font-size: 1em;border-radius: 5px;resize: vertical;} .form {margin: 10px auto;max-width: 87%;z-index: 1;} center {display: block;text-align: center;margin-top: 20px;} #errormsg {color: red;} .form-group {display: flex;align-items: center;margin-bottom: 10px;width: 37.2em;} .form-group label {flex: 1 0 0px;font-weight: bold;text-align: left;margin-right: 25px;} .form-group input[type="text"] {flex: 1;padding: 5px;border: 1px solid #ED7D31;border-radius: 3px;margin-left: -3em;} .submit-btn {background-color: #ED7D31;color: #fff;border: none;padding: 10px 20px;font-size: 1em;font-weight: bold;border-radius: 5px;cursor: pointer;box-shadow: 0 2px 5px rgba(0,0,0,0.1);transition: background-color 0.3s ease;} .submit-btn:hover {background-color: #db6c27;} .responsive-image {max-width: 650px;height: auto;} .video-preview iframe {width: 79%;margin-left: 7em;height: 60px;} .content {display: none;} .show-content {display: flex;} #characterForm {margin: 10px auto;width: 30.4em;padding: 20px;background-color: #f9f9f9;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border: 1px solid #ED7D31;} #characterForm .form-group {display: flex;align-items: center;margin-bottom: 10px;margin-left: -7.4em;} #characterForm .form-group label {flex: 0 1 150px;font-weight: bold;text-align: left;margin-right: 25px;color: #ab583a;} #characterForm .form-group select {flex: 1;padding: 5px;border: 1px solid #ED7D31;border-radius: 3px;width: 100%;appearance: none;background-color: #fff;color: #333;font-size: 16px;} .background-g {z-index: 3;position: absolute;left: -0.4em;top: 1em;clip-path: inset(0 0 0 0);} .background-d {z-index: 3;position: absolute;right: -0.7em;clip-path: inset(0 0 0 0);top: 1em;} .background-h {z-index;position: absolute;top: 0.2em;right: -1.7em;clip-path: inset(0 0 84% 4.2%);} .background-b {z-index: 1;position: absolute;bottom: -3.9em;right: 1em;clip-path: inset(0 0 0 24.8%);z-index: 3;} .background-hh {z-index;position: absolute;top: 0.2em;left: -2.7em;clip-path: inset(0 0 84% 4.2%);} .background-bb {z-index: 1;position: absolute;bottom: -3.9em;left: 4em;width: 54em;clip-path: inset(0 0 0 0);z-index: 3;} .sparkle {position: absolute;z-index:2;width: 0.2em;height: 0.5em;border-radius: 50%;pointer-events: none;opacity: 0.6;transform: translateY(100%);animation: sparkle-animation 1.5s ease-in-out infinite;background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent);} .base-theme .sparkle {background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent);z-index:2;} #qeel {position: absolute;top: 0;left: 0;width: 100%;z-index: 0;opacity: 0.5;} .sparkle {position: absolute;z-index:2;width: 0.2em;height: 0.5em;border-radius: 50%;pointer-events: none;opacity: 0.6;transform: translateY(100%);animation: sparkle-animation 1.5s ease-in-out infinite;background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent); /* Orange */} .base-theme .sparkle {background: radial-gradient(circle, rgba(255, 165, 0, 0.8), transparent);z-index:2; /* Orange */} /* Variations pour les positions et les délais d'animation */ .sparkle1 { left: 54%; bottom: 6.6em; animation-delay: 1.9s; } .sparkle2 { left: 30%; bottom: 6.6em; animation-delay: 0.3s; } .sparkle3 { left: 50%; bottom: 6.6em; animation-delay: 0.5s; } .sparkle4 { left: 70%; bottom: 6.6m; animation-delay: 0.9s; } .sparkle5 { left: 90%; bottom: 0.5em; animation-delay: 1.2s; } .sparkle6 { right: 24%;bottom: 6.6em; animation-delay: 0.2s; } .sparkle7 { left: 42%; bottom: 6.6em; animation-delay: 0.4s; } .sparkle8 { left: 35%; bottom: 6.6em; animation-delay: 1.4s; } .sparkle9 { left: 62%; bottom: 6.6em; animation-delay: 0.6s; } .sparkle10 { left: 81%; bottom: 2em; animation-delay: 1.9s; } /* Animation des éclats */ @keyframes sparkle-animation { 0% {transform: translateY(100%) scale(0.5);opacity: 0.6;} 100% {transform: translateY(-100%) scale(1);opacity: 0;}} </style>
</head>
<body><div class="custom-background">
 <img src="https://i.servimg.com/u/f55/16/14/86/50/colonn18.png" class="background-g"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn13.png" class="background-h"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn13.png" class="background-hh"/>
 <img src="https://i.servimg.com/u/f55/16/14/86/50/colonn17.png" class="background-d"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn14.png" class="background-b"/><img src="https://i.servimg.com/u/f55/16/14/86/50/colonn14.png" class="background-bb"/>
 <img src="https://i.servimg.com/u/f44/20/41/07/60/qeel1310.png" class="qeel" id="qeel"/>
 <div class="form">
 <form id="mainForm" action="/post" method="post" enctype="multipart/form-data" onsubmit="return envoiMessage(this)">
 <input type="hidden" name="mode" value="reply" />
<input type="hidden" name="topictype" value="0" checked="checked"/> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
 <input type="hidden" name="message" value="" />
 <input type="hidden" name="t" value="" />
 <!-- ID du sujet à répondre -->
 <!-- Champ pour entrer le titre du sujet -->
 <div id="characterForm">
 <div class="form-group">
 <label for="pseudo"></label>
 <select id="t" name="t">
 <option value="" selected='selected'>Votre pseudo</option>
 <option value="123">Chante brume</option>
 <option value="149">Manon</option>
 </select>
 </div>
 </div>
 <!-- Champ pour entrer un lien d'image -->
 <div id="characterForm">
 <div class="form-group">
 <label for="imageURL"></label>
 <input type="text" name="imageURL" id="imageURL" placeholder="Entrez l'URL de l'image" oninput="updateImagePreview()"/>
 </div>
 </div>
 <!-- Champ pour entrer un lien vidéo -->
 <div id="characterForm">
 <div class="form-group">
 <label for="videoURL"></label>
 <input type="text" name="videoURL" id="videoURL" placeholder="Entrez l'URL de la vidéo" oninput="updateVideoPreview()"/>
 </div>
 </div>
 <div class="video-preview" id="videoPreview">
 </div>
 <div class="image-preview" id="imagePreview" style="text-align-last: center;">
 </div>
 <div class="container">
 <!-- Chaque aspect avec ses champs -->
 <div class="aspect">
 <div class="aspect-header">
 Aspect psychologique et moral
 </div>
 <div class="aspect-content">
 <div class="sub-category">
 <div class="category-name">
 Caractère
 </div>
 <input type="text" name="psychologique_caractere" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Émotions
 </div>
 <input type="text" name="psychologique_emotions" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Valeurs
 </div>
 <input type="text" name="psychologique_valeurs" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Total
 </div>
 <input type="text" id="total_psychologique" readonly/>
 </div>
 </div>
 </div>
 <div class="aspect">
 <div class="aspect-header">
 Aspect physique
 </div>
 <div class="aspect-content">
 <div class="sub-category">
 <div class="category-name">
 Puissance
 </div>
 <input type="text" name="physique_puissance" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Adresse
 </div>
 <input type="text" name="physique_adresse" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Sens
 </div>
 <input type="text" name="physique_sens" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Total
 </div>
 <input type="text" id="total_physique" readonly/>
 </div>
 </div>
 </div>
 <div class="aspect">
 <div class="aspect-header">
 Aspect identitaire
 </div>
 <div class="aspect-content">
 <div class="sub-category">
 <div class="category-name">
 Statut familial
 </div>
 <input type="text" name="identitaire_statut_familial" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Revenus
 </div>
 <input type="text" name="identitaire_revenus" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Possessions
 </div>
 <input type="text" name="identitaire_possessions" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Total
 </div>
 <input type="text" id="total_identitaire" readonly/>
 </div>
 </div>
 </div>
 <div class="aspect">
 <div class="aspect-header">
 Aspect social et culturel
 </div>
 <div class="aspect-content">
 <div class="sub-category">
 <div class="category-name">
 Aisance
 </div>
 <input type="text" name="social_statut_social" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Empathie
 </div>
 <input type="text" name="social_education" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Culture
 </div>
 <input type="text" name="social_ethnie" placeholder="0" oninput="calculateTotals()"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Total
 </div>
 <input type="text" id="total_social" readonly/>
 </div>
 </div>
 </div>
 <div class="container">
 <!-- Section des Capacités -->
 <div class="aspect">
 <div class="aspect-header">
 Capacités
 </div>
 <div class="aspect-content">
 <div class="sub-category">
 <div class="category-name">
 C. combat
 </div>
 <input type="text" name="combat" placeholder="0"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 C. Magie
 </div>
 <input type="text" name="magie" placeholder="0"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 C. d'Exploration
 </div>
 <input type="text" name="exploration" placeholder="0"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 C. de Monte
 </div>
 <input type="text" name="monte" placeholder="0"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 C. de Craft
 </div>
 <input type="text" name="craft" placeholder="0"/>
 </div>
 </div>
 </div>
 <!-- Section des Statistiques -->
 <div class="aspect">
 <div class="aspect-header">
 Statistiques
 </div>
 <div class="aspect-content">
 <div class="sub-category">
 <div class="category-name">
 Point de vie
 </div>
 <input type="text" name="point_de_vie" placeholder="0"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Initiative
 </div>
 <input type="text" name="initiative" placeholder="0"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Point d'action par tour
 </div>
 <input type="text" name="point_action" placeholder="0"/>
 </div>
 <div class="sub-category">
 <div class="category-name">
 Défense passive
 </div>
 <input type="text" name="defense_passive" placeholder="0"/>
 </div>
 </div>
 </div>
 </div>
 <div style="width: 100%; text-align: center;">
 <span style="color: red; display: inline-block; margin: auto;" id="errormsg"></span>
 </div>
 </div>
 <div class="large-box">
 <div class="large-box-header">
 Spécialités autres & secret(s) :
 </div>
 <div class="large-box-content">
 <textarea name="specialites_autres_secrets" placeholder="Entrez ici vos spécialités autres et secrets..."></textarea>
 </div>
 </div>
 <div class="large-box">
 <div class="large-box-header">
 Background et Commentaires
 </div>
 <div class="large-box-content">
 <textarea name="commentaires" placeholder="Entrez ici vos commentaires... avec votre BG"></textarea>
 </div>
 </div>
 <div class="sparkle sparkle1">
 </div>
 <div class="sparkle sparkle2">
 </div>
 <div class="sparkle sparkle3">
 </div>
 <div class="sparkle sparkle4">
 </div>
 <div class="sparkle sparkle5">
 </div>
 <div class="sparkle sparkle6">
 </div>
 <div class="sparkle sparkle7">
 </div>
 <div class="sparkle sparkle8">
 </div>
 <div class="sparkle sparkle9">
 </div>
 <div class="sparkle sparkle10">
 </div>
 <center>
 <br/><label><span style="color:brown;font-family: sans-serif;text-shadow: 0 0 2px #340e6a;">Le titre du sujet sera créé automatiquement !</span></label><br/><br/>
 <img src="https://zupimages.net/up/24/28/7oin.png"/><br/><br/>
 <input type="submit" name="post" value="Créer !" class="submit-btn"/><br/>
 </center>
 </form>
 </div>
</div>
</body>
</html>
<script>
// Calcul des totaux pour chaque aspect
function calculateTotals() {
const aspects = ['psychologique', 'physique', 'identitaire', 'social'];
aspects.forEach(aspect => {
let total = 0;
const inputs = document.querySelectorAll(`input[name^="${aspect}"]`);
inputs.forEach(input => {
total += parseFloat(input.value) || 0;
});
document.getElementById(`total_${aspect}`).value = total;
});
}
// Mise à jour de l'aperçu de l'image
function updateImagePreview() {
const url = document.getElementById('imageURL').value;
const imagePreview = document.getElementById('imagePreview');
imagePreview.innerHTML = '';
if (url) {
const img = document.createElement('img');
img.src = url;
img.onload = () => {
imagePreview.appendChild(img);
};
img.onerror = () => {
imagePreview.innerHTML = 'Erreur de chargement de l\'image.';
};
}
}
// Prévisualisation de la vidéo YouTube
function updateVideoPreview() {
const url = document.getElementById('videoURL').value;
const videoPreview = document.getElementById('videoPreview');
const youtubeRegex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
const match = url.match(youtubeRegex);
if (match) {
const videoId = match[1];
videoPreview.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>`;
} else {
videoPreview.innerHTML = 'Veuillez entrer un lien YouTube valide.';
}
}
// Conversion des sauts de ligne en balises <br />
function nl2br(str) {
return str.replace(/\n/g, '<br />');
}
// Validation et préparation du message pour l'envoi
function envoiMessage(form) {
// Mise à jour des aperçus avant la soumission
updateImagePreview();
updateVideoPreview();
// Validation des champs requis
const requiredFields = [
'psychologique_caractere', 'psychologique_emotions', 'psychologique_valeurs',
'physique_puissance', 'physique_adresse', 'physique_sens',
'identitaire_statut_familial', 'identitaire_revenus', 'identitaire_possessions',
'social_statut_social', 'social_education', 'social_ethnie',
'commentaires', 'specialites_autres_secrets'
];
for (let field of requiredFields) {
if (!form[field].value.trim()) {
document.getElementById("errormsg").innerText = `Vous devez remplir le champ ${field.replace(/_/g, ' ').toUpperCase()}.`;
return false;
}
}
// Génération du message
const imageUrl = form.imageURL.value.trim();
    var element = document.getElementById('t');
    var pseudo = element.options[ element.selectedIndex ].text;
const videoUrl = form.videoURL.value.trim();
function toggleContent(id) {
var contentDiv = document.getElementById(id).querySelector('.content');
if (contentDiv.style.display === 'none' || contentDiv.style.display === '') {
contentDiv.style.display = 'flex';
} else {
contentDiv.style.display = 'none';
}
}
let txt_message = `
${imageUrl ? `<div style="text-align: center; margin-left: 15em; border-top-left-radius: 19px; border-top-right-radius: 19px; max-width: 61%;" class="fond_fiche_predef"><div class="titre_predef">${pseudo ? `${pseudo}` : ''}</div>
${videoUrl ? ` <iframe width="560" height="315" src="https://www.youtube.com/embed/${videoUrl.match(/(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/)[1]}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
` : ''}
<img class="responsive-image" src="${imageUrl}"/>
</div>
` : ''}<div style="font-family: Caudex; padding: 0px; margin: 0; background-image: url(https://zupimages.net/up/24/29/dhid.jpg); background-repeat: repeat; box-shadow: 1px 1px 3px #000;"> <div style="display: flex; flex-wrap: wrap; gap: 10px;"> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #ED7D31; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect psychologique et moral </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Caractère</div> <input type="text" value="${form.psychologique_caractere.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Émotions</div> <input type="text" value="${form.psychologique_emotions.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Valeurs</div> <input type="text" value="${form.psychologique_valeurs.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_psychologique').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect physique </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Puissance</div> <input type="text" value="${form.physique_puissance.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Adresse</div> <input type="text" value="${form.physique_adresse.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Sens</div> <input type="text" value="${form.physique_sens.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_physique').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 200px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #ED7D31; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect identitaire </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Statut familial</div> <input type="text" value="${form.identitaire_statut_familial.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Revenus</div> <input type="text" value="${form.identitaire_revenus.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Possessions</div> <input type="text" value="${form.identitaire_possessions.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_identitaire').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; min-width: 196px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Aspect social et culturel </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Aisance</div> <input type="text" value="${form.social_statut_social.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Empathie</div> <input type="text" value="${form.social_education.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Culture</div> <input type="text" value="${form.social_ethnie.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Total</div> <input type="text" value="${document.getElementById('total_social').value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> </div> <div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;"> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; max-width: 205px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);margin-left:15em"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Capacités </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Capacité combat</div> <input type="text" value="${form.combat.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Capacité Magie</div> <input type="text" value="${form.magie.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Capacité d'Exploration</div> <input type="text" value="${form.exploration.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Capacité Monte</div> <input type="text" value="${form.monte.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Capacité Craft</div> <input type="text" value="${form.craft.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; flex: 1; max-width: 205px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; height: 33px;"> Statistiques </div> <div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Point de vie</div> <input type="text" value="${form.point_de_vie.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Initiative</div> <input type="text" value="${form.initiative.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Point d'Action</div> <input type="text" value="${form.point_action.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> <div style="display: flex; align-items: center; margin-bottom: 10px;"> <div style="font-weight: bold; width: 120px;">Défense Passive</div> <input type="text" value="${form.defense_passive.value}" readonly style="border: 1px solid #ED7D31; padding: 5px; border-radius: 5px; width: calc(100% - 130px);"/> </div> </div> </div> </div></div> <div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover; border: 1.5px solid #ED7D31; border-radius: 5px; padding: 10px; margin-top: 20px; max-width: 95%; margin-left: 1em;"> <div style="background-color: #795548; color: #fff; font-weight: bold; padding: 10px; text-align: center; border-radius: 3px; margin-bottom: -30px; margin-top: -25px;"> Aspect Annexe </div> <div> <div> <div style="font-weight: bold; margin-bottom: 5px;">Spécialités autres & secret(s) :</div> <div style=" width: 100%; padding: 10px; box-sizing: border-box; font-size: 1em; border-radius: 5px; border: none; white-space: pre-wrap; background-color: #423030; color: #fff; word-wrap: break-word; /* Assure que les longs mots se cassent */ margin: 0; /* Évite les marges non désirées */ display: block; /* Permet à la boîte de s'ajuster à la hauteur du contenu */ "> ${nl2br(form.specialites_autres_secrets.value)} </div> </div> <div> <div style="font-weight: bold; margin-bottom: 5px;">Commentaires & Background :</div> <div style=" width: 100%; padding: 10px; box-sizing: border-box; font-size: 1em; border-radius: 5px; border: none; white-space: pre-wrap; background-color: #423030; color: #fff; word-wrap: break-word; /* Assure que les longs mots se cassent */ margin: 0; /* Évite les marges non désirées */ display: block; /* Permet à la boîte de s'ajuster à la hauteur du contenu */ "> ${nl2br(form.commentaires.value)} </div> </div> </div></div>
`;
form.message.value = txt_message;
form.subject.value = "Fiche de personnage " + pseudo;
return true;
}
</script>
</body>
</html>

Si ça marche , les explications suivront .


édit : 06.09.2024 / 13:51:33
le même souci qu'ici ?
https://forum.forumactif.com/t407363-mode-de-sujet-non-specifie-js#3395348

TROOOOOOOOOOOOOOPPPPP BIENG !
ça a marché, ça a posté à la suite !!

Comment avez-vous fait ?

par chattigre Mar 26 Juil 2022 - 12:17

Bonjour,

C'est le même problème que ici ? : https://forum.forumactif.com/t407302-choisir-une-couleur-fait-revenir-a-l-accueil

Pour l'erreur "Mode du sujet non spécifié" après prévisualisation, ça doit être causé par un rechargement de page intempestif. En effet on ne peut pas actualiser la page /post après prévisualisation car les paramètres ne sont pas conservés, ce qui donne si la page est actualisée sans les paramètres dans l'url "Mode du sujet non spécifié".

Oui, c'est la même chose, à part que je ne recharge pas "intempestivement", je tente simplement d'envoyer le message.


Néanmoins votre nouveau code fonctionne !

[Scoubifitz]

youpi!

normalement cette partie aurait dû suffire pour poster le message :

Code:

      <form id="mainForm" action="/post" method="post" enctype="multipart/form-data" onsubmit="return envoiMessage(this)">
      <input type="hidden" name="mode" value="reply" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="t" value="" />

bizarrement sur votre forum , j'ai dû forcer avec une ligne supplémentaire pour spécifier le mode de sujet :

Code:

 <form id="mainForm" action="/post" method="post" enctype="multipart/form-data" onsubmit="return envoiMessage(this)">
 <input type="hidden" name="mode" value="reply" />
<input type="hidden" name="topictype" value="0" checked="checked"/> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
 <input type="hidden" name="message" value="" />
 <input type="hidden" name="t" value="" />

Pour ce qui est de la liste d'options à compléter , je pense que vous avez repéré l'endroit :

Code:

 <select id="t" name="t">
 <option value="" selected='selected'>Votre pseudo</option>
 <option value="123">Chante brume</option>
 <option value="149">Manon</option>
 </select>

la "value" pour les topics ...

Comme vous avez une page sans le haut-bas du forum , pour le pseudo , j'ai modifié le script en rajoutant :

Code:

    var element = document.getElementById('t');
    var pseudo = element.options[ element.selectedIndex ].text;

ce qui permet de récupérer le texte de l'option sélectionnée .

... et en fin de script , j'ai remplacé :

Code:

form.subject.value = "Fiche de personnage " + form.pseudo.value ;

par:

Code:

form.subject.value = "Fiche de personnage " + pseudo ;

La solution de codage en BBcode ne sera pas possible , trop compliquée à gérer entre les styles embarqués dans le code , les styles du CSS du forum , et les styles d'un CSS externe.
De plus , rien ne garantira une stabilité à l'édition si on utilise des tableaux à la place des div's.

Problème tout de même résolu ?

[Kaehlyth]

Tout à fait, c'est bien résolu.

Je comprends que le bbcode sera fortement complexe. J'avais un ancien tableau en bbcode qui me convenait mais qui ne passait pas par formulaire.

A dire vrai j'ai repris de 0 avec ce formulaire parce que je n'étais pas capable de traduire les données de ma page HTML, vers un tableau bbcode. Je me permets de vous montrer le code :



Pour le forum, Toryudo a créé un JS permettant SCMPLAYER à exister en chargeant tout le forum via s page à lui.. peut être pour cela ?

[Scoubifitz]

Il est facile d'envoyer un code en BBcode par formulaire , ce n'est pas très différent du html .

Dans le BBcode , vous avez du style rattaché au tableau , et du CSS importé par "class" . (j'ai même l'impression que c'est copié d'une feuille excel)

Voudriez-vous me laisser un peu de temps pour tester une nouvelle page de formulaire ?

Pour le forum, Toryudo a créé un JS permettant SCMPLAYER à exister en chargeant tout le forum via s page à lui.. peut être pour cela ?

C'est pour cela que j'ai tenté de forcer l'envoi ... apparemment çà fonctionne !^^

[Kaehlyth]

Bien sûr.

Le HTML et le CSS sont plus beaux.
On fait ce que l'on veut par rapport au bbcode. Néanmoins s'il est possible de garder le pseudo, l'image, la musique et que la page envoie du bbcode en gardant sa structure actuelle (une fois posté, la structure d'image de fond, image, musique et calculs des totaux), peut être que ce sera plus pratique par la suite pour les membres ?

Je ne saurais dire mais je suis preneuse avec patience ! Merci beaucoup.

[Scoubifitz]

Dès que possible .

[Kaehlyth]

Et en effet, j'ai oublié de vous répondre concernant la manière dont j'avais créé ce tableau !

C'était sur un site qui copiait une création sous word, car j'avais créé ce tableau via word.
Il a ensuite converti en BBCODE ce tableau avec le CSS possiblement mis pour ce type de langage.

D'où très sûrement le bronx visuel du code.

Le site en question qui m'a permis de faire ça, mais étrangement, le bbcode n'est plus au goût du jour, ou bien je confond.
Toujours est-il que je l'ai utilisé !

=> https://divtable.com/table-styler/

[Scoubifitz]

J'ai nettoyé le BBcode .( très sûrement le bronx visuel )

Mais comme il me manque le CSS  (MsoTableGrid,MsoNormalTable) qui l'accompagne , j’aurai du mal à voir le rendu.

s'il est possible de garder le pseudo, l'image, la musique

Je ne voie pas où le placer dans le tableau ...

une fois posté, la structure d'image de fond, image, musique et calculs des totaux

idem...

[Kaehlyth]

J'ai nettoyé le BBcode .( très sûrement le bronx visuel )

Mais comme il me manque le CSS  (MsoTableGrid,MsoNormalTable) qui l'accompagne , j’aurai du mal à voir le rendu.

s'il est possible de garder le pseudo, l'image, la musique

Je ne voie pas où le placer dans le tableau ...

une fois posté, la structure d'image de fond, image, musique et calculs des totaux

idem...

Il n'y a pas de CSS accompagnant ce tableau BBCODE. D'où le pourquoi j'ai changé pour le code plus haut.

Au-dessus du tableau, en gardant la même structure que l'itération du code actuel.

et le calcul des totaux chacun vont normalement dans une case comme pour le premier code.

[Scoubifitz]

euh ... dans le tableau , les cases de droite servent à quoi ?
de plus , il faudra aussi rajouter les capacités et les statistiques ?
le tableau doit-il garder cette largeur , prendre toute la place dans un message ?

[Kaehlyth]

1 & 2 - Les cases à droite ont disparu du nouveau code par manque de visibilité sur la nouvelle manière d'aborder mon souhait...

Il s'agit de cases qui permettaient de mettre des compétences et des spécialisations liées à chaque aspect.
Il s'agit d'un système de jeu de rôle que j'ai créé... c'est pour ça que vous avez du mal à comprendre sans les explications, désolé.


3- Oui effectivement, je pense que les cases vides à droite peuvent être celles qui permettront au tableau de prendre toute la largeur.

La ligne "total", est en fait le calcul des 3 lignes dans chaque Aspect pour donner le % dudit aspect.
Par exemple : Caractère + émotion + valeur -> total % de l'aspect Psychologique et moral.



26 + 2 + 42 = 71% 

---

Concernant l'image, la musique et le titre , vous pouvez très bien gardez le HTML+CSS ! Seul le tableau est intéressant à pouvoir modifier en format "Source"


La partie envoyée en JS :

[Scoubifitz]

de plus , il faudra aussi rajouter les capacités et les statistiques ?

[Kaehlyth]

C'est répondu dans la réponse 1&2.
Si vous parlez précisément du background, c'est la case déjà existante en bas du tableau bbcode.

Les statistiques si vous parlez toujours de la case en bas avec des caractères, ce n'est pas à coder. Ce qu'il y a à reprendre est essentiellement déjà codé.

C'est à dire les statistiques qui font des totaux automatique. A savoir si c'est liable avec un tableau en bbcode... Je ne saurais dire.