Formulaire de génération de code qui n'est pas fonctionnel

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

Résolu Formulaire de génération de code qui n'est pas fonctionnel

Message par Lunay le Lun 9 Juin 2014 - 22:15

Hello, hello Smile
Merci de prendre le temps de me lire ^^

Alors j'ai suivi un super tutoriel disponible ici : http://www.school-of-pub.net/t8156-creer-un-formulaire-qui-genere-un-code, afin de créer un formulaire qui me permettrait de générer un code pour un formulaire de présentation.

En gros, les membres remplissent le formulaire, un code est généré, puis ils le copient/collent dans un nouveau message sans avoir à se prendre la tête pour le codage ^^
Enfin, en théorie.

J'ai bien l'impression d'avoir suivi toutes les instructions, et j'ai beau chercher des erreurs dans ma page html, je n'en trouve pas. J'ai essayé d'utiliser le haut et le bas de mon forum, de ne pas l'utiliser, j'ai autorisé les formulaires via mon PA, mais ça ne fonctionne toujours pas : quand je clique sur "générer le code", il ne se passe rien, même pas le message d'alerte au cas où l'un des champs ne seraient pas rempli Sad

Voici le code complet de ma page HTML :

Code:
<html>
<head>
   <title>Le titre de ma page</title>
      
<style type="text/css">
  
/* Le css sera ici */
  
</style>

<script type="text/javascript">

<!--  //          
   function verif(LeForm){
      var prenomsuividunom = LeForm.prenomsuividunom.value;
      var prenomdupersonnage = LeForm.prenomdupersonnage.value;
      var imagedupersonnage = LeForm.imagedupersonnage.value;
      var encoreleprenom = LeForm.encoreleprenom.value;
      var uniquementlenom = LeForm.uniquementlenom.value;
      var agedupersonnage = LeForm.agedupersonnage.value;
      var ascendancedupersonnage = LeForm.ascendancedupersonnage.value;
      var autresdetailsdupersonnage = LeForm.autresdetailsdupersonnage.value;
      var physiquedupersonnage = LeForm.physiquedupersonnage.value;
      var caracteredupersonnage = LeForm.caracteredupersonnage.value;
      var histoiredupersonnage = LeForm.histoiredupersonnage.value;
  
   var ok = true;

   if (prenomsuividunom == ""){
      ok = false;
        alert("Tu dois entrer le prénom et le nom de ton personnage.");  
   }  
  
   if (prenomdupersonnage == ""){
      ok = false;
        alert("Tu dois entrer le prénom de ton personnage.");  
   }  
  
  if (imagedupersonnage == ""){
      ok = false;
        alert("Tu dois mettre un lien vers une image représentant ton personnage, de 200 pixels de largeurs par 400 pixels de hauteur.");  
   }  
  
  if (encoreleprenom == ""){
      ok = false;
        alert("Tu dois encore entrer le prénom de ton personnage");  
   }  
  
  if (uniquementlenom == ""){
      ok = false;
        alert("Tu dois saisir le nom de ton personnage");  
   }  
  
  if (agedupersonnage == ""){
      ok = false;
        alert("Tu dois préciser l'âge de ton personnage");  
   }  
  
  if (ascendancedupersonnage == ""){
      ok = false;
        alert("Tu as oublié de préciser quelle est l'ascendance de ton personnage");  
   }  
  
  if (ok){
      var contenu = "<h1 id=\"h1_fpd\">"+prenomsuividunom+"</h1><div id=\"mfiche_predefini\"><div id=\"info_avatar\"><div id=\"fp_avatar\">
<h2>"+prenomdupersonnage+"</h2>
<img src=\""+imagedupersonnage+"\" alt=\"Avatar\" />
</div>
<h3 id=\"h3p_info\">Identité</h3><div id=\"p_informations\"><p>
  [b]Prénom :[/b] "+encoreleprenom+"
[b]Nom :[/b] "+uniquementlenom+"
[b]Age :[/b] "+agedupersonnage+"
[b]Ascendance :[/b] "+ascendancedupersonnage+"
[b]Autres :[/b] "+autresdetailsdupersonnage+"
</p></div>
</div>
<h3 class=\"h3_divers\">Physique</h3><div class=\"divers\"><p> "+physiquedupersonnage+"
</p></div>
<h3 class=\"h3_divers\">Caractère</h3><div class=\"divers\"><p>"+caracteredupersonnage+"</p></div>
<h3 class=\"h3_divers\">Histoire</h3><div class=\"divers\"><p> "+histoiredupersonnage+" </p></div></div>";
      document.getElementById("code_genere").innerHTML = ""+contenu+"";
      document.getElementById("apercu").innerHTML = ""+contenu+"";  
   }  
   }

