Injecter du HTML avec des champs dans un formulaire

Euh en fait je recompose plus ou moins le code en fonction de certaines choses :
Je te poste ma page, ça te vas ou il faut que je condense ?
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!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" lang="en-US"><head profile="http://gmpg.org/xfn/11"><link media="all" href="theme/widget097.css" type="text/css" rel="stylesheet">
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="theme/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="theme/print.css" type="text/css" media="print">
<link rel="stylesheet" href="theme/defaults.css" type="text/css" media="screen, projection">
 
<link rel="stylesheet" href="theme/style.css" type="text/css" media="screen, projection">
 
<link rel="stylesheet" id="wp-pagenavi-css" href="theme/pagenavi-css.css" type="text/css" media="all">
 
<!-- Featured Posts -->
<script src="theme/jquery.js" type="text/javascript"></script>
<!-- /jquery.cycle.all.min.js -->
 
 
 
<body class="home blog">
 
<div id="wrapper">
 
    <div id="container" class="container">
 
        <div id="header" class="span-24">
 
            <div class="branding"></div><!-- .branding --><!-- .header-right -->
 
        </div><!-- #header -->
 
 
    <div id="main" class="span-24">
 
        <div id="content-wrap" class="span-16">
          <div class="content">
 
 
            <div class="post-wrap">
 
        <div class="post-34 post type-post status-publish format-standard hentry category-apple-mac category-featured-posts category-imac category-sports tag-elements tag-sports post clearfix" id="post-34">
          <h2 class="title"><a href="" title="" rel="bookmark">Profil de structure (emplacements des widgets)</a></h2>
            <div class="entry"> <script src="http://pifex.fr/comptes/effilab/pifex.js"></script>
 
 
<script>
 
var numEmplacement=0;
function getListe()
{
        numEmplacement++;
        return '<select id="emplacement'+numEmplacement+'" style="width:200px">      <option value="aucun">Aucun</option>      <option value="conv">Conversions - Somme (Chiffre)</option>      <option value="cpa">CPA - Moyenne (Chiffre)</option>      <option value="convVsCpa">Conv Vs CPA (Courbes)</option>      <option value="cClics">Clics - Somme (Chiffre)</option>      <option value="clics">Clics (Courbe)</option>      <option value="regions">Clics par régions (Carte)</option>      <option value="cCost">Cost - Somme (Chiffre)</option>      <option value="clicsVsCost">Clics Vs Cost (Courbes)</option>      <option value="campagnesParCost">Campagnes par Cost (Camembert)</option>      <option value="motsClefsNua">Mots clés (Nuage mots)</option>      <option value="motsClefs">Mots clés (Histogramme)</option>      <option value="motsClefsAnal">Mots clés naturels (Histogramme)</option>      <option value="motsClefsInternaute">Mots clés rééllement tapés (Histogramme)</option>      <option value="SeoVsSea">SEA vs SEO vs Affiliation (Cercles)</option>      <option value="ctr">CTR (Chiffre)</option>      <option value="ctrSearch">CTR Search (Chiffre)</option>      <option value="ctrContent">CTR Content (Chiffre)</option>      <option value="positionMoyenne">Position moyenne (Chiffre)</option>      <option value="positionMoyenneSearch">Position moyenne Search (Chiffre)</option>      <option value="positionMoyenneContent">Position moyenne Content (Chiffre)</option>      <option value="annoncesSearch">Annonces Search</option>      <option value="annoncesContent">Annonces Content</option>      <option value="landing">Landing Page (Histogramme)</option>      <option value="emplacements">Emplacements (Histogramme)</option>      <option value="ttr">TTR (Chiffre)</option>      <option value="roi">ROI (Chiffre)</option>      <option value="delai">Délais d\'achat (Histogramme)</option>      <option value="jourVsConv">Jour Cs Conversions (Radar)</option>      <option value="heureVsConv">Heure Vs conversions (Histogramme)</option>      <option value="partClics">Clics : Google vs Partenaires (Histogramme)</option>      <option value="parImpressions">Impressions : Google vs Partenaires (Histogramme)</option>      <option value="parConv">Conversions : Google vs Partenaires (Histogramme)</option>      <option value="partCost">Coût : Google vs Partenaires (Histogramme)</option>      <option value="partCPA">CPA : Google vs Partenaires (Histogramme)</option> </select>';
}
 
