Bouton générer le code et sélectionner

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

Bouton générer le code et sélectionner

Message par Melissandre Pearce le Mar 6 Sep 2016 - 19:35

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://magical-forest.forumactif.com

Description du problème

Bonjour,
il y a un moment j'ai créer un formulaire facile à remplir pour les membres qui ne savent pas trop c'est quoi un code. Donc ils n'ont qu'à remplir les cases, générer le code et sélectionner le code puis finalement coller dans un nouveau sujet. Mais depuis un moment ce bouton GÉNÉRER ne fonctionne plus. Alors je vous mets ici le code:

Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Formulaire d'essaie</title><style type="text/css">

body{
background-color: #000;
font-family: Arial;
font-style: normal;
color: #574F41;
font-size: 12px;
background-position: top center!important; 
width: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-attachment: scroll;
}

.prenom{
color:#000000;
}

.fond{
background: #080E1F;
width: 770px;
margin: 41px auto 20px auto;
padding: 20px 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
box-shadow:0px 0px 5px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.7);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.7);
text-align:justify;
}

.commentaires{
width: 670px;
margin: 10px auto 15px auto;;
padding-bottom: 15px;
border-bottom: 3px dotted #949267;
text-align: justify;
}

.titre_haut{
width: 100%;
text-align: center;
color: #8A3232;
font-family: ShangriLaNFSmallCaps;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 3px;
font-weight: lighter!important;
text-shadow: 1px 1px 1px #353430;
margin-bottom: 15px;
}