//-->
   </script>


</head>
<body>

<!-- Le contenu sera ici -->

  <body>
<div id="formulaire">

   <h1>Faire sa Fiche de Personnage</h1>

   <h2>Merci de compléter le formulaire suivant en suivant correctement les instructions :</h2>
  
  <form action="#" method="post" id="rempli">
      <center><label>Prénom suivi du nom de ton personnage :</label>  </center>
       <center> <input type="text" name="prenomsuividunom" size="30" maxlength="200"/> </center>
    <br /><br />
    <center>  <label>Uniquement le prénom de ton personnage :</label> </center>
     <center>  <input type="text" name="prenomdupersonnage" size="30" maxlength="200"/></center>
    <br /> <br />
    <center><label> Image représentant ton personnage (200x400px obligatoirement) :</label> </center>
      <center>  <input type="text" name="imagedupersonnage" size="30" maxlength="200"/></center>
        <br /><br />
       <center> <label> Ecris de nouveau ici uniquement le PRENOM de ton personnage :</label></center>
    <center>  <input type="text" name="encoreleprenom" size="30" maxlength="200"/></center>
        <br /><br />
   <center> <label> Ecris ici uniquement le NOM de ton personnage :</label></center>
      <center>  <input type="text" name="uniquementlenom" size="30" maxlength="200"/></center>
        <br /><br />
       <center> <label> Âge de ton personnage :</label></center>
        <center><input type="text" name="agedupersonnage" size="30" maxlength="200"/></center>
        <br/><br />
       <center> <label> Ascendence de ton personnage (né-moldu, sang-mêlé, sang-pur, mettre "inconnue" si ton personnage ne la connait pas ou le nom de ton espèce si ton personnage est un gobelin ou autre créature ne possédant pas de baguette magique):</label>
    <input type="text" name="ascendancedupersonnage" size="30" maxlength="200"/> </center>
    <br />
    <label> Autres (tout ce que tu souhaites dire sur ton identité qui ne figure pas déjà dans la fiche du personnage) :</label>
    <center><textarea cols="60" rows="10" name="autresdetailsdupersonnage"></textarea></center>
    <label> Décrire ici le physique de ton personnage. Taille, corpulence, teint, cheveux, yeux, visage en général, caractéristiques (cicatrices, tâches de rousseurs, grains de beauté...) vêtements portés etc. Plus c'est complet, mieux c'est ! :</label>
    <center><textarea cols="120" rows="10" name="physiquedupersonnage"></textarea></center>
    <label>  Décrire ici le caractère, le comportement, le tempérament de ton personnage. Mettre ses qualités, ses défauts, ses forces, ses faiblesses, tout ce qui se rapporte à la mentalité de ton personnage. :</label>
    <center><textarea cols="120" rows="10" name="caracteredupersonnage"></textarea></center>
    <label>  Mettre ici l'histoire de ton personnage. Avec qui a-t-il grandit, comment a-t-il découvert qu'il était un sorcier, le monde de la magie, a-t-il des frères et soeurs, était-il heureux dans son enfance, quel est son métier, qu'à-t-il fait comme étude? Que faisait-il jusqu'à présent etc. Peu importe la longueur du texte, il faut vraiment que ce soit complet pour que tout le monde comprenne le background dans lequel ton personnage a évolué jusqu'à maintenant. :</label>
    <center><textarea cols="120" rows="10" name="histoiredupersonnage"></textarea></center>
      
<input type="button" onClick="verif(this.form)" value="Générer le code" />
   </form>
  
  
      <h2>Aperçu du rendu :</h2>
 <div id="apercu"> </div>
   <form>
      <label>Voici le code à copier/coller</label> <input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code_genere').select();">

      <textarea cols="60" rows="10" id="code_genere" readonly></textarea>
   </form>
      