function patron(num)
{
        document.getElementById('patron').value=num;
        numEmplacement=0;
        
        switch (num)
        {
                case 1:
                        document.getElementById('structure').innerHTML='<table width="100%" border="0">  <tr>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>  </tr>  <tr>    <td colspan="2" align="center" valign="middle">'+getListe()+'</td>    <td colspan="2" align="center" valign="middle">'+getListe()+'</td>  </tr>  <tr>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>  </tr></table>';
                break;  
                
                
                case 2:
                        document.getElementById('structure').innerHTML='<table width="100%" border="0">  <tr>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>  </tr>  <tr>    <td colspan="4" align="center" valign="middle">'+getListe()+'</td>    </tr>  <tr>    <td colspan="4" align="center" valign="middle"><table width="100%" border="0">  <tr>    <td>'+getListe()+'</td>    <td>'+getListe()+'</td>    <td>'+getListe()+'</td>  </tr></table></td>    </tr></table>';
                break;  
                
                
                case 3:
                        document.getElementById('structure').innerHTML='<table width="100%" border="0">  <tr>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>    <td align="center" valign="middle">'+getListe()+'</td>  </tr>  <tr>    <td colspan="2" align="center" valign="middle">'+getListe()+'</td>  <td colspan="2" align="center" valign="middle">'+getListe()+'</td>  </tr>  <tr>    <td colspan="2" align="center" valign="middle">'+getListe()+'</td>    <td colspan="2" align="center" valign="middle">'+getListe()+'</td>    </tr></table>';
                break;  
        }
}
 
function setItemEmplacement(idEmplacement,monItem)
{
        var liste=document.getElementById('emplacement'+idEmplacement);
        for(i=0;i<liste.options.length;i++)
        {
                if(liste.options[i].value==monItem)
                        liste.selectedIndex = i
        }
}
 
function setModele(modele)
{
        //de gauche à droite puis de haut en bas
        if(modele=='sea')
        {
                patron(1)
                
                setItemEmplacement(1,'cClics');
                setItemEmplacement(2,'cCost');
                setItemEmplacement(3,'conv');
                setItemEmplacement(4,'cpa');
                setItemEmplacement(5,'clicsVsCost');
                setItemEmplacement(6,'convVsCpa');
                setItemEmplacement(7,'campagnesParCost');
                setItemEmplacement(8,'motsClefs');
                setItemEmplacement(9,'SeoVsSea');
                setItemEmplacement(10,'regions');
        }
        else if(modele=='campagnes')
        {
                patron(2)
                
                setItemEmplacement(1,'aucun');
                setItemEmplacement(2,'cClics');
                setItemEmplacement(3,'cCost');
                setItemEmplacement(4,'aucun');
                setItemEmplacement(5,'clicsVsCost');
                setItemEmplacement(6,'campagnesParCost');
                setItemEmplacement(7,'motsClefs');
                setItemEmplacement(8,'regions');
        }
        else if(modele=='conversions')
        {
                patron(2)
                
                setItemEmplacement(1,'conv');
                setItemEmplacement(2,'cpa');
                setItemEmplacement(3,'ttr');
                setItemEmplacement(4,'roi');
                setItemEmplacement(5,'convVsCpa');
                setItemEmplacement(6,'delai');
                setItemEmplacement(7,'jourVsConv');
                setItemEmplacement(8,'heureVsConv');
        }
        else if(modele=='annonces')
        {
                patron(3)
                
                setItemEmplacement(1,'ctrSearch');
                setItemEmplacement(2,'positionMoyenneSearch');
                setItemEmplacement(3,'ctrContent');
                setItemEmplacement(4,'positionMoyenneContent');
                setItemEmplacement(5,'annoncesSearch');
                setItemEmplacement(6,'annoncesContent');
                setItemEmplacement(7,'landing');
                setItemEmplacement(8,'emplacements');
        }
}
</script>
 
 
<form id="form" name="form" method="post" action=""> 
<div align="right">Modèle : <select name="modele" onchange="setModele(this.options[this.selectedIndex].value)">
              <option value="sea">Bilan des Performances SEA</option>
              <option value="campagnes">Campagnes et mots clés</option>
              <option value="conversions">Conversions</option>
              <option value="annonces">Annonces et Landing Page</option>
            </select></div>
  <input name="patron" type="hidden" id="patron" value="1" />
  <br /><hr />
 
 
