Récupération des valeurs d'un Formulaire en JS

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Récupération des valeurs d'un Formulaire en JS

Message par Elizala le Sam 22 Mar 2014 - 15:27

Bonjour à toutes et à tous.

Mon forum se situe ici, c'est un phpbb2 et mon soucis est du surtout à un manque de connaissance en java script.

En suivant les instructions d'un tutoriel trouver ici j'ai créer le formulaire suivant qui poste automatiquement un nouveau sujets dans mon forum de présentation:

Code:

    <script type="text/javascript">
    function envoiMessage(form)
    {
      // Créer un message à partir des informations fournies
      var txt_message = "[b]Nom :[/b] " + form.nom.value + '\n'
                  + "[b]Race:[/b] " + form.race.value + '\n'
  + "[b]Arme :[/b] " + form.arme.value + '\n'
                  txt_message = txt_message + "[b]Votre Histoire[/b] : " + form.histoire.value + '\n';
      // Insère le texte construit dans le champ caché "message" du formulaire
      form.message.value = txt_message;
    }
    </script>

    <h3>Formulaire de présentation</h3>
    <form action="http://masseffect.monempire.net/posting.forum" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
    <input type="hidden" name="lt" value="0" />
    <input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
    <input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
    <input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
    <input type="hidden" name="f" value="3" /> <!--  ID du forum dans lequel le message sera posté-->
    <label for="titre">Titre du sujet :</label> <input type="text" name="subject" id="titre" value="" size="45" maxlength="60" />


    <label for="nom">Nom du Personnage: </label><input type="text" size="30" name="nom" id="nom" />

    <label for="race">Race: </label><select name="race" id="race"><option>Asari</option><option>Turien</option><option>Humain</option><option>Krogan</option><option>Galarien</option><option>butarien</option><option>Geth/Quarien</option><option>Vortcha</option></select>
  
   <label for="arme">Arme de départ: </label><select name="arme" id="arme"><option>arme1</option><option>arme2</option><option>arme3</option></select>

    <label for="histoire">Votre Histoire: </label>

    <textarea id="histoire" name="histoire"></textarea>

    <input type="submit" name="post" value="Envoyer" />
    </form>

Ce qui donne ceci une fois hébergé. Et le résultat est le suivant: Lien

Ce que je souhaite c'est aller au delà de cette présentation basique en liste pour obtenir quelque chose de plus visuel. J'aimerais donc récupérer ces valeurs et les placer à ma convenance dans un code html avec du css comme sur cette page. Les différentes valeurs se substitueraient aux textes mis en orange/jaune.

Le problème étant que je ne sais pas comment récupérer ces valeurs simplement. Si une bonne âme accepter de m'aider je lui en serais gré. Le code de la page finale est:

Code:
               <div class="fondprez">
 <div class="contenu-fiche-avatar">
 <div class="contenu-pouvoir">Nom du Personnage</div>
 <div class="contenu-fiche-avatar-image">
 <img src="http://image.noelshack.com/fichiers/2014/12/1395446819-projecteur-avatar.png" style="position:absolute; z-index:4" alt="" /><img src="http://image.noelshack.com/fichiers/2014/12/1395446034-elyana.png" style="position:relative; top:0px; z-index:2" alt="" />>
                    </div>
 </div>
