Bouton générer le code

Version imprimable

30/07/2011, 00h08
crashfire

Bouton générer le code

Bonjour a tous,

Je m'explique, dans un formulaire on trouverais exemple:

Titre: teste
Message: teste1
Source: teste2
....

Ce que je voudrais c'est que le bouton génère le code HTML tu formulaire remplie donc les " titre" et le contenu des champs, la mise en forme...

Le but final est de pouvoir publier sur un poste de forum tous la même structure d'annonce.

Par avance merci de votre aide
30/07/2011, 00h27
kOrt3x

Bonsoir,

Je pense que le HTML ne va pas suffire, il faudra sûrement ajouter du JavaScript.
30/07/2011, 00h42
crashfire

Je suis ouvert au proposition.
Mais connaissance sont assez basique, je suis capable de crée le formulaire en HTML ou en PHP et ce n'est pas de l'acquis non plus.
30/07/2011, 12h53
Invité

Bonjour,
Si c'est de la gestion-affichage d'articles, tu peux t'inspirer de ca :
Système de Gestion-Affichage de Nouvelles (Avec éditeur wysiwyg, photo et fichier joint)

Si c'est d'un forum dont tu as besoin : phpbb, PunBB, invision, ...
30/07/2011, 18h21
crashfire

Bonjour et merci pour ce lien qui est très intéressant, mais je voudrais quelque chose de plus simple sachant que je ne serais pas le seul a m'en servir.

Je trouver un formulaire qui ressemble assez a ce que je voudrais
Generateur de demande

Quelqu'un pourrait il m'explique comme construire se genre de chose

Encore merci de votre aide
30/07/2011, 19h13
Bovino

Citation:

Ce que je voudrais c'est que le bouton génère le code HTML

Heu... lequel ? :koi:
30/07/2011, 19h15
crashfire

Celui du formulaire que l'on vient de remplir avec le titre et les contenue des champs
30/07/2011, 19h26
Bovino

8O
Tu veux que ton formulaire affiche le code de ton formulaire ???
Je doute que ce soit vraiment ton objectif, mais c'est assez simple :

Code:

<input type="button" onclick="alert(this.form.innerHTML)" value="Afficher le code de ce formulaire" />

:aie:
30/07/2011, 19h38
crashfire

Effectivement ce n'est pas exactement ca mais ca s'y approche

dans le fond une fois le formulaire completé faudrait que le code géneré affiche un code a coller sur le poste du forum qui donnerais exemple ceci

Titre: Titre1
Article: Blablabla
Source: htp://truc.com

Si cela peux aider voici le code de mon formulaire,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fornulaire de nouvelles</title>
<link rel="stylesheet" type="text/css" href="http://toutpourlagent.hebergratuit.com/formulairenews/view.css" media="all">
<script type="text/javascript" src="http://toutpourlagent.hebergratuit.com/formulairenews/view.js"></script>
 
</head>
	<img id="top" src="http://toutpourlagent.hebergratuit.com/formulairenews/top.png" alt="">
	<div id="form_container">
 
		<h1><a>Fornulaire de nouvelles</a></h1>
 
		<form id="form_220528" class="appnitro" method="post" action="">
					<div class="form_description">
			<h2>Formulaire de nouvelles</h2>
			<p>Utiliser ce formulaire pour publier une nouvelle</p>
		</div>						
			<ul>
 
					<li id="li_1">
		<label class="description" for="element_1">Titre </label>
 
		<div>
			<input id="element_1" name="element_1" class="element text large" maxlength="255" value="" type="text"> 
		</div> 
		</li>
		<li id="li_4" >
		<label class="description" for="element_4">Image </label>
		<div>
			<input id="element_4" name="element_4" class="element file" type="file"/> 
		</div>  
		</li>		<li id="li_2">
		<label class="description" for="element_2">Article </label>
		<div>
			<textarea id="element_2" name="element_2" class="element textarea medium"></textarea> 
		</div> 
		</li>		<li id="li_3">
 
		<label class="description" for="element_3">Source </label>
		<div>
			<input id="element_3" name="element_3" class="element text small" maxlength="255" value="http://" type="text"> 
		</div> 
		</li>
 
					<p align="center"></p><li class="buttons">
			    <input name="form_id" value="220528" type="hidden">
 
				<input id="saveForm" class="button_text" name="submit" value="Générer" type="submit">
		</li>
 
			</ul>
		</form>	
		<div id="footer">
 
		</div>
	</div>
	<img id="bottom" src="http://toutpourlagent.hebergratuit.com/formulairenews/bottom.png" alt="">
<label class="description" for="element_2">Code à copier</label>
		<div>
			<textarea id="element_2" name="element_2" class="element textarea medium"></textarea> 
		</div> 
				<li id="li_3">
	</li>

Donc le formulaire compléter on clique sur générer, le code s'affiche dans le champs "code a copier", on copie ce dit code et on le colle sur le poste de forum, résultat les messages du forum on la même structure, la même taille d'écriture, couleur ect...

30/07/2011, 19h51
Bovino

Oui, c'est bien ce que je pensais :mrgreen:

Tu auras effectivement essentiellement besoin de JavaScript pour cela, ceci dit, le but de ce forum n'est pas de faire le boulot à ta place mais de t'aider à résoudre les problèmes que tu rencontres.
Je te conseille donc de commencer par découvrir JavaScript, pour ton cas, tu auras besoin des fonction de récupération des valeurs de champ de formulaire (propriété value des balises de formulaire) puis de générer une chaine HTML avec ça.
30/07/2011, 20h01
crashfire

Merci, je vais regarder dans cette direction.

Effectivement je ne veux pas l'avoir tout cuit dans le bec j'aime mieux comprendre ce que je fais et pourquoi...

Pour l'instant je suis a l'etape de regarder un code et l'adapter pour comprendre comment cela fonctionne

Bonjour,
commence d'abord par corriger ton code : balises manquantes ou en trop, mal placées ou inutiles, ...

Dans le principe (et en essayant d'avoir un code "propre") :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<title> test </title>
	<style type="text/css">
		#idcodeacoller { width:400px; padding:5px; border:1px solid #666; background:#ddd; }
	</style>
 
	<script type="text/javascript">
	/* equivalent de nl2br() php : pour affichage correct des passages a la ligne provenant des textarea */
	function nl2br(str) {
	   return str.replace(/\n/g,"<br />");
	};
	/* AFFICHAGE du CODE HTML */
	function affichecodehtml() {
		// recuperation des valeurs des champs du formulaire
		var valtitre = document.getElementById('idtitre').value;
		var valmessage = document.getElementById('idmessage').value; // textarea
		valmessage = nl2br(valmessage);
		var valsource = document.getElementById('idsource').value;
		// construction de la mise en page html du code a afficher
		var codehtml = '';
		codehtml += '<p><b>Titre :</b> ' + valtitre + '</p>' + "\n";
		codehtml += '<p><b>Message :</b> ' + valmessage + '</p>' + "\n";
		codehtml += '<p><b>Source :</b> ' + valsource + '</p>' + "\n";
		// on place ce code dans la balise de destination
		document.getElementById('idcodeacoller').innerHTML = codehtml;
	};
	</script>
 
</head>
<body>
 
<h4>Formulaire</h4>
<form method="post" action="">
<fieldset>
	<p>
		<label for="idtitre">Titre : </label>
		<input id="idtitre" name="element_1" type="text" value="" /> 
	</p>
	<p>
		<label for="idmessage">Message : </label>
		<textarea id="idmessage" name="element_2" cols="20" rows="5"></textarea>
	</p>
	<p>
		<label for="idsource">Source : </label>
		<input id="idsource" name="element_3" type="text" value="" /> 
	</p>
	<p>
		<input type="button" value="Générer le code" onclick="affichecodehtml();" /> 
	</p>
</fieldset>
</form>
 
<h4>Copier-Coller ce code :</h4>
<div id="idcodeacoller"></div>
 
</body>
</html>

On peut aussi avoir un résultat intéressant de cette manière (sans bouton, mais affichage automatique du code) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form method="post" action="">
<fieldset>
	<p>
		<label for="idtitre">Titre : </label>
		<input id="idtitre" name="element_1" type="text" value="" onkeyup="affichecodehtml();" /> 
	</p>
	<p>
		<label for="idmessage">Message : </label>
		<textarea id="idmessage" name="element_2" cols="20" rows="5" onkeyup="affichecodehtml();"></textarea>
	</p>
	<p>
		<label for="idsource">Source : </label>
		<input id="idsource" name="element_3" type="text" value="" onkeyup="affichecodehtml();" /> 
	</p>
</fieldset>
</form>