Previsualisation jquery
Résolu
novice
-
novice -
novice -
A voir également:
- Previsualisation jquery
- Prévisualisation - Guide
- JQuery non interprété - Forum Wordpress
- Prévisualisation premiere pro - Forum Montage et acquisition vidéo
- Redirection Jquery onclick ✓ - Forum Javascript
- Jquery refresh dom ✓ - Forum Javascript
<!--début du titre--> <h1 id="titre-nouveau-formulaire">nouveau</h1> <!--fin du titre--> <!--début du global du formulaire--> <form id="global-nouveau" action="toto.php" method="post" > <fieldset> <!-- par exemple on peut le mettre par là le contenue du mesage du texterea--> <legend>prévisualiser</legend> <div class="global-nouveau-formulaire">ici on met le contenue du texterea dés qu'on appuie sur le boutton prévisualiser</div> <legend>nouveau mesage</legend> <div class="global-nouveau-formulaire"><label>titre du sujet :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" placeholder="titre du sujet" name="titresujet" id="titresujet" required /></div></div> <div class="global-nouveau-formulaire"><label>Icône :</label><?php include "../../select/formulaire/nouveau/icone/index.php";?></div> <div class="global-nouveau-corp-message"><label>Corps du message</label><div class="global-corp-message"><div class="global-nouveau-boutton-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/button.php";?></div><div class="global-nouveau-select-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/select.php";?></div><textarea data-autoresize spellcheck="false" placeholder="nouveau message" ></textarea></div></div> <legend>options supplémentaires</legend> <div class="global-nouveau-formulaire"><label>piéces jointes :</label><label for="file" class="label-file">gérer les pièces jointes</label><input id="file" class="input-file" type="file"></div> <div class="global-nouveau-formulaire"><label>motif :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" id="motif" name="motif" placeholder="motif" /></div></div> <div class="global-nouveau-formulaire"><label>type :</label><?php include "../../select/formulaire/nouveau/type/index.php";?></div> <!--début du boutton de formulaire--> <nav id="global-button-nouveau-formulaire"><ul><li><button class="icon-button-previsualiser" type="submit">prévisualiser</button></li><li><button class="icon-button-ajouter" type="submit">envoyer</button></li></ul></nav> <!--fin du boutton de formulaire--> </fieldset> </form> <!--fin du global du formulaire-->merci
idem pour le textarea
Vu que tu veux le faire en JS, il faut retirer le "submit" du bouton
Ensuite, côté JS, tu peux faire
function previsualiser(){ var contenuTextArea = $("#nouv_msg").val(); console.log(contenuTextArea); // pour voir dans la console du navigateur $("#zone_previ").html(contenuTextArea); }mais
j'aimeras qu'on ne vois pas ce code et des qu'on appuie sur le bouitton previsualiser ca apparaît
je crois qu'il faut faire un display none pour cacher le cadre et des qu'on clique sur previsualiser ca se met un dysplay blok
merci
par exemple, pour masquer
$("#zone_previ").css("display","none");Sinon en jquery il existe les fonctions hide() et show()
$("#zone_previ").hide();je te met tout mon code
le code html
<!--début du global du formulaire--> <form id="global-nouveau" action="toto.php" method="post" > <fieldset> <!--début de cette parti sera caché--> <div id="zone-previ"> <legend>prévisualiser</legend> <div class="global-nouveau-formulaire" id="zone-previ"></div> </div> <!--fin de cette parti sera caché--> <legend>nouveau mesage</legend> <div class="global-nouveau-formulaire"><label>titre du sujet :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" placeholder="titre du sujet" name="titresujet" id="titresujet" required /></div></div> <div class="global-nouveau-formulaire"><label>Icône :</label><?php include "../../select/formulaire/nouveau/icone/index.php";?></div> <div class="global-nouveau-corp-message"><label>Corps du message</label><div class="global-corp-message"><div class="global-nouveau-boutton-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/button.php";?></div><div class="global-nouveau-select-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/select.php";?></div><textarea id="nouv_msg champtexte" name="texte" data-autoresize spellcheck="false" placeholder="nouveau message" onclick="view('textarea','viewDiv');"></textarea></div></div> <legend>options supplémentaires</legend> <div class="global-nouveau-formulaire"><label>piéces jointes :</label><label for="file" class="label-file">gérer les pièces jointes</label><input id="file" class="input-file" type="file"></div> <div class="global-nouveau-formulaire"><label>motif :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" id="motif" name="motif" placeholder="motif" /></div></div> <div class="global-nouveau-formulaire"><label>type :</label><?php include "../../select/formulaire/nouveau/type/index.php";?></div> <!--début du boutton de formulaire--> <nav id="global-button-nouveau-formulaire"><ul><li><button class="icon-button-previsualiser" type="button" onclick="previsualiser();">prévisualiser</button></li><li><button class="icon-button-ajouter" type="submit">envoyer</button></li></ul></nav> <!--fin du boutton de formulaire--> </fieldset> </form> <!--fin du global du formulaire-->mon code prévisualisation.js
$("#zone-previ").hide(); function previsualiser(){ var contenuTextArea = $("#nouv_msg").val(); console.log(contenuTextArea); // pour voir dans la console du navigateur $("#zone-previ").html(contenuTextArea); }et j'ai rajouter dans id champtexte et name="texte" dans le texterea afin de mettre des bbcode
j'ai mis
<input type="button" class="submit" value="Gras" onClick="balises('gras')" />et ds bbcode.js
function balises(typebal){ switch (typebal){ case "gras": var textoper = document.getElementById('champtexte').value; document.getElementById('champtexte').value = textoper + '[b][/b]' break; case "italique": var textoper = document.getElementById('champtexte').value; document.getElementById('champtexte').value = textoper + '[i][/i]' break case "souligné": var textoper = document.getElementById('champtexte').value; document.getElementById('champtexte').value = textoper + '[u][/u]' break case "url": var textoper = document.getElementById('champtexte').value; document.getElementById('champtexte').value = textoper + '[url=votre lien]nom du lien[/url]' break} }j'ai refais les bouttons j'ai mis
<nav id="global-nouveau-formulaire-button"><ul> <li><button class="icon-button-gras" type="button" onclick="insertTag('<gras>', '</gras>', 'textarea')"></button></li> <li><button class="icon-button-souligner" type="button" onclick="insertTag('<souligner>', '</souligner>', 'textarea')"></button></li> <li><button class="icon-button-italique" type="button" onclick="insertTag('<italique>', '</italique>', 'textarea')"></button></li> <li><button class="icon-button-barrer" type="button" onclick="insertTag('<barrer>', '</barrer>', 'textarea')"></button></li> <li><button class="icon-button-gauche" type="button" onclick="insertTag('<gauche>', '</gauche>', 'textarea')"></button></li> <li><button class="icon-button-centrer" type="button" onclick="insertTag('<centrer>', '</centrer>', 'textarea')"></button></li> <li><button class="icon-button-droite" type="button" onclick="insertTag('<droite>', '</droite>', 'textarea')"></button></li> <li><button class="icon-button-justifier" type="button" onclick="insertTag('<justifier>', '</justifier>', 'textarea')"></button></li> <li><button class="icon-button-puce" type="button" onclick="insertTag('<puce>', '</puce>', 'textarea')"></button></li> <li><button class="icon-button-numero" type="button" onclick="insertTag('<numero>', '</numero>', 'textarea')"></button></li> <li><button class="icon-button-lien" type="button" onclick="insertTag('<lien>', '</lien>', 'textarea')"></button></li> <li><button class="icon-button-arobase" type="button" onclick="insertTag('<mail>', '</mail>', 'textarea')"></button></li> <li><button class="icon-button-secret" type="button" onclick="insertTag('<secret>', '</secret>', 'textarea')"></button></li> <li><button class="icon-button-tableau" type="button"></button></li> <li><button class="icon-button-video" type="button" onclick="insertTag('<video>', '</video>', 'textarea')"></button></li> <li><button class="icon-button-image" type="button" onclick="insertTag('<image>', '</image>', 'textarea')"></button></li> <li><button class="icon-button-attention" type="button" onclick="insertTag('<attention>', '</attention>', 'textarea')"></button></li> <li><button class="icon-button-question" type="button" onclick="insertTag('<question>', '</question>', 'textarea')"></button></li> <li><button class="icon-button-information" type="button" onclick="insertTag('<information>', '</information>', 'textarea')"></button></li> <li><button class="icon-button-erreur" type="button" onclick="insertTag('<erreur>', '</erreur>', 'textarea')"></button></li> </ul></nav>a causse de tout ca ne veux pas fonctionné
j'aimerais cacher la zone prévisualisation
ensuite cliquer sur gras et italique etc....
ca se met dans le texterea ensuite on clique sur prévisualisation le boutton
et là ca fera apparaître le cadre de la prévisualisation
je sais que c'est un truc tout bête mais là je ne vois pas ou est le soucy
merci