<aside id="aside">
<div class="contenu-fiche-pouvoir">
 <div class="contenu-pouvoir">Pouvoirs</div><br/>
 <div class="contenu-pouvoir2">Projection</div><!-- lvl1 --><a class="info activer" href="#"><span>Fais tituber la cible</span></a><!-- lvl2 --><a class="info desactiver" href="#"><span>Renverse la cible</span></a><!-- lvl3 --><a class="info desactiver" href="#"><span>Projette la cible sur une courte distance</span></a><!-- lvl4 --><a class="info desactiver" href="#"><span>Peut projetter plusieurs cible à la fois</span></a><!-- lvl5 --><a class="info desactiver" href="#"><span>Balaie la zone devant le lanceur avec une force terrible</span></a>
 <div class="contenu-pouvoir2">Barrière</div><!-- lvl1 --><a class="info desactiver" href="#"><span>Protège des tirs légers pendant 5 secondes</span></a><!-- lvl2 --><a class="info desactiver" href="#"><span>Protège des tirs léger pendant 15 secondes</span></a><!-- lvl3 --><a class="info desactiver" href="#"><span>Protège des tirs lourd pendant 15 secondes</span></a><!-- lvl4 --><a class="info desactiver" href="#"><span>Protège des tirs lourd et des munitions spéciale pendant 15 secondes</span></a><!-- lvl5 --><a class="info desactiver" href="#"><span>Protège des explosions de grenades ou de tir de roquette non directe avant de se vider</span></a>
 <div class="contenu-pouvoir2">Lévitation</div><!-- lvl1 --><a class="info desactiver" href="#"><span>Soulève la cible quelques instants</span></a><!-- lvl2 --><a class="info desactiver" href="#"><span>Soulève et immobilise la cible</span></a><!-- lvl3 --><a class="info desactiver" href="#"><span>Soulève la cible en lui provoquant des dégats</span></a><!-- lvl4 --><a class="info desactiver" href="#"><span>Souléve et Projette violemment la cible sur le sol pouvant provoquer la mort</span></a><!-- lvl5 --><a class="info desactiver" href="#"><span>Souléve la cible avant de la projetter avec une telle force qu'elle renversera les éléments alentour</span></a>
 <div class="contenu-pouvoir2">Stase</div><!-- lvl1 --><a class="info desactiver" href="#"><span>Immobilise la cible</span></a><!-- lvl2 --><a class="info desactiver" href="#"><span>Immobilise la cible et la laisse étourdie</span></a><!-- lvl3 --><a class="info desactiver" href="#"><span>Peut immobiliser briévement plusieurs cibles</span></a><!-- lvl4 --><a class="info desactiver" href="#"><span>Immobilise plusieurs cibles</span></a><!-- lvl5 --><a class="info desactiver" href="#"><span>Immobilise les cibles et libére une décharge d'énergie avant de finir</span></a>
 <div class="contenu-pouvoir2">Onde de choc</div><!-- lvl1 --><a class="info desactiver" href="#"><span>Renverse les cible dans un rayon de 3 mètres</span></a><!-- lvl2 --><a class="info desactiver" href="#"><span>Renverse les cible dans un rayon de 6 mètres</span></a><!-- lvl3 --><a class="info desactiver" href="#"><span>Renverse les cible dans un rayon de 12 mètres</span></a><!-- lvl4 --><a class="info desactiver" href="#"><span>Renverse les cible dans un rayon de 20 mètres</span></a><!-- lvl5 --><a class="info desactiver" href="#"><span>Une vague d'énergie déferle et percute toute cible avec une force dévastatrice</span></a>
 </div>
 <div class="contenu-fiche-description" >
 <div class="contenu-pouvoir">Niveau 1:  0000/5000 xp<br/>Race: inconnu<br/>Classe: Biotique/Soldat/Ingénieur<br/>Statut: Trouffion</div>
 </div>
 
               </aside>
 
               <div class="contenu-fiche-avatar">
 <div class="contenu-fiche-equipement">
 <div class="contenu-fiche-equipement-texte">
 Equipement<br/>Armure:<br/>Arme:<br />Implant:
                    
 </div>                    
 </div>
 </div>
<aside id="includedContent">
<div class="contenu-fiche-histoire">
 <div class="histoire-texte">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
 </div>
 </div>
 
               </aside>
 </div>
 

Merci d'avance pour vos efforts et votre aide, et je répondrais à toutes vos questions si vous en avez.


Dernière édition par Elizala le Lun 24 Mar 2014 - 1:28, édité 1 fois

Elizala
Nouveau membre

Messages : 16
Inscrit(e) le : 21/02/2014

http://masseffect.monempire.net/
Elizala a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Récupération des valeurs d'un Formulaire en JS

Message par Self le Dim 23 Mar 2014 - 2:22

Bonjour,