</div>

</body>
</html>

Si vous pouviez m'aider à comprendre ce que j'ai mal fais, je vous en serez vraiment très reconnaissante !
Merci beaucoup pour vos éventuelles réponses,
Lunay'


Dernière édition par Lunay le Mar 10 Juin 2014 - 1:27, édité 1 fois

Lunay
***

Féminin
Messages : 105
Inscrit(e) le : 16/11/2011

http://pottermore-betatest.harrypotterrpg.fr/
Lunay a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire de génération de code qui n'est pas fonctionnel

Message par Scoubifitz le Mar 10 Juin 2014 - 1:22

bonsoir,

L'erreur principale se trouve au niveau de la variable "contenu" ... qui a été mise sur plusieurs lignes sans les fermer.
J'ai modifié le script pour que les "alert" n'apparaissent que pour la case qui n'est pas remplie dans l'ordre , et non toutes les cases .

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Le titre de ma page</title>
<style type="text/css">

/* Le css sera ici */

</style>

<script type="text/javascript">
function verif(LeForm)
{
var prenomsuividunom = LeForm.prenomsuividunom.value;
var prenomdupersonnage = LeForm.prenomdupersonnage.value;
var imagedupersonnage = LeForm.imagedupersonnage.value;
var encoreleprenom = LeForm.encoreleprenom.value;
var uniquementlenom = LeForm.uniquementlenom.value;
var agedupersonnage = LeForm.agedupersonnage.value;
var ascendancedupersonnage = LeForm.ascendancedupersonnage.value;
var autresdetailsdupersonnage = LeForm.autresdetailsdupersonnage.value;
var physiquedupersonnage = LeForm.physiquedupersonnage.value;
var caracteredupersonnage = LeForm.caracteredupersonnage.value;
var histoiredupersonnage = LeForm.histoiredupersonnage.value;

if (prenomsuividunom == ""){
alert("Tu dois entrer le prénom et le nom de ton personnage.");
return false;
}

else if (prenomdupersonnage == ""){
alert("Tu dois entrer le prénom de ton personnage.");
return false;
}

else if (imagedupersonnage == ""){
alert("Tu dois mettre un lien vers une image représentant ton personnage,\n"
+"de 200 pixels de largeurs par 400 pixels de hauteur.");
return false;
}

else if (encoreleprenom == ""){
alert("Tu dois encore entrer le prénom de ton personnage");
return false;
}

else if (uniquementlenom == ""){
alert("Tu dois saisir le nom de ton personnage");
return false;
}

else if (agedupersonnage == ""){
alert("Tu dois préciser l'âge de ton personnage");
return false;
}

else if (ascendancedupersonnage == ""){
alert("Tu as oublié de préciser quelle est l'ascendance de ton personnage");
return false;
}

else
{
var contenu = "<h1 id=\"h1_fpd\">"+prenomsuividunom+"</h1>"
+"<div id=\"mfiche_predefini\"><div id=\"info_avatar\"><div id=\"fp_avatar\">\n"
+"<h2>"+prenomdupersonnage+"</h2>\n"
+"<img src=\""+imagedupersonnage+"\" alt=\"Avatar\" />\n"
+"</div>\n"
+"<h3 id=\"h3p_info\">Identité</h3><div id=\"p_informations\"><p>\n"
+"[b]Prénom :[/b] "+encoreleprenom+"\n"
+"[b]Nom :[/b] "+uniquementlenom+"\n"
+"[b]Age :[/b] "+agedupersonnage+"\n"
+"[b]Ascendance :[/b] "+ascendancedupersonnage+"\n"
+"[b]Autres :[/b] "+autresdetailsdupersonnage+"\n"
+"</p></div>\n"
+"</div>\n"
+"<h3 class=\"h3_divers\">Physique</h3>"
+"<div class=\"divers\"><p> "+physiquedupersonnage+"\n"
+"</p></div>\n"
+"<h3 class=\"h3_divers\">Caractère</h3>"
+"<div class=\"divers\"><p>"+caracteredupersonnage+"</p></div>\n"
+"<h3 class=\"h3_divers\">Histoire</h3>"
+"<div class=\"divers\"><p> "+histoiredupersonnage+" </p></div></div>";
document.getElementById("code_genere").value = contenu;
document.getElementById("apercu").innerHTML = contenu;
return true;
}
}
</script>

