Bonjour à tous,

je suis novice et du coup je sollicite votre aide .

J'ai crée un formulaire qui contient: titre, contenu & image avec:

- un input type submit qui est relié a ma requete sql

- & un bouton qui est relié a mon JS qui fait la pré visualisation.

En cliquant sur "Preview" j'afficher dans le DOM les éléments saisit dans le formulaire, jusqu'a la pas de problème.

Mais, est il possible lorsqu'on saisit dans le input type texte: <h1>Bonjour</h1>, m'afficher Bonjour en taille h1 & non "<h1>Bonjour</h1>" ?

Là est mon problème & je ne sais pas si cela est possible :/

Je remercie tout ceux ou celle qui prendront du temps sur mon problème

Voici mes codes si besoin:

<?php include 'layout/layout-headerModif.php' ;?>

<main class="form">
<h3>Modification d'article</h3>

  <form method="POST" action="update-actualite.class.php" enctype="multipart/form-data" id="ajouter">
    <fieldset>
      <legend>Modifier</legend>
      <div>
        <label for="titre">Titre: </label>
        <input type="text" id="titre" name="titre" value="<?= $article['titre']?>">
      </div>
      <div>
        <label for="contenu">Article: </label>
        <textarea id="contenu" name="contenu" rows="5"><?= $article['contenu']?></textarea>
      </div>
      <div>
        <label for="photo">Photo: </label>
        <input type="file" id="photo" name="photo">
        <img src="../upload/<?= $article['photo']?>" alt="<?= $article['photo']?>">
      </div>
      <input type="hidden" name="id_article" value="<?=$_GET['id'] ?>">
      <div>
        <input type="submit" name="envoyer" value="Envoyer" />
        <input type="button" name="previsualiser" value="previsualiser" id="previsualiser" />
        <a href="admin-actualite.class.php">Annuler</a>
      </div>
    </fieldset>
  </form>
  <article>
    <div id="previewTitle"></divpre>
    <div id="contents"></div>
  </article>
</main>
<?php include 'layout/layout-footer.php'; ?>

// Fonction déclenchée lors d'un clic sur le bouton
function onClickButton()
{
	console.log("cliqué");
  var titre = document.getElementById('titre').value;
  console.log(titre);
  var contenu = document.getElementById('contenu').value;
  console.log(contenu);

  document.getElementById('previewTitle').innerHTML = "<div></div>"
  document.getElementById('contents').innerHTML = "<div></div>"
}

/*************************************************************************************************/
/* ************************************** CODE PRINCIPAL *************************************** */
/*************************************************************************************************/
console.clear();
var preview = document.getElementById("previsualiser");

preview.addEventListener("click", onClickButton );

-
Edité par NathCode 16 novembre 2018 à 21:32:42