Vous pouvez essayer comme cela:
Code:
<script type="text/javascript"> function envoiMessage(form){var txt_message="<div class='fondprez'><div class='contenu-fiche-avatar'><div class='contenu-pouvoir'>"+form.nom.value+"</div><div class='contenu-fiche-avatar-image'><img src='http://image.noelshack.com/fichiers/2014/12/1395446819-projecteur-avatar.png'style='position:absolute;z-index:4' alt='/><img src='http://image.noelshack.com/fichiers/2014/12/1395446034-elyana.png' style='position:relative;top:0px;z-index:2' alt='/></div></div><aside id='aside'><div class='contenu-fiche-pouvoir'><div class='contenu-pouvoir'>Pouvoirs</div><br/><div class='contenu-pouvoir2'>Projection</div><!--lvl1--><a class='info activer' href='#'><span>Fais tituber la cible</span></a><!--lvl2--><a class='info desactiver' href='#'><span>Renverse la cible</span></a><!--lvl3--><a class='info desactiver' href='#'><span>Projette la cible sur une courte distance</span></a><!--lvl4--><a class='info desactiver' href='#'><span>Peut projetter plusieurs cible à la fois</span></a><!--lvl5--><a class='info desactiver' href='#'><span>Balaie la zone devant le lanceur avec une force terrible</span></a><div class='contenu-pouvoir2'>Barrière</div><!--lvl1--><a class='info desactiver' href='#'><span>Protège des tirs légers pendant 5 secondes</span></a><!--lvl2--><a class='info desactiver' href='#'><span>Protège des tirs léger pendant 15 secondes</span></a><!--lvl3--><a class='info desactiver'href='#'><span>Protège des tirs lourd pendant 15 secondes</span></a><!--lvl4--><a class='info desactiver' href='#'><span>Protège des tirs lourd et des munitions spéciale pendant 15secondes</span></a><!--lvl5--><a class='info desactiver' href='#'><span>Protège des explosions de grenades ou de tir de roquette non directe avant de se vider</span></a><div class='contenu-pouvoir2'>Lévitation</div><!--lvl1--><a class='info desactiver' href='#'><span>Soulève la cible quelques instants</span></a><!--lvl2--><a class='info desactiver' href='#'><span>Soulève et immobilise la cible</span></a><!--lvl3--><a class='info desactiver' href='#'><span>Soulève la cible en lui provoquant des dégats</span></a><!--lvl4--><a class='info desactiver' href='#'><span>Souléve et Projette violemment la cible sur le sol pouvant provoquer la mort</span></a><!--lvl5--><a class='info desactiver' href='#'><span>Souléve la cible avant de la projetter avec une telle force q'elle renversera les éléments alentour</span></a><div class='contenu-pouvoir2'>Stase</div><!--lvl1--><a class='info desactiver' href='#'><span>Immobilise la cible</span></a><!--lvl2--><a class='info desactiver' href='#'><span>Immobilise la cible et la laisse étourdie</span></a><!--lvl3--><a class='info desactiver' href='#'><span>Peut immobiliser briévement plusieurs cibles</span></a><!--lvl4--><a class='info desactiver' href='#'><span>Immobilise plusieurs cibles</span></a><!--lvl5--><a class='info desactiver' href='#'><span>Immobilise les cibles et libére une décharge d'énergie avant de finir</span></a><div class='contenu-pouvoir2'>Onde de choc</div><!--lvl1--><a class='info desactiver' href='#'><span>Renverse les cible dans un rayon de 3 mètres</span></a><!--lvl2--><a class='info desactiver' href='#'><span>Renverse les cible dans un rayon de 6 mètres</span></a><!--lvl3--><a class='info desactiver' href='#'><span>Renverse les cible dans un rayon de 12 mètres</span></a><!--lvl4--><a class='info desactiver' href='#'><span>Renverse les cible dans un rayon de 20 mètres</span></a><!--lvl5--><a class='info desactiver' href='#'><span>Une vague d'énergie déferle et percute toute cible avec une force dévastatrice</span></a></div><div class='contenu-fiche-description'><div class='contenu-pouvoir'>Niveau 1: 0000/5000 xp<br/>Race: inconnu<br/>Classe: "+form.race.value+"<br/>Statut: Trouffion</div></div></aside><div class='contenu-fiche-avatar'><div class='contenu-fiche-equipement'><div class='contenu-fiche-equipement-texte'>Equipement<br/>Armure:<br/>Arme:"+form.arme.value+"<br/>Implant:</div></div></div><aside id='includedContent'><div class='contenu-fiche-histoire'><div class='histoire-texte'>"+form.histoire.value+"</div></div></aside></div>";form.message.value=txt_message;}</script>
 
