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.

jreaux62 · 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

Citation:

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

jreaux62 · 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>

30/07/2011, 00h08	#1
crashfire Futur Membre du Club Inscription : janvier 2010 Messages : 82 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations forums : Inscription : janvier 2010 Messages : 82 Points : 16 Points : 16	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
	00

30/07/2011, 00h27	#2
kOrt3x Rédacteur/Modérateur Aurélien Gaymay Technicien Informatique/Etudiant Web Inscription : septembre 2006 Messages : 2 320 Détails du profil Informations personnelles : Nom : Aurélien Gaymay Âge : 29 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Technicien Informatique/Etudiant Web Secteur : Santé Informations forums : Inscription : septembre 2006 Messages : 2 320 Points : 7 272 Points : 7 272	Bonsoir, Je pense que le HTML ne va pas suffire, il faudra sûrement ajouter du JavaScript. __________________ QuickEvent : Prise de rendez-vous rapide pour iPhone/iPad et iPod Touch (AppStore) QuickEvent Lite : Prise de rendez-vous rapide pour iPhone/iPad et iPod Touch (AppStore) ______________________________________________________________________________________ La rubrique Mac - Les cours & tutoriels Mac - Critiques de Livres Mac
	00

30/07/2011, 12h53	#4
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	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, ... __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

30/07/2011, 19h26	#8
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 793 Points : 35 793	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" /> __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

30/07/2011, 19h51	#11
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 793 Points : 35 793	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. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

30/07/2011, 00h42	#3
crashfire Futur Membre du Club Inscription : janvier 2010 Messages : 82 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations forums : Inscription : janvier 2010 Messages : 82 Points : 16 Points : 16	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.
	00

30/07/2011, 18h21	#5
crashfire Futur Membre du Club Inscription : janvier 2010 Messages : 82 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations forums : Inscription : janvier 2010 Messages : 82 Points : 16 Points : 16	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
	00

30/07/2011, 19h15	#7
crashfire Futur Membre du Club Inscription : janvier 2010 Messages : 82 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations forums : Inscription : janvier 2010 Messages : 82 Points : 16 Points : 16	Celui du formulaire que l'on vient de remplir avec le titre et les contenue des champs
	00

30/07/2011, 19h38	#9
crashfire Futur Membre du Club Inscription : janvier 2010 Messages : 82 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations forums : Inscription : janvier 2010 Messages : 82 Points : 16 Points : 16	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
	00

30/07/2011, 20h01	#12
crashfire Futur Membre du Club Inscription : janvier 2010 Messages : 82 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations forums : Inscription : janvier 2010 Messages : 82 Points : 16 Points : 16	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email