input,textarea, select {
background-color: #060814!important;
border: 1px solid rgba(46,40,29,0.6);
color: #574F41;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 5px;}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #574F41;}

input,textarea:focus {
outline-style: none;}

label, i{
font-family: times new roman;
text-transform: uppercase;
font-size: 8.5px;
letter-spacing: 1px;
font-weight: lighter!important;
color: #574B2C;
opacity: 0.6;}

.correction label{
font-family: Arial;
font-style: normal;
font-size: 12px;
text-transform: none;
letter-spacing: 0px;}

.correction input{
padding: 1px 0px;
font-size: 9px;
text-align: center;
margin: 1.5px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;}

/* fiche présentation élèves créer par Melissandre Pearce /*
.cadre-prez{
  background:#010101;
  width:500px;
  height: auto;
  margin: auto;
}

.titre-prez{
  font-family:'Megrim', cursive;
  font-size:42px;
  padding:;
  color:#3BB07E;
}

.cita-prez{
  font-family:'indie flower', cursive;
  font-size:26px;
  padding:;
  color:#e6e6e6;
}

.sous-prez{
  font-family:'indie flower', cursive;
  font-size: 18px;
  padding:;
  color:#3bb07e;
  text-decoration:underline;
}

.contenu-prez{
  background:#3b3240;
  font-family: rosario, helvetica, arial;
  font-size:14px;
  margin:-25 auto 0 auto;
  position: relative;
  display: block;
  z-index:1;
  width:400px;
  heith:auto;
  padding:10px;
  color:#FFF;
  border-radius:3px;
  text-align:justify;
}

.infos-prez{
  font-family:'indie flower', cursive;
  font-size:14px;
  font-style: italic;
  padding:;
  color:#3bb07e;
}

.img-prez{
 
  width:500px;
  height:200px;
}

.statutpv{
  text-shadow: 1px 1px 1px #000000;
  font-family: century gothic;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  font-size: 11.5px;
  margin-top: -6px;
  color: #757A7A;
}
/* fin de la fiche de présentation **********************/
</style><script type="text/javascript">


<!--
 
function verif(LeForm){

  var avatar= LeForm.avatar.value;
  var prénom= LeForm.prénom.value;
  var nom= LeForm.nom.value;
  var citation= LeForm.citation.value;
  var informationsprivés= LeForm.informationsprivés.value;
  var naissance= LeForm.naissance.value;
  var âge= LeForm.âge.value;
  var origine= LeForm.origine.value;
  var scolaire= LeForm.scolaire.value;
  var baguette= LeForm.baguette.value;
  var patronus= LeForm.patronus.value;
  var animal= LeForm.animal.value;
  var connaitre= LeForm.connaitre.value;
  var réel= LeForm.réel.value;
  var pseudo= LeForm.pseudo.value;
  var pays= LeForm.pays.value;
  var trouvé= LeForm.trouvé.value;
  var code= LeForm.code.value;
  var autres= LeForm.autres.value;
 
 
  var ok = true;
 
  if (prénom== ""){
      ok = false;
        alert("Veuillez entrer un prénom"); 
  } 
 
  if (nom== ""){
      ok = false;
        alert("Veuillez entrer un nom de famille"); 
  } 



 
  if (ok){
var contenu = "<center><img src=\""+avatar+"\" class=\"img-prez\"><div class=\"cadre-prez\"><div class=\"titre-prez\">" +prénom+ " " +nom+ "</div><span class=\"cita-prez\">" +cita+ "<span class=\"titre1\">"+maison+"</span><br /><img src=\""+avatar2+"\" class=\"img_msg\"><img src=\""+avatar3+"\" class=\"img_msg\"><img src=\""+avatar4+"\" class=\"img_msg\"><br /> <br /><center><div class=\"statutpv\">Statut: "+choixstatut+"</div></center><br /><center><div class=\"texte\"><span class=\"titre2\">Date de naissance: </span>"+naissance+"<br /><span class=\"titre2\">Âge: </span>" +age+ "<br /><span class=\"titre2\">Type de sang: </span>" +sang+ "<br /><span class=\"titre2\">Option de cours: </span> " +option+ "<br /><span class=\"titre2\">Quidditch: </span> " +quidditch+ "<br /><span class=\"titre2\">Club & assossiation: </span> " +club+ "<br /><span class=\"titre2\">Localisation magique: </span>"+habitation+"<br /><span class=\"titre2\">Année d’études: </span>"+études+"<br /></div></center><br /><center><div class=\"texte\"><span class=\"titre2\">Taux de popularité: </span>"+popularité+"<br /><span class=\"titre2\">Baguette: </span>"+baguette+"<br /><span class=\"titre2\">Animal de compagnie:</span>"+animal+"<br /><span class=\"titre2\">Patronus avancé: </span>"+patronus+"<br /><span class=\"titre2\">Épouvantard: </span>"+épouvantard+"<br /><span class=\"titre2\">Temps libre & loisir: </span>"+temps+"<br /><span class=\"titre2\">Bièreaubeurre ou Wisky pur: </span>"+bière+"<br /><span class=\"titre2\">Madame Pieddodu ou Madame Pomfresh: </span>"+madame+"<br /><div style=\"text-align:right;font-size:9px;\">Fait par CW</div><br /></div></center></div></center>";
      document.getElementById("code_genere").innerHTML = ""+contenu+"";
      document.getElementById("apercu").innerHTML = ""+contenu+""; 
  } 
}
-->
</script>
<center>
   <div id="formulaire">
      <div class="fond"><center><img style="width:95%; height:auto;" src="http://i55.servimg.com/u/f55/18/65/31/00/a0525410.jpg"></center><br />
         <h2 class="titre_haut">
             Veuillez remplir le formulaire suivant :
         </h2>
         <center>
            <form action="#" method="post" id="champs" name="form_test">
               <table style="width: 92%;" border="0" cellpadding="0" cellspacing="15">
                  <tbody>
                     <tr>
                        <td style="width: 50%;" align="center">
                           <label>Prénom</label> :<br /><input maxlength="200" size="30" name="prénom" type="text" />
                        </td>
                        <td style="width: 50%;" align="center"><label>Nom</label> :<br /><input maxlength="200" size="30" name="nom" type="text" />
                        </td>
                     </tr>
                     <tr>
                        <td style="width: 50%;" align="center"><label>Maison</label> :<br /><input maxlength="400" size="30" name="maison" type="text" />
                        </td>
                        <td style="width: 50%;" align="center"><label>Type de sang</label> :<br /><input maxlength="200" size="30" placeholder="sang-mêlé, sang-pur, etc" name="sang" type="text" />
                        </td>
                     </tr>
                     <tr>
                        <td style="width: 50%;" align="center"><label>Année d’études</label> :<br /><input maxlength="200" size="30" placeholder="1 à 7" name="études" type="text" />
                        </td>
                        <td style="width: 50%;" align="center"><label>Option d’étude</label> :<br /><input maxlength="200" size="30" placeholder="A partir de 3èm" name="option" type="text" />
                        </td>
                     </tr>
                     <tr>
                        <td style="width: 50%;" align="center"><label>Quidditch</label> :<br /><input maxlength="200" size="30" placeholder="équipe et position" name="quidditch" type="text" />
                        </td>
                        <td style="width: 50%;" align="center"><label>Club & assossiation</label> :<br /><input maxlength="200" size="30" name="club" type="text" />
                        </td>
                     </tr>
                     <tr>
                        <td style="width: 50%;" align="center"><label>Taux de popularité</label> :<br /><input maxlength="200" size="30" placeholder="selon vous" name="popularité" type="text" />
                        </td>
                        <td style="width: 50%;" align="center"><label>Baguette</label> :<br /><input maxlength="200" size="30" placeholder="bois/cm/contenu" name="baguette" type="text" />
                        </td>
                     </tr>
                     <tr>
                        <td style="width: 50%;" align="center"><label>Animal de compagnie</label> :<br /><input maxlength="200" size="30" placeholder="n’importe quel animal" name="animal" type="text" />
                        </td>
                        <td style="width: 50%;" align="center"><label>Patronus avancé</label> :<br /><input maxlength="200" size="30" placeholder="Pour contrer les détraqueurs" name="patronus" type="text" />
                        </td>
                     </tr>
                     <tr>
                        <td style="width: 50%;" align="center"><label>Épouvantard :</label><br /><input maxlength="200" size="30" name="épouvantard" type="text" />
                        </td>
                        <td style="width: 50%;" align="center"><label>Temps libre :</label><br /><input maxlength="200" size="30" name="temps" type="text" />
                        </td>
                     </tr>
                  </tbody>
               </table>
               <table style="width: 92%;" border="0" cellpadding="0" cellspacing="15">
                  <tbody>
                     <tr>
                        <td style="width: 75%;" align="center"><label for="choixstatut">Statut</label> : <select name="choixstatut" id="choixstatut"><optgroup label="----- choisissez le statut"><option value="Personnage inventé">Personnage inventé</option><option value="Scénario">Scénario</option><option value="Poste vacant">Poste vacant</option></optgroup></select>
                        </td>
                     </tr>
                     <tr>
                        <td colspan:="2" align="center"><label class="titre_haut">Image 100*100</label> : <br><input maxlength="400" size="60" name="avatar" type="text" /><br /><label class="titre_haut">Image 100*100</label> : <br><input maxlength="400" size="60" name="avatar2" type="text" /><br /><label class="titre_haut">Image 100*100</label> : <br><input maxlength="400" size="60" name="avatar3" type="text" /><br /><label class="titre_haut">Image 100*100</label> : <br><input maxlength="400" size="60" name="avatar4" type="text" /><br />
                        </td>
                     </tr>
                  </tbody>
               </table><br /><input value="Générer le code" onclick="verif(this.form)" type="button" />
            </form>
            <h2 class="titre_haut">
                Aperçu du rendu :
            </h2>
            <div id="apercu">
            </div>
            <form>
               <input onclick="javascript:document.getElementById('code_genere').select();" value="Selectionner le code" type="button" /><br><h2 class="titre_haut">Voici le code à copier/coller :</h2>
                                  <br><textarea readonly="" id="code_genere" rows="10" cols="60"></textarea>
            </form>
         </center>
      </div>
   </div>
</center>
                                          </body>
</html>

Il me reste encore des choses à modifier dans certaines partie, mais moi c'est vraiment le GÉNÉRER qui ne fonctionne. Merci merci Smile

Melissandre Pearce
Nouveau membre

Féminin
Messages : 7
Inscrit(e) le : 06/09/2016

http://magical-forest.forumactif.com
Melissandre Pearce a été remercié(e) par l'auteur de ce sujet.

Re: Bouton générer le code et sélectionner

Message par Ea le Mar 13 Sep 2016 - 14:51

Bonjour et bienvenue,


Dans la console javascript en cliquant sur "Générer ta présentation" j'ai une erreur comme quoi un champ est indéfini.

En cliquant sur le lien vers l'erreur ( le h1-:170 à droite ) ça m'ouvre la ligne avec l'erreur, ce qui permet de voir que c'est le champ "citation" qui n'est pas défini : http://i.imgur.com/cARgVVq.png

Et effectivement il n'y a pas de name="citation" sur la page mais un name="cita", donc le code javascript devrait plutôt être LeForm.cita.value pour fonctionner.

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Re: Bouton générer le code et sélectionner

Message par Melissandre Pearce le Mar 13 Sep 2016 - 22:24

Merci d'avoir répondu, mais après avoir fait ces modifications le bouton générer le code ne fonctionne tjrs pas.

Melissandre Pearce
Nouveau membre

Féminin
Messages : 7
Inscrit(e) le : 06/09/2016

http://magical-forest.forumactif.com
Melissandre Pearce a été remercié(e) par l'auteur de ce sujet.

Re: Bouton générer le code et sélectionner

Message par Ea le Mer 14 Sep 2016 - 8:02

Il y a toujours la ligne :

Code:
  var citation= LeForm.citation.value;

sans qu'il y ait de champ name="citation".

Pareille pour la ligne:

Code:
var informationsprivés= LeForm.informationsprivés.value;

il n'y a pas de champ avec name="informationsprivés" (et je déconseillerais d'utiliser é dans un nom comme cela).