<h3>Formulaire de présentation</h3>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="envoiMessage(this)">
    <input type="hidden" name="lt" value="0" />
    <input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
    <input type="hidden" name="auth[]" value="" />
    <input type="hidden" name="topictype" value="0" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
    <input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
    <input type="hidden" name="f" value="1" /> <!--  ID du forum dans lequel le message sera posté-->
    <label for="titre">Titre du sujet :</label> <input type="text" name="subject" id="titre" value="" size="45" maxlength="60" />
 
 
    <label for="nom">Nom du Personnage: </label><input type="text" size="30" name="nom" id="nom" />
 
    <label for="race">Race: </label><select name="race" id="race"><option>Asari</option><option>Turien</option><option>Humain</option><option>Krogan</option><option>Galarien</option><option>butarien</option><option>Geth/Quarien</option><option>Vortcha</option></select>
 
  <label for="arme">Arme de départ: </label><select name="arme" id="arme"><option>arme1</option><option>arme2</option><option>arme3</option></select>
 
    <label for="histoire">Votre Histoire: </label>
 
    <textarea id="histoire" name="histoire"></textarea>
 
    <input type="submit" name="post" value="Envoyer" />
</form>

Cordialement Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Récupération des valeurs d'un Formulaire en JS

Message par Elizala le Dim 23 Mar 2014 - 15:58

On se rapproche, excepter que le code quitte la zone de message sur ce lien, et que la div avec la valeur histoire à disparu, je vais essayer de retoucher à partir de ça, mais si tu as des conseil hésite pas ^^

Edit: Alors apparemment, les premières div ne sont pas prise en compte pour une raison que j'ignore, et c'est ça qui ferait que ça déborde.

Elizala
Nouveau membre

Messages : 16
Inscrit(e) le : 21/02/2014

http://masseffect.monempire.net/
Elizala a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Récupération des valeurs d'un Formulaire en JS

Message par Self le Dim 23 Mar 2014 - 17:08

Bonjour,

Je viens de voir une erreur de guillemet dans le script, le voilà corrigé, remplacez l'ancien par cleui-ci:
Code:
<script type="text/javascript"> function envoiMessage(form){var txt_message="<div class='fondprez'><div class='contenu-fiche-avatar'><div class='contenu-pouvoir'>"+form.nom.value+"</div><div class='contenu-fiche-avatar-image'><img src='http://image.noelshack.com/fichiers/2014/12/1395446819-projecteur-avatar.png'style='position:absolute;z-index:4' alt=''/><img src='http://image.noelshack.com/fichiers/2014/12/1395446034-elyana.png' style='position:relative;top:0px;z-index:2' alt=''/></div></div><aside id='aside'><div class='contenu-fiche-pouvoir'><div class='contenu-pouvoir'>Pouvoirs</div><br/><div class='contenu-pouvoir2'>Projection</div><!--lvl1--><a class='info activer' href='#'><span>Fais tituber la cible</span></a><!--lvl2--><a class='info desactiver' href='#'><span>Renverse la cible</span></a><!--lvl3--><a class='info desactiver' href='#'><span>Projette la cible sur une courte distance</span></a><!--lvl4--><a class='info desactiver' href='#'><span>Peut projetter plusieurs cible à la fois</span></a><!--lvl5--><a class='info desactiver' href='#'><span>Balaie la zone devant le lanceur avec une force terrible</span></a><div class='contenu-pouvoir2'>Barrière</div><!--lvl1--><a class='info desactiver' href='#'><span>Protège des tirs légers pendant 5 secondes</span></a><!--lvl2--><a class='info desactiver' href='#'><span>Protège des tirs léger pendant 15 secondes</span></a><!--lvl3--><a class='info desactiver'href='#'><span>Protège des tirs lourd pendant 15 secondes</span></a><!--lvl4--><a class='info desactiver' href='#'><span>Protège des tirs lourd et des munitions spéciale pendant 15secondes</span></a><!--lvl5--><a class='info desactiver' href='#'><span>Protège des explosions de grenades ou de tir de roquette non directe avant de se vider</span></a><div class='contenu-pouvoir2'>Lévitation</div><!--lvl1--><a class='info desactiver' href='#'><span>Soulève la cible quelques instants</span></a><!--lvl2--><a class='info desactiver' href='#'><span>Soulève et immobilise la cible</span></a><!--lvl3--><a class='info desactiver' href='#'><span>Soulève la cible en lui provoquant des dégats</span></a><!--lvl4--><a class='info desactiver' href='#'><span>Souléve et Projette violemment la cible sur le sol pouvant provoquer la mort</span></a><!--lvl5--><a class='info desactiver' href='#'><span>Souléve la cible avant de la projetter avec une telle force q'elle renversera les éléments alentour</span></a><div class='contenu-pouvoir2'>Stase</div><!--lvl1--><a class='info desactiver' href='#'><span>Immobilise la cible</span></a><!--lvl2--><a class='info desactiver' href='#'><span>Immobilise la cible et la laisse étourdie</span></a><!--lvl3--><a class='info desactiver' href='#'><span>Peut immobiliser briévement plusieurs cibles</span></a><!--lvl4--><a class='info desactiver' href='#'><span>Immobilise plusieurs cibles</span></a><!--lvl5--><a class='info desactiver' href='#'><span>Immobilise les cibles et libére une décharge d'énergie avant de finir</span></a><div class='contenu-pouvoir2'>Onde de choc</div><!--lvl1--><a class='info desactiver' href='#'><span>Renverse les cible dans un rayon de 3 mètres</span></a><!--lvl2--><a class='info desactiver' href='#'><span>Renverse les cible dans un rayon de 6 mètres</span></a><!--lvl3--><a class='info desactiver' href='#'><span>Renverse les cible dans un rayon de 12 mètres</span></a><!--lvl4--><a class='info desactiver' href='#'><span>Renverse les cible dans un rayon de 20 mètres</span></a><!--lvl5--><a class='info desactiver' href='#'><span>Une vague d'énergie déferle et percute toute cible avec une force dévastatrice</span></a></div><div class='contenu-fiche-description'><div class='contenu-pouvoir'>Niveau 1: 0000/5000 xp<br/>Race: inconnu<br/>Classe: "+form.race.value+"<br/>Statut: Trouffion</div></div></aside><div class='contenu-fiche-avatar'><div class='contenu-fiche-equipement'><div class='contenu-fiche-equipement-texte'>Equipement<br/>Armure:<br/>Arme:"+form.arme.value+"<br/>Implant:</div></div></div><aside id='includedContent'><div class='contenu-fiche-histoire'><div class='histoire-texte'>"+form.histoire.value+"</div></div></aside></div>";form.message.value=txt_message;}</script>