</head>
<body>

<!-- Le contenu sera ici -->

<div id="formulaire">

<h1>Faire sa Fiche de Personnage</h1>

<h2>Merci de compléter le formulaire suivant en suivant correctement les instructions :</h2>

<form action="#" method="post" id="rempli">
<center><label>Prénom suivi du nom de ton personnage :</label>  </center>
<center> <input type="text" name="prenomsuividunom" size="30" maxlength="200"/> </center>
<br /><br />
<center>  <label>Uniquement le prénom de ton personnage :</label> </center>
<center>  <input type="text" name="prenomdupersonnage" size="30" maxlength="200"/></center>
<br /> <br />
<center><label> Image représentant ton personnage (200x400px obligatoirement) :</label> </center>
<center>  <input type="text" name="imagedupersonnage" size="30" maxlength="200"/></center>
<br /><br />
<center> <label> Ecris de nouveau ici uniquement le PRENOM de ton personnage :</label></center>
<center>  <input type="text" name="encoreleprenom" size="30" maxlength="200"/></center>
<br /><br />
<center> <label> Ecris ici uniquement le NOM de ton personnage :</label></center>
<center>  <input type="text" name="uniquementlenom" size="30" maxlength="200"/></center>
<br /><br />
<center> <label> Âge de ton personnage :</label></center>
<center><input type="text" name="agedupersonnage" size="30" maxlength="200"/></center>
<br/><br />
<center> <label> Ascendence de ton personnage (né-moldu, sang-mêlé, sang-pur, mettre "inconnue" si ton personnage ne la connait pas ou le nom de ton espèce si ton personnage est un gobelin ou autre créature ne possédant pas de baguette magique):</label>
<input type="text" name="ascendancedupersonnage" size="30" maxlength="200"/> </center>
<br />
<label> Autres (tout ce que tu souhaites dire sur ton identité qui ne figure pas déjà dans la fiche du personnage) :</label>
<center><textarea cols="60" rows="10" name="autresdetailsdupersonnage"></textarea></center>
<label> Décrire ici le physique de ton personnage. Taille, corpulence, teint, cheveux, yeux, visage en général, caractéristiques (cicatrices, tâches de rousseurs, grains de beauté...) vêtements portés etc. Plus c'est complet, mieux c'est ! :</label>
<center><textarea cols="120" rows="10" name="physiquedupersonnage"></textarea></center>
<label>  Décrire ici le caractère, le comportement, le tempérament de ton personnage. Mettre ses qualités, ses défauts, ses forces, ses faiblesses, tout ce qui se rapporte à la mentalité de ton personnage. :</label>
<center><textarea cols="120" rows="10" name="caracteredupersonnage"></textarea></center>
<label>  Mettre ici l'histoire de ton personnage. Avec qui a-t-il grandit, comment a-t-il découvert qu'il était un sorcier, le monde de la magie, a-t-il des frères et soeurs, était-il heureux dans son enfance, quel est son métier, qu'à-t-il fait comme étude? Que faisait-il jusqu'à présent etc. Peu importe la longueur du texte, il faut vraiment que ce soit complet pour que tout le monde comprenne le background dans lequel ton personnage a évolué jusqu'à maintenant. :</label>
<center><textarea cols="120" rows="10" name="histoiredupersonnage"></textarea></center>

<input type="button" onClick="verif(this.form)" value="Générer le code" />
</form>

<h2>Aperçu du rendu :</h2>
<div id="apercu"> </div>
<form>
<label>Voici le code à copier/coller</label>
<input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code_genere').select();">

<textarea cols="60" rows="10" id="code_genere" readonly></textarea>
</form>

</div>

</body>
</html>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Formulaire de génération de code qui n'est pas fonctionnel

Message par Lunay le Mar 10 Juin 2014 - 1:27

Vous êtes génial !!
Un très grand merci à vous qui encore une fois prenez le temps de m'aider Smile
Je passe donc ce sujet en résolu ^^
Lunay'

Lunay
***

Féminin
Messages : 105
Inscrit(e) le : 16/11/2011

http://pottermore-betatest.harrypotterrpg.fr/
Lunay 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