La ligne :

Code:
  var naissance= LeForm.naissance.value;

va aussi casser vu qu'il n'y a pas de champ naissance.

Vu toutes ces erreurs il me semblerait plus simple que vous appreniez comment voir d'où vienne les erreurs.

Sur google chrome (opera est une surcouche à google chrome il me semble donc ça devrait être similaire) on peut :

- ouvrir la console javascript : CTRL + SHIFT + J
- dans l'onglet "Console", il y a la liste des erreurs, normalement si votre formulaire ne fonctionne pas une nouvelle erreur comme : "Uncaught TypeError: Cannot read property 'value' of undefined" devrait apparaitre.
- à droite du message d'erreur, il y a un lien vers le code, par exemple "VM307:7" en cliquant dessus on voit quelle ligne cause l'erreur.

Ensuite vous avez la ligne et la description de l'erreur et vous devriez pouvoir corriger en conséquence.

"Uncaught TypeError: Cannot read property 'value' of undefined" signifie qu'on essaye de faire "{OBJET}.value" alors que {OBJET} n'existe pas.

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Re: Bouton générer le code et sélectionner

Message par Melissandre Pearce le Mer 14 Sep 2016 - 13:50

Donc bon après quelque modifications du codage, voici ce que j'ai modifier:

Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Formulaire d'essaie</title><style type="text/css">
body {
  background-color: #251d29;
  font-family: Arial;
  font-style: normal;
  color: #574F41;
  font-size: 12px;
  background-position: top center!important;
  width: 100%;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.prenom {
  color: #000000;
}

.fond {
  background: #090909;
  width: 770px;
  margin: 41px auto 20px auto;
  padding: 20px 0;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
  text-align: justify;
}

.commentaires {
  width: 670px;
  margin: 10px auto 15px auto;
  ;
  padding-bottom: 15px;
  border-bottom: 3px dotted #949267;
  text-align: justify;
}

.titre_haut {
  width: 100%;
  text-align: center;
  color: #2BB07e;
  font-family: ShangriLaNFSmallCaps;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 3px;
  font-weight: lighter!important;
  text-shadow: 1px 1px 1px #353430;
  margin-bottom: 15px;
}

input,
textarea,
select {
  background-color: #060814!important;
  border: 1px solid rgba(46, 40, 29, 0.6);
  color: #574F41;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 5px;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #574F41;
}

input,
textarea:focus {
  outline-style: none;
}

label,
i {
  font-family: times new roman;
  text-transform: uppercase;
  font-size: 8.5px;
  letter-spacing: 1px;
  font-weight: lighter!important;
  color: #574B2C;
  opacity: 0.6;
}

.correction label {
  font-family: Arial;
  font-style: normal;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0px;
}

.correction input {
  padding: 1px 0px;
  font-size: 9px;
  text-align: center;
  margin: 1.5px 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}


/* fiche présentation élèves créer par Melissandre Pearce /*
.cadre-prez{
  background:#010101;
  width:500px;
  height: auto;
  margin: auto;
}

.titre-prez{
  font-family:'Megrim', cursive;
  font-size:42px;
  padding:;
  color:#3BB07E;
}

.cita-prez{
  font-family:'indie flower', cursive;
  font-size:26px;
  padding:;
  color:#e6e6e6;
}

.sous-prez{
  font-family:'indie flower', cursive;
  font-size: 18px;
  padding:;
  color:#3bb07e;
  text-decoration:underline;
}

.contenu-prez{
  background:#3b3240;
  font-family: rosario, helvetica, arial;
  font-size:14px;
  margin:-25 auto 0 auto;
  position: relative;
  display: block;
  z-index:1;
  width:400px;
  heith:auto;
  padding:10px;
  color:#FFF;
  border-radius:3px;
  text-align:justify;
}

.infos-prez{
  font-family:'indie flower', cursive;
  font-size:14px;
  font-style: italic;
  padding:;
  color:#3bb07e;
}

.img-prez{
 
  width:500px;
  height:200px;
}

.statutpv{
  text-shadow: 1px 1px 1px #000000;
  font-family: century gothic;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  font-size: 11.5px;
  margin-top: -6px;
  color: #757A7A;
}
/* fin de la fiche de présentation **********************/

</style><script type="text/javascript">
<!--

function verif(LeForm) {

  var avatar = LeForm.avatar.value;
  var prénom = LeForm.prénom.value;
  var nom = LeForm.nom.value;
  var cita = LeForm.cita.value;
  var informationsprivés = LeForm.informationsprivés.value;
  var naissance = LeForm.naissance.value;
  var âge = LeForm.âge.value;
  var origine = LeForm.origine.value;
  var scolaire = LeForm.scolaire.value;
  var baguette = LeForm.baguette.value;
  var patronus = LeForm.patronus.value;
  var animal = LeForm.animal.value;
  var connaitre = LeForm.connaitre.value;
  var réel = LeForm.réel.value;
  var pseudo = LeForm.pseudo.value;
  var pays = LeForm.pays.value;
  var trouvé = LeForm.trouvé.value;
  var code = LeForm.code.value;
  var autres = LeForm.autres.value;


  var ok = true;

  if (prénom == "") {
    ok = false;
    alert("Veuillez entrer un prénom");
  }

  if (nom == "") {
    ok = false;
    alert("Veuillez entrer un nom de famille");
  }




  if (ok) {
    var contenu = "<center><img src=\"" + avatar + "\" class=\"img-prez\"><div class=\"cadre-prez\"><div class=\"titre-prez\">" + prénom + " " + nom + "</div><span class=\"cita-prez\">" + cita + "<span class=\"infos-prez\">" + maison + "</span><br /> <br /><center><div class=\"statutpv\">Statut: " + choixstatut + "</div></center><br /><center><div class=\"texte\"><span class=\"titre2\">Date de naissance: </span>" + naissance + "<br /><span class=\"titre2\">Âge: </span>" + age + "<br /><span class=\"titre2\">Type de sang: </span>" + sang + "<br /><span class=\"titre2\">Option de cours: </span> " + option + "<br /><span class=\"titre2\">Quidditch: </span> " + quidditch + "<br /><span class=\"titre2\">Club & assossiation: </span> " + club + "<br /><span class=\"titre2\">Localisation magique: </span>" + habitation + "<br /><span class=\"titre2\">Année d’études: </span>" + études + "<br /></div></center><br /><center><div class=\"texte\"><span class=\"titre2\">Taux de popularité: </span>" + popularité + "<br /><span class=\"titre2\">Baguette: </span>" + baguette + "<br /><span class=\"titre2\">Animal de compagnie:</span>" + animal + "<br /><span class=\"titre2\">Patronus avancé: </span>" + patronus + "<br /><span class=\"titre2\">Épouvantard: </span>" + épouvantard + "<br /><span class=\"titre2\">Temps libre & loisir: </span>" + temps + "<br /><span class=\"titre2\">Bièreaubeurre ou Wisky pur: </span>" + bière + "<br /><span class=\"titre2\">Madame Pieddodu ou Madame Pomfresh: </span>" + madame + "<br /><div style=\"text-align:right;font-size:9px;\">Fait par CW</div><br /></div></center></div></center>";
    document.getElementById("code_genere").innerHTML = "" + contenu + "";
    document.getElementById("apercu").innerHTML = "" + contenu + "";
  }
}
-->
</script>
<form name="monFormulaire" method="post" action="http://magical-forest.forumactif.com/post?f=13&mode=newtopic">
    <center>
      <div id="formulaire">
        <div class="fond">
          <center><img style="width:95%; height:auto;" src="http://i97.servimg.com/u/f97/19/53/44/83/14732010.jpg"></center>
          <br />
          <h2 class="titre_haut">
            Veuillez remplir le formulaire suivant :
        </h2>
          <center>
            <form action="#" method="post" id="champs" name="form_test">
              <table style="width: 92%;" border="0" cellpadding="0" cellspacing="15">
                <tbody>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Prénom</label> :
                      <br />
                      <input maxlength="200" size="30" name="prénom" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Nom</label> :
                      <br />
                      <input maxlength="200" size="30" name="nom" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Citation</label> :
                      <br />
                      <input maxlength="400" size="30" name="cita" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Date de naissance</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="jj/mm/aaaa" name="naissance" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Âge actuel</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="âge du perso" name="âge" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Origine</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="Sang-pur, Sang-mêlé, né-moldu, autre" name="origine" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Année scolaire</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="1 à 7" name="scolaire" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Baguette magique</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="bois-contenu-taille" name="baguette" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Patronus</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="animal qui repousse les détraqueurs" name="patronus" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Animal de compagnie</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="n'importe lequel" name="animal" type="text" />
                    </td>
                  </tr>
                </tbody>
              </table>
              <table style="width: 92%;" border="0" cellpadding="0" cellspacing="15">
                <tbody>
                  <tr>
                    <td style="width: 75%;" align="center">
                      <label for="choixstatut">Statut</label> :
                      <select name="choixstatut" id="choixstatut">
                        <optgroup label="----- choisissez le statut">
                          <option value="Personnage inventé">Personnage inventé</option>
                          <option value="Scénario">Scénario</option>
                          <option value="Poste vacant">Poste vacant</option>
                        </optgroup>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td colspan:="2" align="center">
                      <label class="titre_haut">Image 500*200</label> :
                      <br>
                      <input maxlength="400" size="60" name="avatar" type="text" />
                      <br />
                    </td>
                  </tr>
                </tbody>
              </table>
              <br />
              <input value="Générer le code" onclick="verif(this.form)" type="button" />
            </form>
            <h2 class="titre_haut">
                Aperçu du rendu :
            </h2>
            <div id="apercu">
            </div>
            <form>
              <input onclick="javascript:document.getElementById('code_genere').select();" value="Selectionner le code" type="button" />
              <br>
              <h2 class="titre_haut">Voici le code à copier/coller :</h2>
              <br>
              <textarea readonly="" id="code_genere" rows="10" cols="60"></textarea>
                </form>
        </div>
                </center>
      </div>
    </center>
            </body>
</html>

Melissandre Pearce
Nouveau membre

Féminin
Messages : 7
Inscrit(e) le : 06/09/2016

http://magical-forest.forumactif.com
Melissandre Pearce a été remercié(e) par l'auteur de ce sujet.

Re: Bouton générer le code et sélectionner

Message par Ea le Mer 14 Sep 2016 - 17:36

Avec la méthode merveilleuse que j'ai écrite plus haut :

---> il y a une erreur : http://i.imgur.com/dVbyWul.png
---> on nous dit même sur quel champ ça arrive : http://i.imgur.com/EXI8gF6.png

en cherchant ce nom de champ (d'ailleurs je l'avais déjà indiqué plus haut qu'il y avait un problème dessus), il n'existe toujours pas.

Donc je répète ce qu'il faudrait faire :

Sur google chrome (opera est une surcouche à google chrome il me semble donc ça devrait être similaire) on peut :

- ouvrir la console javascript : CTRL + SHIFT + J
- dans l'onglet "Console", il y a la liste des erreurs, normalement si votre formulaire ne fonctionne pas une nouvelle erreur comme : "Uncaught TypeError: Cannot read property 'value' of undefined" devrait apparaitre.
- à droite du message d'erreur, il y a un lien vers le code, par exemple "VM307:7" en cliquant dessus on voit quelle ligne cause l'erreur.

Ensuite vous avez la ligne et la description de l'erreur et vous devriez pouvoir corriger en conséquence.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Re: Bouton générer le code et sélectionner

Message par Melissandre Pearce le Mer 14 Sep 2016 - 22:57

J'ai beau tester en suivant les instructions, mais moi ça donne pas d'erreurs, je fais quoi alors ?

Melissandre Pearce
Nouveau membre

Féminin
Messages : 7
Inscrit(e) le : 06/09/2016

http://magical-forest.forumactif.com
Melissandre Pearce a été remercié(e) par l'auteur de ce sujet.

Re: Bouton générer le code et sélectionner

Message par Ea le Jeu 15 Sep 2016 - 8:36

Si il y a une erreur elle doit être visible (au moment où on appuie sur générer).

Si vous utilisez un autre navigateur que google chrome, vous pouvez chercher "ouvrir console javascript + nom du navigateur" et j'imagine qu'il y aura des guides.

Si je prends le formulaire il y a quasiment la moitié des champs qui n'existe pas, en les commentants on arrive à l'alerte qui nous dit qu'on a pas rempli le pseudo :

Code:
function verif(LeForm) {

  var avatar = LeForm.avatar.value;
  var prénom = LeForm.prénom.value;
  var nom = LeForm.nom.value;
  var cita = LeForm.cita.value;
  var informationsprivés = '';//LeForm.informationsprivés.value; // --> aucun champ ne s'appelle comme ça
  var naissance = LeForm.naissance.value;
  var âge = LeForm.âge.value;
  var origine = LeForm.origine.value;
  var scolaire = LeForm.scolaire.value;
  var baguette = LeForm.baguette.value;
  var patronus = LeForm.patronus.value;
  var animal = LeForm.animal.value;
  var connaitre = '';//LeForm.connaitre.value; // --> aucun champ ne s'appelle comme ça
  var réel = '';//LeForm.réel.value; // --> aucun champ ne s'appelle comme ça
  var pseudo = '';//LeForm.pseudo.value; // --> aucun champ ne s'appelle comme ça
  var pays = '';//LeForm.pays.value; // --> aucun champ ne s'appelle comme ça
  var trouvé = '';//LeForm.trouvé.value; // --> aucun champ ne s'appelle comme ça
  var code = '';//LeForm.code.value; // --> aucun champ ne s'appelle comme ça
  var autres = '';//LeForm.autres.value; // --> aucun champ ne s'appelle comme ça


  var ok = true;

  if (prénom == "") {
    ok = false;
    alert("Veuillez entrer un prénom");
  }

  if (nom == "") {
    ok = false;
    alert("Veuillez entrer un nom de famille");
  }




  if (ok) {
    var contenu = "<center><img src=\"" + avatar + "\" class=\"img-prez\"><div class=\"cadre-prez\"><div class=\"titre-prez\">" + prénom + " " + nom + "</div><span class=\"cita-prez\">" + cita + "<span class=\"infos-prez\">" + maison + "</span><br /> <br /><center><div class=\"statutpv\">Statut: " + choixstatut + "</div></center><br /><center><div class=\"texte\"><span class=\"titre2\">Date de naissance: </span>" + naissance + "<br /><span class=\"titre2\">Âge: </span>" + age + "<br /><span class=\"titre2\">Type de sang: </span>" + sang + "<br /><span class=\"titre2\">Option de cours: </span> " + option + "<br /><span class=\"titre2\">Quidditch: </span> " + quidditch + "<br /><span class=\"titre2\">Club & assossiation: </span> " + club + "<br /><span class=\"titre2\">Localisation magique: </span>" + habitation + "<br /><span class=\"titre2\">Année d’études: </span>" + études + "<br /></div></center><br /><center><div class=\"texte\"><span class=\"titre2\">Taux de popularité: </span>" + popularité + "<br /><span class=\"titre2\">Baguette: </span>" + baguette + "<br /><span class=\"titre2\">Animal de compagnie:</span>" + animal + "<br /><span class=\"titre2\">Patronus avancé: </span>" + patronus + "<br /><span class=\"titre2\">Épouvantard: </span>" + épouvantard + "<br /><span class=\"titre2\">Temps libre & loisir: </span>" + temps + "<br /><span class=\"titre2\">Bièreaubeurre ou Wisky pur: </span>" + bière + "<br /><span class=\"titre2\">Madame Pieddodu ou Madame Pomfresh: </span>" + madame + "<br /><div style=\"text-align:right;font-size:9px;\">Fait par CW</div><br /></div></center></div></center>";
    document.getElementById("code_genere").innerHTML = "" + contenu + "";
    document.getElementById("apercu").innerHTML = "" + contenu + "";
  }
}

Sinon même sans les erreurs il est assez simple de regarder :

=> il y a une ligne 'LeForm.informationsprivés.value' donc ça veut dire qu'il y a une balise <balise name="informationsprivés" />
=> je cherche name="informationsprivés"
=> si je ne trouve rien, c'est que j'ai fait une erreur que je dois corriger

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Re: Bouton générer le code et sélectionner

Message par Melissandre Pearce le Jeu 15 Sep 2016 - 16:19

J'ai modifier tout les champs qui n'était pas visible, mais même en faisant ça je ne suis pas capable de générer la fiche.

Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Formulaire d'essaie</title><style type="text/css">
body {
  background-color: #251d29;
  font-family: Arial;
  font-style: normal;
  color: #574F41;
  font-size: 12px;
  background-position: top center!important;
  width: 100%;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.prenom {
  color: #000000;
}

.fond {
  background: #090909;
  width: 770px;
  margin: 41px auto 20px auto;
  padding: 20px 0;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
  text-align: justify;
}

.commentaires {
  width: 670px;
  margin: 10px auto 15px auto;
  ;
  padding-bottom: 15px;
  border-bottom: 3px dotted #949267;
  text-align: justify;
}

.titre_haut {
  width: 100%;
  text-align: center;
  color: #2BB07e;
  font-family: ShangriLaNFSmallCaps;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 3px;
  font-weight: lighter!important;
  text-shadow: 1px 1px 1px #353430;
  margin-bottom: 15px;
}

input,
textarea,
select {
  background-color: #060814!important;
  border: 1px solid rgba(46, 40, 29, 0.6);
  color: #574F41;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 5px;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #574F41;
}

input,
textarea:focus {
  outline-style: none;
}

label,
i {
  font-family: times new roman;
  text-transform: uppercase;
  font-size: 8.5px;
  letter-spacing: 1px;
  font-weight: lighter!important;
  color: #574B2C;
  opacity: 0.6;
}

.correction label {
  font-family: Arial;
  font-style: normal;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0px;
}

.correction input {
  padding: 1px 0px;
  font-size: 9px;
  text-align: center;
  margin: 1.5px 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}


/* fiche présentation élèves créer par Melissandre Pearce /*
.cadre-prez{
  background:#010101;
  width:500px;
  height: auto;
  margin: auto;
}

.titre-prez{
  font-family:'Megrim', cursive;
  font-size:42px;
  padding:;
  color:#3BB07E;
}

.cita-prez{
  font-family:'indie flower', cursive;
  font-size:26px;
  padding:;
  color:#e6e6e6;
}

.sous-prez{
  font-family:'indie flower', cursive;
  font-size: 18px;
  padding:;
  color:#3bb07e;
  text-decoration:underline;
}

.contenu-prez{
  background:#3b3240;
  font-family: rosario, helvetica, arial;
  font-size:14px;
  margin:-25 auto 0 auto;
  position: relative;
  display: block;
  z-index:1;
  width:400px;
  heith:auto;
  padding:10px;
  color:#FFF;
  border-radius:3px;
  text-align:justify;
}

.infos-prez{
  font-family:'indie flower', cursive;
  font-size:14px;
  font-style: italic;
  padding:;
  color:#3bb07e;
}

.img-prez{
 
  width:500px;
  height:200px;
}

.statutpv{
  text-shadow: 1px 1px 1px #000000;
  font-family: century gothic;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  font-size: 11.5px;
  margin-top: -6px;
  color: #757A7A;
}
/* fin de la fiche de présentation **********************/

</style><script type="text/javascript">
<!--

function verif(LeForm) {

  var avatar = LeForm.avatar.value;
  var prénom = LeForm.prénom.value;
  var nom = LeForm.nom.value;
  var cita = LeForm.cita.value;
  var informationsprivés = LeForm.informationsprivés.value;
  var naissance = LeForm.naissance.value;
  var âge = LeForm.âge.value;
  var origine = LeForm.origine.value;
  var scolaire = LeForm.scolaire.value;
  var baguette = LeForm.baguette.value;
  var patronus = LeForm.patronus.value;
  var animal = LeForm.animal.value;
  var connaitre = LeForm.connaitre.value;
  var réel = LeForm.réel.value;
  var pseudo = LeForm.pseudo.value;
  var pays = LeForm.pays.value;
  var trouvé = LeForm.trouvé.value;
  var code = LeForm.code.value;
  var autres = LeForm.autres.value;


  var ok = true;

  if (prénom == "") {
    ok = false;
    alert("Veuillez entrer un prénom");
  }

  if (nom == "") {
    ok = false;
    alert("Veuillez entrer un nom de famille");
  }




  if (ok) {
    var contenu = "<center><img src=\"" + avatar + "\" class=\"img-prez\"><div class=\"cadre-prez\"><div class=\"titre-prez\">" + prénom + " " + nom + "</div><span class=\"cita-prez\">" + cita + "<span class=\"sous-prez\">" + informationsprivés + "</span><br /> <br /><center><div class=\"statutpv\">Statut: " + choixstatut + "</div></center><br /><center><div class=\"contenu-prez\"><span class=\"infos-prez\">Date de naissance: </span>" + naissance + "<br /><span class=\"infos-prez\">Âge actuel: </span>" + age + "<br /><span class=\"infos-prez\">Origine: </span>" + origine + "<br /><span class=\"infos-prez\">Année scolaire: </span> " + scolaire + "<br /><span class=\"infos-prez\">Baguette magique: </span> " + baguette + "<br /><span class=\"infos-prez\">Patronus: </span> " + patronus + "<br /><span class=\"infos-prez\">Animal de compagnie: </span>" + animal + "<br /></div></center><br /><center><div class=\"contenu-prez\"><span class=\"infos-prez\">Prénom/pseudo: </span>" + pseudo + "<br /><span class=\"infos-prez\">Âge: </span>" + réel + "<br /><span class=\"infos-prez\">Pays:</span>" + pays + "<br /><span class=\"infos-prez\">Comment nous as-tu connus: </span>" + trouvé + "<br /><span class=\"infos-prez\">Code du règlement: </span>" + code + "<br /><span class=\"infos-prez\">Autre chose à nous dire: </span>" + autre + "<br /><div style=\"text-align:right;font-size:9px;\">Fait par CW</div><br /></div></center></div></center>";
    document.getElementById("code_genere").innerHTML = "" + contenu + "";
    document.getElementById("apercu").innerHTML = "" + contenu + "";
  }
}
-->
</script>
<form name="monFormulaire" method="post" action="http://magical-forest.forumactif.com/post?f=13&mode=newtopic">
    <center>
      <div id="formulaire">
        <div class="fond">
          <center><img style="width:95%; height:auto;" src="http://i97.servimg.com/u/f97/19/53/44/83/14732010.jpg"></center>
          <br />
          <h2 class="titre_haut">
            Veuillez remplir le formulaire suivant :
        </h2>
          <center>
            <form action="#" method="post" id="champs" name="form_test">
              <table style="width: 92%;" border="0" cellpadding="0" cellspacing="15">
                <tbody>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Prénom</label> :
                      <br />
                      <input maxlength="200" size="30" name="prénom" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Nom</label> :
                      <br />
                      <input maxlength="200" size="30" name="nom" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Citation</label> :
                      <br />
                      <input maxlength="400" size="30" name="cita" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Date de naissance</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="jj/mm/aaaa" name="naissance" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Âge actuel</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="âge du perso" name="âge" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Origine</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="Sang-pur, Sang-mêlé, né-moldu, autre" name="origine" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Année scolaire</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="1 à 7" name="scolaire" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Baguette magique</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="bois-contenu-taille" name="baguette" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Patronus</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="animal qui repousse les détraqueurs" name="patronus" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Animal de compagnie</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="n'importe lequel" name="animal" type="text" />
                    </td>
                  </tr>
                </tbody>
              </table>
              <table style="width: 92%;" border="0" cellpadding="0" cellspacing="15">
                <tbody>
                  <tr>
                    <td style="width: 75%;" align="center">
                      <label for="choixstatut">Statut</label> :
                      <select name="choixstatut" id="choixstatut">
                        <optgroup label="----- choisissez le statut">
                          <option value="Personnage inventé">Personnage inventé</option>
                          <option value="Scénario">Scénario</option>
                          <option value="Poste vacant">Poste vacant</option>
                        </optgroup>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td colspan:="2" align="center">
                      <label class="titre_haut">Image 500*200</label> :
                      <br>
                      <input maxlength="400" size="60" name="avatar" type="text" />
                      <br />
                    </td>
                  </tr>
                </tbody>
              </table>
              <br />
              <input value="Générer le code" onclick="verif(this.form)" type="button" />
            </form>
            <h2 class="titre_haut">
                Aperçu du rendu :
            </h2>
            <div id="apercu">
            </div>
            <form>
              <input onclick="javascript:document.getElementById('code_genere').select();" value="Selectionner le code" type="button" />
              <br>
              <h2 class="titre_haut">Voici le code à copier/coller :</h2>
              <br>
              <textarea readonly="" id="code_genere" rows="10" cols="60"></textarea>
                </form>
        </div>
                </center>
      </div>
    </center>
            </body>
</html>

Melissandre Pearce
Nouveau membre

Féminin
Messages : 7
Inscrit(e) le : 06/09/2016

http://magical-forest.forumactif.com
Melissandre Pearce a été remercié(e) par l'auteur de ce sujet.

Re: Bouton générer le code et sélectionner

Message par Ea le Ven 16 Sep 2016 - 9:43

Si je prends le code dans le message précédent, comme je l'ai dit deux fois : on appelle la valeur d'un champ "informationsprivés" mais ce champ n'existe pas.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Re: Bouton générer le code et sélectionner

Message par Melissandre Pearce le Ven 16 Sep 2016 - 16:49

Je fais tout ce que tu me dis, mais je suis pas imbécile. Le bouton fonctionne pas.

Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Formulaire d'essaie</title><style type="text/css">
body {
  background-color: #251d29;
  font-family: Arial;
  font-style: normal;
  color: #574F41;
  font-size: 12px;
  background-position: top center!important;
  width: 100%;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.prenom {
  color: #000000;
}

.fond {
  background: #090909;
  width: 770px;
  margin: 41px auto 20px auto;
  padding: 20px 0;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
  text-align: justify;
}

.commentaires {
  width: 670px;
  margin: 10px auto 15px auto;
  ;
  padding-bottom: 15px;
  border-bottom: 3px dotted #949267;
  text-align: justify;
}

.titre_haut {
  width: 100%;
  text-align: center;
  color: #2BB07e;
  font-family: ShangriLaNFSmallCaps;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 3px;
  font-weight: lighter!important;
  text-shadow: 1px 1px 1px #353430;
  margin-bottom: 15px;
}

input,
textarea,
select {
  background-color: #060814!important;
  border: 1px solid rgba(46, 40, 29, 0.6);
  color: #574F41;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 5px;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #574F41;
}

input,
textarea:focus {
  outline-style: none;
}

label,
i {
  font-family: times new roman;
  text-transform: uppercase;
  font-size: 8.5px;
  letter-spacing: 1px;
  font-weight: lighter!important;
  color: #574B2C;
  opacity: 0.6;
}

.correction label {
  font-family: Arial;
  font-style: normal;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0px;
}

.correction input {
  padding: 1px 0px;
  font-size: 9px;
  text-align: center;
  margin: 1.5px 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}


/* fiche présentation élèves créer par Melissandre Pearce /*
.cadre-prez{
  background:#010101;
  width:500px;
  height: auto;
  margin: auto;
}

.titre-prez{
  font-family:'Megrim', cursive;
  font-size:42px;
  padding:;
  color:#3BB07E;
}

.cita-prez{
  font-family:'indie flower', cursive;
  font-size:26px;
  padding:;
  color:#e6e6e6;
}

.sous-prez{
  font-family:'indie flower', cursive;
  font-size: 18px;
  padding:;
  color:#3bb07e;
  text-decoration:underline;
}

.contenu-prez{
  background:#3b3240;
  font-family: rosario, helvetica, arial;
  font-size:14px;
  margin:-25 auto 0 auto;
  position: relative;
  display: block;
  z-index:1;
  width:400px;
  heith:auto;
  padding:10px;
  color:#FFF;
  border-radius:3px;
  text-align:justify;
}

.infos-prez{
  font-family:'indie flower', cursive;
  font-size:14px;
  font-style: italic;
  padding:;
  color:#3bb07e;
}

.img-prez{
 
  width:500px;
  height:200px;
}

.statutpv{
  text-shadow: 1px 1px 1px #000000;
  font-family: century gothic;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  font-size: 11.5px;
  margin-top: -6px;
  color: #757A7A;
}
/* fin de la fiche de présentation **********************/

</style><script type="text/javascript">
<!--

function verif(LeForm) {

  var avatar = LeForm.avatar.value;
  var prénom = LeForm.prénom.value;
  var nom = LeForm.nom.value;
  var cita = LeForm.cita.value;
  var naissance = LeForm.naissance.value;
  var âge = LeForm.âge.value;
  var origine = LeForm.origine.value;
  var scolaire = LeForm.scolaire.value;
  var baguette = LeForm.baguette.value;
  var patronus = LeForm.patronus.value;
  var animal = LeForm.animal.value;
  var connaitre = LeForm.connaitre.value;
  var pseudo = LeForm.pseudo.value;
  var pays = LeForm.pays.value;
  var trouvé = LeForm.trouvé.value;
  var code = LeForm.code.value;
  var autres = LeForm.autres.value;


  var ok = true;

  if (prénom == "") {
    ok = false;
    alert("Veuillez entrer un prénom");
  }

  if (nom == "") {
    ok = false;
    alert("Veuillez entrer un nom de famille");
  }




  if (ok) {
    var contenu = "<center><img src=\"" + avatar + "\" class=\"img-prez\"><div class=\"cadre-prez\"><div class=\"titre-prez\">" + prénom + " " + nom + "</div><span class=\"cita-prez\">" + cita + "<span class=\"sous-prez\">" + informationsprivés + "</span><br /> <br /><center><div class=\"statutpv\">Statut: " + choixstatut + "</div></center><br /><center><div class=\"contenu-prez\"><span class=\"infos-prez\">Date de naissance: </span>" + naissance + "<br /><span class=\"infos-prez\">Âge actuel: </span>" + age + "<br /><span class=\"infos-prez\">Origine: </span>" + origine + "<br /><span class=\"infos-prez\">Année scolaire: </span> " + scolaire + "<br /><span class=\"infos-prez\">Baguette magique: </span> " + baguette + "<br /><span class=\"infos-prez\">Patronus: </span> " + patronus + "<br /><span class=\"infos-prez\">Animal de compagnie: </span>" + animal + "<br /></div></center><br /><center><div class=\"contenu-prez\"><span class=\"infos-prez\">Prénom/pseudo: </span>" + pseudo + "<br /><span class=\"infos-prez\">Âge: </span>" + réel + "<br /><span class=\"infos-prez\">Pays:</span>" + pays + "<br /><span class=\"infos-prez\">Comment nous as-tu connus: </span>" + trouvé + "<br /><span class=\"infos-prez\">Code du règlement: </span>" + code + "<br /><span class=\"infos-prez\">Autre chose à nous dire: </span>" + autre + "<br /><div style=\"text-align:right;font-size:9px;\">Fait par CW</div><br /></div></center></div></center>";
    document.getElementById("code_genere").innerHTML = "" + contenu + "";
    document.getElementById("apercu").innerHTML = "" + contenu + "";
  }
}
-->
</script>
<form name="monFormulaire" method="post" action="http://magical-forest.forumactif.com/post?f=13&mode=newtopic">
    <center>
      <div id="formulaire">
        <div class="fond">
          <center><img style="width:95%; height:auto;" src="http://i97.servimg.com/u/f97/19/53/44/83/14732010.jpg"></center>
          <br />
          <h2 class="titre_haut">
            Veuillez remplir le formulaire suivant :
        </h2>
          <center>
            <form action="#" method="post" id="champs" name="form_test">
              <table style="width: 92%;" border="0" cellpadding="0" cellspacing="15">
                <tbody>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Prénom</label> :
                      <br />
                      <input maxlength="200" size="30" name="prénom" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Nom</label> :
                      <br />
                      <input maxlength="200" size="30" name="nom" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Citation</label> :
                      <br />
                      <input maxlength="400" size="30" name="cita" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Date de naissance</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="jj/mm/aaaa" name="naissance" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Âge actuel</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="âge du perso" name="âge" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Origine</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="Sang-pur, Sang-mêlé, né-moldu, autre" name="origine" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Année scolaire</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="1 à 7" name="scolaire" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Baguette magique</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="bois-contenu-taille" name="baguette" type="text" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 50%;" align="center">
                      <label>Patronus</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="animal qui repousse les détraqueurs" name="patronus" type="text" />
                    </td>
                    <td style="width: 50%;" align="center">
                      <label>Animal de compagnie</label> :
                      <br />
                      <input maxlength="200" size="30" placeholder="n'importe lequel" name="animal" type="text" />
                    </td>
                  </tr>
                </tbody>
              </table>
              <table style="width: 92%;" border="0" cellpadding="0" cellspacing="15">
                <tbody>
                  <tr>
                    <td style="width: 75%;" align="center">
                      <label for="choixstatut">Statut</label> :
                      <select name="choixstatut" id="choixstatut">
                        <optgroup label="----- choisissez le statut">
                          <option value="Personnage inventé">Personnage inventé</option>
                          <option value="Scénario">Scénario</option>
                          <option value="Poste vacant">Poste vacant</option>
                        </optgroup>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td colspan:="2" align="center">
                      <label class="titre_haut">Image 500*200</label> :
                      <br>
                      <input maxlength="400" size="60" name="avatar" type="text" />
                      <br />
                    </td>
                  </tr>
                </tbody>
              </table>
              <br />
              <input value="Générer le code" onclick="verif(this.form)" type="button" />
            </form>
            <h2 class="titre_haut">
                Aperçu du rendu :
            </h2>
            <div id="apercu">
            </div>
            <form>
              <input onclick="javascript:document.getElementById('code_genere').select();" value="Selectionner le code" type="button" />
              <br>
              <h2 class="titre_haut">Voici le code à copier/coller :</h2>
              <br>
              <textarea readonly="" id="code_genere" rows="10" cols="60"></textarea>
                </form>
        </div>
                </center>
      </div>
    </center>
            </body>
</html>

Melissandre Pearce
Nouveau membre

Féminin
Messages : 7
Inscrit(e) le : 06/09/2016

http://magical-forest.forumactif.com
Melissandre Pearce a été remercié(e) par l'auteur de ce sujet.

Re: Bouton générer le code et sélectionner

Message par Ea le Ven 16 Sep 2016 - 17:14

Il n'y a pas de champ "connaitre".

Plus haut j'avais mis un code javascript qui avait beaucoup moins d'erreur.

Dans ce code, tout ce que j'avais marqué comme cela :

Code:
  var informationsprivés = '';//LeForm.informationsprivés.value; // --> aucun champ ne s'appelle comme ça
  var connaitre = '';//LeForm.connaitre.value; // --> aucun champ ne s'appelle comme ça
  var réel = '';//LeForm.réel.value; // --> aucun champ ne s'appelle comme ça
  var pseudo = '';//LeForm.pseudo.value; // --> aucun champ ne s'appelle comme ça
  var pays = '';//LeForm.pays.value; // --> aucun champ ne s'appelle comme ça
  var trouvé = '';//LeForm.trouvé.value; // --> aucun champ ne s'appelle comme ça
  var code = '';//LeForm.code.value; // --> aucun champ ne s'appelle comme ça
  var autres = '';//LeForm.autres.value; // --> aucun champ ne s'appelle comme ça

ça voulait dire que le champ en question n'existait pas et qu'il faudrait régler le problème..

Il faut faire attention également, qu'une fois la ligne :

Code:
  var informationsprivés = LeForm.informationsprivés.value;

supprimée, le code qui suit :

Code:
  if (ok) {
    var contenu = "<center><img src=\"" + avatar + "\" class=\"img-prez\"><div class=\"cadre-prez\"><div class=\"titre-prez\">" + prénom + " " + nom + "</div><span class=\"cita-prez\">" + cita + "<span class=\"sous-prez\">" + informationsprivés + "</span><br /> <br /><center><div class=\"statutpv\">Statut: " + choixstatut + "</div></center><br /><center><div class=\"contenu-prez\"><span class=\"infos-prez\">Date de naissance: </span>" + naissance + "<br /><span class=\"infos-prez\">Âge actuel: </span>" + age + "<br /><span class=\"infos-prez\">Origine: </span>" + origine + "<br /><span class=\"infos-prez\">Année scolaire: </span> " + scolaire + "<br /><span class=\"infos-prez\">Baguette magique: </span> " + baguette + "<br /><span class=\"infos-prez\">Patronus: </span> " + patronus + "<br /><span class=\"infos-prez\">Animal de compagnie: </span>" + animal + "<br /></div></center><br /><center><div class=\"contenu-prez\"><span class=\"infos-prez\">Prénom/pseudo: </span>" + pseudo + "<br /><span class=\"infos-prez\">Âge: </span>" + réel + "<br /><span class=\"infos-prez\">Pays:</span>" + pays + "<br /><span class=\"infos-prez\">Comment nous as-tu connus: </span>" + trouvé + "<br /><span class=\"infos-prez\">Code du règlement: </span>" + code + "<br /><span class=\"infos-prez\">Autre chose à nous dire: </span>" + autre + "<br /><div style=\"text-align:right;font-size:9px;\">Fait par CW</div><br /></div></center></div></center>";
    document.getElementById("code_genere").innerHTML = "" + contenu + "";
    document.getElementById("apercu").innerHTML = "" + contenu + "";
  }

causera une erreur vu que "informationsprivés" (qui n'existe plus) y est appelé.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

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

Re: Bouton générer le code et sélectionner

Message par Chacha le Ven 23 Sep 2016 - 10:18

Bonjour,

Attention, cela fait 7 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 49732
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Re: Bouton générer le code et sélectionner

Message par Chacha le Sam 24 Sep 2016 - 10:20

Bonjour,

Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement !

Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 49732
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha 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