C'est cette erreur de guillement qui devais poser problème Wink .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Récupération des valeurs d'un Formulaire en JS

Message par Elizala le Lun 24 Mar 2014 - 0:31

Une dernière chose et j’arrête de t’embêter car ça marche presque comme je veux, c'est juste une question. Je suis obligée de laisser tout le script en une ligne ? Je veux dire que je vois que tout est coller, est-il possible de sauter des lignes dans le code pour le rendre plus lisible dans mon éditeur ? ^^"

J'ai bien essayer toute seule mais cela ne fonctionne plus après alors je préfère demander.


Dernière édition par Elizala le Lun 24 Mar 2014 - 1:18, édité 2 fois

Elizala
Nouveau membre

Messages : 16
Inscrit(e) le : 21/02/2014

http://masseffect.monempire.net/
Elizala a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Récupération des valeurs d'un Formulaire en JS

Message par Self le Lun 24 Mar 2014 - 1:15

Bonsoir,

Vous pouvez le décompresser pour vous pouvoir le changer plus facilement à l'avenir et le sauvegarder dans un fichier, mais pour le fonctionnement il faut en effet qu'il soit minimisé (sur une ligne).

Cordialement Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Récupération des valeurs d'un Formulaire en JS

Message par Elizala le Lun 24 Mar 2014 - 1:18

Alors j'ai réussi à comprendre comment rendre le code lisible dans notepad++ avec les " et +, mais par contre quand je valide le formulaire toute les div se retrouvent coller à nouveau. J'ai tenté de faire des saut de ligne avec le '\n' du script de base, mais pour une raison que j'ignore ça ne marche pas, aurais-tu une idée ?

EDIT: C'est bon j'ai réussi! Je te remercie sincèrement de ton aide, je passe le sujet en résolu.

Elizala
Nouveau membre

Messages : 16
Inscrit(e) le : 21/02/2014

http://masseffect.monempire.net/
Elizala a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Récupération des valeurs d'un Formulaire en JS

Message par Self le Lun 24 Mar 2014 - 1:31

Le \n sert à faire un retour à la ligne dans le document et non dans le code javascript.

Il n'y a pas de quoi bonne soirée Wink .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum