Probleme de Générateur

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

Résolu Probleme de Générateur

Message par Daisuke-Aniki le Mar 4 Fév 2014 - 15:03

Bonjour à vous ^^
Donc voila, j'aimerais faire un générateur pour les membres de mon staff, qui leur permettrait de créer facilement une image "Partager l'article" pour le mettre à la fin de leurs fiches, tutos et autres.
Le code final contiendrait le lien BBCODE sur une image , le lien html sur l'image, ainsi que le bbcode et le html entouré par la balise code pour que la personne qui consulte la fiche puisse la partager simplement et efficacement.

Donc mon formulaire ressemblerait à ceci.

Titre de l'article (Il sera affiché sur une div ayant pour background mon image de partage.
Lien de l'article (Il sera utilisé pour renvoyer sur l'article)
Ouvrir dans un nouvel onglet?

J'ai déja consulté certains topics, et j'ai même essayé un tuto assez complet, mais ce qui me bloque c'est que les formulaires génèrent un post, hors je voudrais absolument un code généré.
Ne voulant pas que l'on me fasse un générateur car je préfère apprendre, j'ai suivi un tutoriel sur le net, le soucis c'est que cela ne donne rien...
Pourriez vous m'éclairer sur mon code? Parce que là je ne vois pas.
Spoiler:

Code:
<html>
    <head>
      <meta charset="UTF-8"></meta>
       <title>Le titre de ma page</title>
    <script type="text/javascript">
    <!--

    function verif(LeForm){

       var titre = LeForm.titre.value;
       var lien = LeForm.lien.value;
       var blank = LeForm.blank.value;

       var ok = true;

       if (titre == ""){
          ok = false;
            alert("Veuillez entrer un titre.");  
      }  
     
      if (lien == ""){
          ok = false;
            alert("Veuillez entrer le lien de l'article.");  
      }  
     
      if (ok){
      var contenu = "<div><h1 class=\"titre\">Découvret "+titre+" sur Jonetsu-Yume !</h1>  \n <a href=\""+lien+" target="+onglet+" >Ici</a>"</p>";
          document.getElementById("code_genere").innerHTML = ""+contenu+"";
          document.getElementById("apercu").innerHTML = ""+contenu+"";  
      }
   }
    -->
    </script>
    </head>
    <body>

    <div id="formulaire">

       <h1>Générer un code</h1>

       <h2>Veuillez remplir le formulaire suivant :</h2>
      
      <form action="#" method="post" id="rempli">
         <label>Titre de l'Article</label> :<input type="text" name="titre" size="30" maxlength="200"/><br />
         <label>Lien de l'Article</label> :<input type="text" name="lien" size="30" maxlength="400"/><br />

          <label>Ouvrir dans un nouvel onglet?</label> :
          <select name="onglet">
             <option value="_blank">Oui</option>
             <option value="">Non</option>
          </select>
          <br />
    <input type="button" onClick="verif(this.form)" value="Générer le code" />
       </form>
       <br /><br />
       <h2>Aperçu du rendu :</h2>
          <br />
       <div id="apercu"> </div>
       <form>
         <label>Voici le code à copier/coller</label><br /> <input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code_genere').select();" />
<br />
          <textarea cols="60" rows="10" id="code_genere" readonly></textarea>
       </form>
          
    </div>

    </body>
    </html>

PS: Le code généré est provisoire je compte ajouter du style dedans par la suite.

Merci d'avance pour votre aide car la je suis désespéré x')


Dernière édition par Daisuke-Aniki le Mar 4 Fév 2014 - 23:30, édité 1 fois

Daisuke-Aniki
***

Masculin
Messages : 109
Inscrit(e) le : 20/03/2013

http://jonetsu-yume.jeun.fr/
Daisuke-Aniki a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Probleme de Générateur

Message par Scoubifitz le Mar 4 Fév 2014 - 22:33

bonsoir,

En somme , un petit corrigé pour vous mettre sur la voie ?

allons-y ...

- il est nécessaire , utile et indispensable de mettre un DOCTYPE en début de page HTML

- une balise "meta" est auto-fermante (une seule balise)

dans le script :

- la variable "blanck" appelle une valeur d'un champ "blanck" ... qui n'existe pas

- la variable "contenu" :
ouverture de guillemet pour le lien dans la balise "a" , mais pas de fermeture
appel d'une variable "onglet" , qui n'est pas définie
guillemet entre les balises fermantes "a" et "p" qui n'a rien a y faire
balise fermante "p" inutile , balise "div" fermante manquante

l'ID "code_genere" étant pour un textarea , le "contenu" sera inclus sous forme de value , pas de innerHTML

je mets le code corrigé pour que vous puissiez comparer :

Spoiler:

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

function verif(LeForm){

var titre = LeForm.titre.value;
var lien = LeForm.lien.value;
var onglet = LeForm.onglet.value;

var ok = true;

if (titre == ""){
ok = false;
alert("Veuillez entrer un titre.");
}

if (lien == ""){
ok = false;
alert("Veuillez entrer le lien de l'article.");
}

if (ok){
  var contenu = "<div><h1 class=\"titre\">Découvrez "+titre+" sur  !</h1>\n<a href=\""+lien+"\" target="+onglet+">Ici</a></div>";
document.getElementById("code_genere").value = contenu;
document.getElementById("apercu").innerHTML = contenu;
}
}
</script>
</head>
<body>

<div id="formulaire">

<h1>Générer un code</h1>

<h2>Veuillez remplir le formulaire suivant :</h2>

<form action="#" method="post" id="rempli">
<label>Titre de l'Article</label> :<input type="text" name="titre" size="30" maxlength="200"/><br />
<label>Lien de l'Article</label> :<input type="text" name="lien" size="30" maxlength="400"/><br />

<label>Ouvrir dans un nouvel onglet?</label> :
<select name="onglet">
<option value="_blank">Oui</option>
<option value="">Non</option>
</select>
<br />
<input type="button" onClick="verif(this.form)" value="Générer le code" />
</form>
<br /><br />
<h2>Aperçu du rendu :</h2>
<div id="apercu"> </div>
<form>
<label>Voici le code à copier/coller</label><br /> <input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code_genere').select();" />
<br />
<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.
  • 0

Résolu Re: Probleme de Générateur

Message par Daisuke-Aniki le Mar 4 Fév 2014 - 23:30

Bonsoir et merci de votre aide, cela fonctionne parfaitement ^_^
C'est incroyable comme un oeil extérieur peut pointer le doigt sur des erreurs bêtes mais dont on ne s'aperçoit pas quand on regarde son propre code, alors que c'est idiot pour la plupart x)
Ceci dit j'ai appris beaucoup de choses par votre correction, je vous remercie énormément Smile
Passez une bonne soirée Smile

Daisuke-Aniki
***

Masculin
Messages : 109
Inscrit(e) le : 20/03/2013

http://jonetsu-yume.jeun.fr/
Daisuke-Aniki 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