<div id="structure"></div>
 
  <p>
  <div style="text-align: center">
      <p>
        <input type="submit" name="Générer" id="Générer" value="Valider" style="font-size:25px" />
      </p>
  </div>
  <br />
    <select id="df" style="width:200px;display:none">
      <option value="aucun">Aucun</option>
      <option value="conv">Conversions - Somme (Chiffre)</option>
      <option value="cpa">CPA - Moyenne (Chiffre)</option>
      <option value="convVsCpa">Conv Vs CPA (Courbes)</option>
      <option value="cClics">Clics - Somme (Chiffre)</option>
      <option value="clics">Clics (Courbe)</option>
      <option value="regions">Clics par régions (Carte)</option>
      <option value="cCost">Cost - Somme (Chiffre)</option>
      <option value="clicsVsCost">Clics Vs Cost (Courbes)</option>
      <option value="campagnesParCost">Campagnes par Cost (Camembert)</option>
      <option value="motsClefsNua">Mots clés (Nuage mots)</option>
      <option value="motsClefs">Mots clés (Histogramme)</option>
      <option value="motsClefsAnal">Mots clés naturels (Histogramme)</option>
      <option value="motsClefsInternaute">Mots clés rééllement tapés (Histogramme)</option>
      <option value="SeoVsSea">SEA vs SEO vs Affiliation (Cercles)</option>
      <option value="ctr">CTR (Chiffre)</option>
      <option value="ctrSearch">CTR Search (Chiffre)</option>
      <option value="ctrContent">CTR Content (Chiffre)</option>
      <option value="positionMoyenne">Position moyenne (Chiffre)</option>
      <option value="positionMoyenneSearch">Position moyenne Search (Chiffre)</option>
      <option value="positionMoyenneContent">Position moyenne Content (Chiffre)</option>
      <option value="annoncesSearch">Annonces Search</option>
      <option value="annoncesContent">Annonces Content</option>
      <option value="landing">Landing Page (Histogramme)</option>
      <option value="emplacements">Emplacements (Histogramme)</option>
      <option value="ttr">TTR (Chiffre)</option>
      <option value="roi">ROI (Chiffre)</option>
      <option value="delai">Délais d'achat (Histogramme)</option>
      <option value="jourVsConv">Jour Cs Conversions (Radar)</option>
      <option value="heureVsConv">Heure Vs conversions (Histogramme)</option>
      <option value="partClics">Clics : Google vs Partenaires (Histogramme)</option>
      <option value="parImpressions">Impressions : Google vs Partenaires (Histogramme)</option>
      <option value="parConv">Conversions : Google vs Partenaires (Histogramme)</option>
      <option value="partCost">Coût : Google vs Partenaires (Histogramme)</option>
      <option value="partCPA">CPA : Google vs Partenaires (Histogramme)</option>
    </select>
    <br />
  </p>
  <script>
  setModele('sea');
</script>
</form>
            </div>
        </div>
    </div><!-- Post ID 34 --><!-- Post ID 63 --><!-- Post ID 62 --><!-- Post ID 61 --><!-- Post ID 60 --><!-- Post ID 59 -->
 
 
 
    <div class="navigation clearfix"></div><!-- .navigation -->
 
 
 
  </div><!-- .content -->
 
 
    </div><!-- #content-wrap --><!-- #primary-sidebar-wrap -->
 
</div><!-- #main -->
 
 
    <div id="footer-wrap" class="span-24">
 
        <div id="footer">
 
            <div id="copyrights">Effilab</div>
 
            <!-- #copyrights -->
 
            <div id="credits"></div><!-- #credits -->
 
        </div><!-- #footer -->
 
    </div><!-- #wrap-footer -->
 
</div><!-- #container -->
 
</div><!-- #wrapper -->
<div id="bas"> </div>
 
 
</body></html>