Bouton générer le code

**crashfire** · 30/07/2011, 00h08

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

**kOrt3x** · 30/07/2011, 00h27

Bonsoir,

Je pense que le HTML ne va pas suffire, il faudra sûrement ajouter du JavaScript.

**crashfire** · 30/07/2011, 00h42

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.

Invité · 30/07/2011, 12h53

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, ...

**crashfire** · 30/07/2011, 18h21

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

**Bovino** · 30/07/2011, 19h13

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

Heu... lequel ?

**crashfire** · 30/07/2011, 19h15

Celui du formulaire que l'on vient de remplir avec le titre et les contenue des champs

**Bovino** · 30/07/2011, 19h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**crashfire** · 30/07/2011, 19h38

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

**crashfire** · 30/07/2011, 19h44

Si cela peux aider voici le code de mon formulaire,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**Bovino** · 30/07/2011, 19h51

Oui, c'est bien ce que je pensais

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.

**crashfire** · 30/07/2011, 20h01

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

Invité · 31/07/2011, 10h43

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Bouton générer le code

JavaScript

Discussions similaires

Partager

Partager