Personnalisation d'un formulaire HTML

[Phyliono]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Tous les navigateurs
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.universiteuniverselle.com

Description du problème

Bonjour,

A partir du formulaire déjà créé (présenté en capture d'écran), j'aimerais à la place du champ Liste des présences, que ce soit un champ "input" où il y aurait seulement à cliquer sur un + pour ajouter d'autres noms d'utilisateurs (un champ serait équivalent à un nom d'utilisateur). J'aimerais la même chose pour la liste des achats mais avec deux champs par ligne : un champ "input" pour le nom d'utilisateur et un champ liste pour le nom de l'objet acheté. En fait, en fonction du Commerce qu'ils auront choisi dans le premier champ, une certaine liste d'objets apparaîtra alors.

Merci d'avance!

Code HTML de la page :

Code:

<script type="text/javascript">
function envoiMessage(form)
{
if(form.activite.value==' ')
{
alert('Vous devez indiquer un commerce');
return false;
}
else if(form.date.value==' ')
{
alert('Vous devez indiquer une date');
return false;
}
else if(form.h_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.h_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.lieu.value==' ')
{
alert('Vous devez indiquer un lieu');
return false;
}
else
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:ov: " + form.activite.value + '\n'
+ ":dt: " + form.date.value + '\n'
+ ":hr: " + form.h_debut.value + "" + form.m_debut.value + " à " + form.h_fin.value + "" + form.m_fin.value + '\n'
+ ":lu: " + form.lieu.value + '\n'
+ ":i: Liste des achats :" + '\n' + form.achat.value + '\n' + '\n'
+ ":ps: Liste des présences :" + '\n' + form.presence.value + "[/size][/td][/tr][/table]" + '\n';
 
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
 
form.subject.value = form.activite.value ;
return true;
}
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="return(envoiMessage(this))">
<input type="hidden" name="mode" value="reply" /><!--    Un nouveau topic sera créé    -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!--    Value 0: Sujet Normal (1 = post-it / 2 = annonce)    -->
<input type="hidden" name="message" value="" /> <!--    Contiendra le texte du message    -->
<input type="hidden" name="subject" value="" />
<input type="hidden" name="t" value="463" />

<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des marchands</h2>
</th>
</tr>
<tr>
  <td height="6">
  </td>
</tr>
<tr>
<td class="row1"><br /><div align="center">
  <span style="font-size:12px;">N'oubliez pas de noter les étudiants présents lorsque vous ouvrez un commerce.<br />
Indiquez également ceux qui ont achetés un objet dans la liste des présences.</span><br /><br />
 
<label for="activite"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Commerce :</strong> <font color="red">*</font></span></label>
<br />
<select name="activite" id="activite" class="formulaire" style="height:30px;">
<option value=" "></option>
<option value="Ouverture de l'Apple Store">Apple Store</option>
<option value="Ouverture du Levi's">Levi's</option>
<option value="Ouverture de la Boîte de Nuit">Boîte de Nuit</option>
<option value="Ouverture du Bar">Bar</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture de la Bijouterie">Bijouterie</option>
<option value="Ouverture de Carrefour">Carrefour</option>
<option value="Ouverture du Starbucks">Starbucks</option>
<option value="Ouverture de l'Animalerie">Animalerie</option>
<option value="Ouverture du Salon de voyance">Salon de voyance</option>
<option value="Ouverture de Häagen-Dazs">Häagen-Dazs</option>
<option value="Ouverture de la Pâtisserie">Pâtisserie</option>
<option value="Ouverture du Taxiphone">Taxiphone</option>
<option value="Ouverture du Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Musée">Musée</option>
<option value="Ouverture de Cultura">Cultura</option>
<option value="Ouverture de Foot Locker">Foot Locker</option>
<option value="Ouverture de la Pizzeria">Pizzeria</option>
<option value="Ouverture du Salon de beauté">Salon de beauté</option>
<option value="Ouverture du McCafé">McCafé</option>
<option value="Ouverture du Cinéma">Cinéma</option>
<option value="Ouverture de la Pharmacie">Pharmacie</option>
<option value="Ouverture du Jean-Paul Gaultier">Jean-Paul Gaultier</option>
<option value="Ouverture du McDonald's">McDonald's</option>
<option value="Ouverture de Duty Free">Duty Free</option>
<option value="Ouverture du Restaurant Réunionnais">Restaurant Réunionnais</option>
</select>
<br />
<br />
<label for="date"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Date :</strong> <font color="red">*</font></span></label>
<br />
<select name="date" id="date" class="formulaire" style="height:30px;">
<option value=" ">Date</option>
<option value="01 novembre">01 novembre</option>
<option value="02 novembre">02 novembre</option>
<option value="03 novembre">03 novembre</option>
<option value="04 novembre">04 novembre</option>
<option value="05 novembre">05 novembre</option>
<option value="06 novembre">06 novembre</option>
<option value="07 novembre">07 novembre</option>
<option value="08 novembre">08 novembre</option>
<option value="09 novembre">09 novembre</option>
<option value="10 novembre">10 novembre</option>
<option value="11 novembre">11 novembre</option>
<option value="12 novembre">12 novembre</option>
<option value="13 novembre">13 novembre</option>
<option value="14 novembre">14 novembre</option>
<option value="15 novembre">15 novembre</option>
<option value="16 novembre">16 novembre</option>
<option value="17 novembre">17 novembre</option>
<option value="18 novembre">18 novembre</option>
<option value="19 novembre">19 novembre</option>
<option value="20 novembre">20 novembre</option>
<option value="21 novembre">21 novembre</option>
<option value="22 novembre">22 novembre</option>
<option value="23 novembre">23 novembre</option>
<option value="24 novembre">24 novembre</option>
<option value="25 novembre">25 novembre</option>
<option value="26 novembre">26 novembre</option>
<option value="27 novembre">27 novembre</option>
<option value="28 novembre">28 novembre</option>
<option value="29 novembre">29 novembre</option>
<option value="30 novembre">30 novembre</option>
</select>
<br />
<br />

<label for="debut"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Début :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_debut" id="h_debut" class="formulaire" style="height:30px;width:195px;margin-right:5px;">
<option value=" ">Heures</option>
<option value="08h">08</option>
<option value="09h">09</option>
<option value="10h">10</option>
<option value="11h">11</option>
<option value="12h">12</option>
<option value="13h">13</option>
<option value="14h">14</option>
<option value="15h">15</option>
<option value="16h">16</option>
<option value="17h">17</option>
<option value="18h">18</option>
<option value="19h">19</option>
<option value="20h">20</option>
<option value="21h">21</option>
<option value="22h">22</option>
<option value="23h">23</option>
<option value="00h">00</option>
<option value="01h">01</option>
<option value="02h">02</option>
</select>
 
<select name="m_debut" id="m_debut" class="formulaire" style="height:30px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<option value="00">00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<br />
<br />
<label for="fin"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Fin :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_fin" id="h_fin" class="formulaire" style="height:30px;width:195px;margin-right:5px;">
<option value=" ">Heures</option>
<option value="08h">08</option>
<option value="09h">09</option>
<option value="10h">10</option>
<option value="11h">11</option>
<option value="12h">12</option>
<option value="13h">13</option>
<option value="14h">14</option>
<option value="15h">15</option>
<option value="16h">16</option>
<option value="17h">17</option>
<option value="18h">18</option>
<option value="19h">19</option>
<option value="20h">20</option>
<option value="21h">21</option>
<option value="22h">22</option>
<option value="23h">23</option>
<option value="00h">00</option>
<option value="01h">01</option>
<option value="02h">02</option>
</select>
 
<select name="m_fin" id="m_fin" class="formulaire" style="height:30px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<option value="00">00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<br />
<br />
<label for="lieu"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Lieu :</strong> <font color="red">*</font></span></label>
<br />
<select name="lieu" id="lieu" class="formulaire" style="height:30px;">
<option value=" "> </option>
<option value="Quartier commerçant ouest">Quartier commerçant ouest</option>
<option value="Quartier commerçant est">Quartier commerçant est</option>
<option value="Quartier commerçant nord">Quartier commerçant nord</option>
<option value="Quartier commerçant sud">Quartier commerçant sud</option>
</select>
<br />
<br />
<label for="achat"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Liste des achats :</strong></span>
  <br /><span style="font-family: ubuntu, verdana;font-size:10px;margin-left:15px;"><center><em><strong>Aller à la ligne pour chaque pseudo.</strong></em></center></span></label>
<br />
<textarea id="achat" name="achat" placeholder="Exemple : Objet - Pseudo" class="formulaire" style="height:275px; width:200px; resize:none;"></textarea>
<br />
<br />
<label for="presence"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Liste des présences :</strong></span>
  <br /><span style="font-family: ubuntu, verdana;font-size:10px;margin-left:15px;"><center><em><strong>Aller à la ligne pour chaque pseudo.</strong></em></center></span></label>
<br />
<textarea id="presence" name="presence" class="formulaire" style="height:275px; width:200px; resize:none;"></textarea>
<br />
<br />
</div>
</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;">
<tr class="modactions">
<td align="left" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Scoubifitz]

Bonjour,

A partir du formulaire déjà créé (présenté en capture d'écran), j'aimerais à la place du champ Liste des présences, que ce soit un champ "input" où il y aurait seulement à cliquer sur un + pour ajouter d'autres noms d'utilisateurs (un champ serait équivalent à un nom d'utilisateur). J'aimerais la même chose pour la liste des achats mais avec deux champs par ligne : un champ "input" pour le nom d'utilisateur et un champ liste pour le nom de l'objet acheté. En fait, en fonction du Commerce qu'ils auront choisi dans le premier champ, une certaine liste d'objets apparaîtra alors.

Merci d'avance!

Bonsoir,

Il faudrait donc un input text pour l'acheteur et une liste d'options pour l'objet , et qu'en fonction du choix du commerce , la liste d'options changerait ...
Et qu'en plus , pour chaque acheteur supplémentaire , la même liste apparaisse ...

- On peut créer un tableau (array), placé dans un script , pour récupérer les valeurs d'une liste suivant le choix de la liste des commerces .

- Puis , cloner cette liste et l'insérer à chaque ligne "acheteur-objet" supplémentaire .

- Bloquer la liste des commerces dès qu'il y a une 2e ligne "acheteur-objet" , et la débloquer quand on retire les lignes supplémentaires.

- Ajouter une liste optionnelle à coté de tout ça .

Je vous poste un code pour un essai :

Attention ! Le script d'envoi de ce code n'est pas fonctionnel ! c'est juste pour savoir si c'est ce que vous recherchez .

Code:

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.court{
height:25px;
width:180px!important;
margin:2px 5px;
}
#button_add,#button_del{
height:30px;
width:195px;
background:url(http://i18.servimg.com/u/f18/18/72/44/21/catego14.png);
font-weight:bold;
}
#button_add:hover,#button_del:hover{
background:url(http://i18.servimg.com/u/f18/18/72/44/21/catego15.png);
}</style>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2;

/* tableau options multiples */
monTableau = [];

monTableau[0] = ["Ouverture de l'Apple Store"];
monTableau[0][1] = [
"Apple 1",
"Apple 2",
"Apple 3",
"Apple 4",
"Apple 5"];

monTableau[1] = ["Ouverture du Levi's"];
monTableau[1][1] = [
"Levi's 1",
"Levi's 2",
"Levi's 3",
"Levi's 4",
"Levi's 5"];

monTableau[2] = ["Ouverture de la Boîte de Nuit"];
monTableau[2][1] = [
"Boîte",
"Boîte 2",
"Boîte 3",
"Boîte 4",
"Boîte 5"];

monTableau[3] = ["Ouverture du Bar l'Amical"];
monTableau[3][1] = [
"Bar",
"Bar 2",
"Bar 3",
"Bar 4",
"Bar 5"];

monTableau[4] = ["Ouverture du Concessionnaire"];
monTableau[4][1] = [
"car",
"car 2",
"car 3",
"car 4",
"car 5"];

monTableau[5] = ["Ouverture du Restaurant Suisse"];
monTableau[5][1] =  [
"Suisse",
"Suisse 2",
"Suisse 3",
"Suisse 4",
"Suisse 5"];

monTableau[6] = ["Ouverture de la Bijouterie"];
monTableau[6][1] = [
"Bijou",
"Bijou 2"];

monTableau[7] = ["Ouverture de Carrefour"];
monTableau[7][1] = [
"Carrefour",
"Carrefour 2"];

monTableau[8] = ["Ouverture du Starbucks"];
monTableau[8][1] = [
"Starbucks",
"Starbucks 2"];

monTableau[9] = ["Ouverture de l'Animalerie"];
monTableau[9][1] = [
"Animal",
"Animal 2"];

monTableau[10] == ["Ouverture du Salon de voyance"];
monTableau[10][1] = [
"voyance",
"voyance 2"];

monTableau[11] = ["Ouverture du Microsoft Store"];
monTableau[11][1] = [
"Store",
"Store 1"];

monTableau[12] = ["Ouverture de Häagen-Dazs"];
monTableau[12][1] = [
"Häagen",
"Häagen 2"];

monTableau[13] = ["Ouverture de la Pâtisserie"];
monTableau[13][1] = [
"Pâtisserie",
"Pâtisserie 2"];

monTableau[14] = ["Ouverture du Taxiphone"];
monTableau[14][1] = [
"Taxi",
"Taxi 2"];

monTableau[15] = ["Ouverture du Sushi Bar"];
monTableau[15][1] = [
"Sushi",
"Sushi 2"];

monTableau[16] = ["Ouverture du Musée"];
monTableau[16][1] = [
"Musée",
"Musée 2"];

monTableau[17] = ["Ouverture de Cultura"];
monTableau[17][1] = [
"Cultura",
"Cultura 2"];

monTableau[18] = ["Ouverture de Foot Locker"];
monTableau[18][1] = [
"Foot",
"Locker"];

monTableau[19] = ["Ouverture de la Pizzeria"];
monTableau[19][1] = [
"Pizzeria",
"Pizzeria 2"];

monTableau[20] = ["Ouverture du Salon de beauté"];
monTableau[20][1] = [
"beauté",
"beauté 2"];

monTableau[21] = ["Ouverture du McCafé"];
monTableau[21][1] = [
"McCafé",
"McCafé 2"];

monTableau[22] = ["Ouverture du Cinéma"];
monTableau[22][1] = [
"Cinéma",
"Cinéma 2"];

monTableau[23] = ["Ouverture de la Pharmacie"];
monTableau[23][1] = [
"Pharmacie",
"Pharmacie 2"];

/* changement d'options */
function jeu_onchange(strChoix)
{
document.post.objet1.options.length = 0;
for(var x=0;x<monTableau.length;x++)
{
if (monTableau[x][0] == strChoix)
{
var opt1="";
for(var y=0;y<monTableau[x][1].length;y++)
{
opt = y===0?
new Option(monTableau[x][1][y],monTableau[x][1][y],true,true):
new Option(monTableau[x][1][y],monTableau[x][1][y],false,false);
document.post.objet1.options[y] = opt;
opt1 += monTableau[x][1][y]+'<br />';
}
document.getElementById("com1").innerHTML = opt1;
}
}
}

// script du bouton d'ajout et de suppression
function add_achat(strChoix)
{
var tab1 = document.getElementById('tab1');

var div1 = document.createElement('div');
div1.id = 'div1'+nb_lignes;
var input1 = document.createElement('input');
input1.id = 'achat'+nb_lignes;
input1.name = 'achat'+nb_lignes;
input1.type = 'text';
input1.placeholder = 'Acheteur';
input1.className = 'formulaire court';
var tiret = document.createTextNode(" - ");
var select1 = document.createElement('select');
select1.id = 'objet'+nb_lignes;
select1.name = 'objet'+nb_lignes;
select1.className = 'formulaire court';

tab1.appendChild(div1);
div1.appendChild(input1);
div1.appendChild(tiret);
div1.appendChild(select1);

$( "#objet1 Option" ).clone().appendTo( "#objet"+nb_lignes );
$("#activite").attr('disabled', 'disabled');
nb_lignes++;
}
function del_achat()
{
if(nb_lignes>2)
{
nb_lignes--;
var tab1 = document.getElementById('tab1');
var div1 = document.getElementById('div1'+nb_lignes);
tab1.removeChild(div1);
$("#activite").removeAttr('disabled');}
}
function add_prez()
{
var tab2 = document.getElementById('tab2');

var div2 = document.createElement('div');
div2.id = 'div2'+nb_lignes;
var input3 = document.createElement('input');
input3.id = 'present'+nb_lignes;
input3.name = 'present'+nb_lignes;
input3.type = 'text';
input3.placeholder = 'Pseudo';
input3.className = 'formulaire court';

tab2.appendChild(div2);
div2.appendChild(input3);

nb_lignes++;
}
function del_prez()
{
if(nb_lignes>2)
{
nb_lignes--;
var tab2 = document.getElementById('tab2');
var div2 = document.getElementById('div2'+nb_lignes);
tab2.removeChild(div2);
}
}
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:ov: " + form.activite.value + '\n'
+ ":dt: " + form.j_date.value + " " + form.m_date.value + '\n'
+ ":hr: " + form.h_debut.value + "h" + form.m_debut.value + " à " + form.h_fin.value + "h" + form.m_fin.value + '\n'
+ ":lu: " + form.lieu.value + '\n'
+ ":i: Liste des achats :" + '\n' + form.achat.value + '\n' + '\n'
+ ":ps: Liste des présences :" + '\n' + form.presence.value + "[/size][/td][/tr][/table]" + '\n';
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
form.subject.value = form.activite.value ;
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)">
<input type="hidden" name="mode" value="reply" /><!--    Un nouveau topic sera créé    -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!--    Value 0: Sujet Normal (1 = post-it / 2 = annonce)    -->
<input type="hidden" name="message" value="" /> <!--    Contiendra le texte du message    -->
<input type="hidden" name="subject" value="" />
<input type="hidden" name="t" value="463" />

<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des marchands</h2>
</th>
</tr>
<tr>
<td height="6">
</td>
</tr>
<tr>
<td class="row1"><br /><div align="center">
<span style="font-size:12px;">N'oubliez pas de noter les étudiants présents lorsque vous ouvrez un commerce.<br />
Indiquez également ceux qui ont achetés un objet dans la liste des présences.</span><br /><br />

<label for="activite"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Commerce :</strong> <font color="red">*</font></span></label>
<br />
<select name="activite" id="activite" class="formulaire" style="height:30px;" onchange="jeu_onchange(this[this.selectedIndex].value)">
<option value=""></option>
<option value="Ouverture de l'Apple Store">Apple Store</option>
<option value="Ouverture du Levi's">Levi's</option>
<option value="Ouverture de la Boîte de Nuit">Boîte de Nuit</option>
<option value="Ouverture du Bar l'Amical">Bar l'Amical</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture du Restaurant Suisse">Restaurant Suisse</option>
<option value="Ouverture de la Bijouterie">Bijouterie</option>
<option value="Ouverture de Carrefour">Carrefour</option>
<option value="Ouverture du Starbucks">Starbucks</option>
<option value="Ouverture de l'Animalerie">Animalerie</option>
<option value="Ouverture du Salon de voyance">Salon de voyance</option>
<option value="Ouverture du Microsoft Store">Microsoft Store</option>
<option value="Ouverture de Häagen-Dazs">Häagen-Dazs</option>
<option value="Ouverture de la Pâtisserie">Pâtisserie</option>
<option value="Ouverture du Taxiphone">Taxiphone</option>
<option value="Ouverture du Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Musée">Musée</option>
<option value="Ouverture de Cultura">Cultura</option>
<option value="Ouverture de Foot Locker">Foot Locker</option>
<option value="Ouverture de la Pizzeria">Pizzeria</option>
<option value="Ouverture du Salon de beauté">Salon de beauté</option>
<option value="Ouverture du McCafé">McCafé</option>
<option value="Ouverture du Cinéma">Cinéma</option>
<option value="Ouverture de la Pharmacie">Pharmacie</option>
</select>
<br />
<br />
<label for="date"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Date :</strong> <font color="red">*</font></span></label>
<br />
<select name="j_date" id="j_date" class="formulaire" style="height:30px;width:195px;margin-right:5px;">
<option value=" ">Jour</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select name="m_date" id="m_date" class="formulaire" style="height:30px;width:195px;margin-left:5px;">
<option value=" ">Mois</option>
<option value="janvier">Janvier</option>
<option value="février">Février</option>
<option value="mars">Mars</option>
<option value="avril">Avril</option>
<option value="mai">Mai</option>
<option value="juin">Juin</option>
<option value="juillet">Juillet</option>
<option value="août">Août</option>
<option value="septembre">Septembre</option>
<option value="octobre">Octobre</option>
<option value="novembre">Novembre</option>
<option value="décembre">Décembre</option>
</select>
<br />
<br />
<label for="debut"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Début :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_debut" id="h_debut" class="formulaire" style="height:30px;width:195px;margin-right:5px;">
<option value=" ">Heures</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
</select>

<select name="m_debut" id="m_debut" class="formulaire" style="height:30px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<option value="00">00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<br />
<br />
<label for="fin"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Fin :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_fin" id="h_fin" class="formulaire" style="height:30px;width:195px;margin-right:5px;">
<option value=" ">Heures</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
</select>

<select name="m_fin" id="m_fin" class="formulaire" style="height:30px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<option value="00">00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<br />
<br />
<label for="lieu"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Lieu :</strong> <font color="red">*</font></span></label>
<br />
<select name="lieu" id="lieu" class="formulaire" style="height:30px;">
<option value=" "> </option>
<option value="Quartier commerçant ouest">Quartier commerçant ouest</option>
<option value="Quartier commerçant est">Quartier commerçant est</option>
<option value="Quartier commerçant nord">Quartier commerçant nord</option>
<option value="Quartier commerçant sud">Quartier commerçant sud</option>
</select>
<br />
<br />
<table>
<tr>
<td style="vertical-align:bottom;text-align:center;">
<label style="font:bold 11px ubuntu, verdana;">Liste des achats :</label>
</td>
<td style="vertical-align:top;text-align:center;">
<label style="font:bold 11px ubuntu, verdana;">Rappel de la liste<br />des objets</label>
</td>
</tr>
<tr>
<td id="tab1" style="vertical-align:top">
<input type="text" id="achat1" name="achat1" placeholder="Acheteur" class="formulaire court"/> - <select name="objet1" id="objet1" class="formulaire court"><option>choisissez un commerce</option></select>
</td>
<td rowspan="2" style="vertical-align:top;">
<div id="com1" style="text-align:left;width:100px;margin:auto;font-size:13px;" class="formulaire"></div>
</td>
</tr>
<tr>
<td style="vertical-align:bottom">
<input type="button" id="button_add" name="button_add" onClick="add_achat();" value="Ajoutez une ligne [?]" title="bloque la liste des commerces" />
<input type="button" id="button_del" name="button_del" onClick="del_achat();" value="Retirez une ligne [?]" title="débloque la liste des commerces" /></td>
</tr>
</table>
<br />
<br />
<label for="presence"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Liste des présences :</strong></span><div style="font-family: ubuntu, verdana;font-size:10px;margin-left:15px;"><center><em><strong>Aller à la ligne pour chaque pseudo.</strong></em></center></div></label>
<br />
<div id="tab2">
<input type="text" id="present1" name="present1" class="formulaire court" placeholder="Pseudo" /><br />
</div>
<input type="button" id="button_add" name="button_add" onClick="add_prez();" value="Ajoutez une ligne" />
<input type="button" id="button_del" name="button_del" onClick="del_prez();" value="Retirez une ligne" />
<br />
</div>
</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;">
<tr class="modactions">
<td align="left" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

[Phyliono]

Bonsoir,

Merci beaucoup, c'est déjà pas mal du tout.

C'est à peu près ce que je voulais, seulement, je ne veux pas Rappel de la liste des objets.
Par ailleurs, je ne veux pas le tiret entre le pseudo et la liste d'objets, je le veux seulement sur le message dans le sujet. Pour l'ajout d'une ligne ou la retirer, je ne veux pas des boutons en dessous mais ces boutons à côté de chaque ligne : https://i.servimg.com/u/f21/17/44/20/01/ajoute11.png et https://i.servimg.com/u/f21/17/44/20/01/ajoute10.png au passage de la souris pour ajouter (je sais faire ça) et https://i.servimg.com/u/f21/18/72/44/21/suppri10.png pour retirer.

Juste pour la date, je veux simple ce code à la place de séparer jour et mois :

Code:

<script type="text/javascript">
function envoiMessage(form)
{
if(form.activite.value==' ')
{
alert('Vous devez indiquer un commerce');
return false;
}
else if(form.date.value==' ')
{
alert('Vous devez indiquer une date');
return false;
}
else if(form.h_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.h_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.lieu.value==' ')
{
alert('Vous devez indiquer un lieu');
return false;
}
else
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:ov: " + form.activite.value + '\n'
+ ":dt: " + form.date.value + '\n'
+ ":hr: " + form.h_debut.value + "" + form.m_debut.value + " à " + form.h_fin.value + "" + form.m_fin.value + '\n'
+ ":lu: " + form.lieu.value + '\n'
+ ":i: Liste des achats :" + '\n' + form.achat.value + '\n' + '\n'
+ ":ps: Liste des présences :" + '\n' + form.presence.value + "[/size][/td][/tr][/table]" + '\n';
 
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
 
form.subject.value = form.activite.value ;
return true;
}
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="return(envoiMessage(this))">
<input type="hidden" name="mode" value="reply" /><!--    Un nouveau topic sera créé    -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!--    Value 0: Sujet Normal (1 = post-it / 2 = annonce)    -->
<input type="hidden" name="message" value="" /> <!--    Contiendra le texte du message    -->
<input type="hidden" name="subject" value="" />
<input type="hidden" name="t" value="586" />

<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des marchands</h2>
</th>
</tr>
<tr>
  <td height="6">
  </td>
</tr>
<tr>
<td class="row1"><br /><div align="center">
  <span style="font-size:12px;">N'oubliez pas de noter les étudiants présents lorsque vous ouvrez un commerce.<br />
Indiquez également ceux qui ont achetés un objet dans la liste des présences.</span><br /><br />
 
<label for="activite"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Commerce :</strong> <font color="red">*</font></span></label>
<br />
<select name="activite" id="activite" class="formulaire" style="height:30px;">
<option value=" "></option>
<option value="Ouverture de l'Apple Store">Apple Store</option>
<option value="Ouverture du Levi's">Levi's</option>
<option value="Ouverture de la Boîte de Nuit">Boîte de Nuit</option>
<option value="Ouverture du Bar">Bar</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture de la Bijouterie">Bijouterie</option>
<option value="Ouverture de Carrefour">Carrefour</option>
<option value="Ouverture du Starbucks">Starbucks</option>
<option value="Ouverture de l'Animalerie">Animalerie</option>
<option value="Ouverture du Salon de voyance">Salon de voyance</option>
<option value="Ouverture de Häagen-Dazs">Häagen-Dazs</option>
<option value="Ouverture de la Pâtisserie">Pâtisserie</option>
<option value="Ouverture du Taxiphone">Taxiphone</option>
<option value="Ouverture du Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Musée">Musée</option>
<option value="Ouverture de Cultura">Cultura</option>
<option value="Ouverture de Foot Locker">Foot Locker</option>
<option value="Ouverture de la Pizzeria">Pizzeria</option>
<option value="Ouverture du Salon de beauté">Salon de beauté</option>
<option value="Ouverture du McCafé">McCafé</option>
<option value="Ouverture du Cinéma">Cinéma</option>
<option value="Ouverture de la Pharmacie">Pharmacie</option>
<option value="Ouverture du Jean-Paul Gaultier">Jean-Paul Gaultier</option>
<option value="Ouverture du McDonald's">McDonald's</option>
<option value="Ouverture de Duty Free">Duty Free</option>
<option value="Ouverture du Restaurant Réunionnais">Restaurant Réunionnais</option>
<option value="Ouverture de la Confiserie">Confiserie</option>
<option value="Ouverture du Photographe">Photographe</option>
<option value="Ouverture du Balmain Society">Balmain Society</option>
</select>
<br />
<br />
<label for="date"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Date :</strong> <font color="red">*</font></span></label>
<br />
<select name="date" id="date" class="formulaire" style="height:30px;">
<option value=" ">Date</option>
<option value="01 décembre">01 décembre</option>
<option value="02 décembre">02 décembre</option>
<option value="03 décembre">03 décembre</option>
<option value="04 décembre">04 décembre</option>
<option value="05 décembre">05 décembre</option>
<option value="06 décembre">06 décembre</option>
<option value="07 décembre">07 décembre</option>
<option value="08 décembre">08 décembre</option>
<option value="09 décembre">09 décembre</option>
<option value="10 décembre">10 décembre</option>
<option value="11 décembre">11 décembre</option>
<option value="12 décembre">12 décembre</option>
<option value="13 décembre">13 décembre</option>
<option value="14 décembre">14 décembre</option>
<option value="15 décembre">15 décembre</option>
<option value="16 décembre">16 décembre</option>
<option value="17 décembre">17 décembre</option>
<option value="18 décembre">18 décembre</option>
<option value="19 décembre">19 décembre</option>
<option value="20 décembre">20 décembre</option>
<option value="21 décembre">21 décembre</option>
<option value="22 décembre">22 décembre</option>
<option value="23 décembre">23 décembre</option>
<option value="24 décembre">24 décembre</option>
<option value="25 décembre">25 décembre</option>
<option value="26 décembre">26 décembre</option>
<option value="27 décembre">27 décembre</option>
<option value="28 décembre">28 décembre</option>
<option value="29 décembre">29 décembre</option>
<option value="30 décembre">30 décembre</option>
<option value="31 décembre">31 décembre</option>
</select>
<br />
<br />

<label for="debut"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Début :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_debut" id="h_debut" class="formulaire" style="height:30px;width:195px;margin-right:5px;">
<option value=" ">Heures</option>
<option value="08h">08</option>
<option value="09h">09</option>
<option value="10h">10</option>
<option value="11h">11</option>
<option value="12h">12</option>
<option value="13h">13</option>
<option value="14h">14</option>
<option value="15h">15</option>
<option value="16h">16</option>
<option value="17h">17</option>
<option value="18h">18</option>
<option value="19h">19</option>
<option value="20h">20</option>
<option value="21h">21</option>
<option value="22h">22</option>
<option value="23h">23</option>
<option value="00h">00</option>
<option value="01h">01</option>
<option value="02h">02</option>
</select>
 
<select name="m_debut" id="m_debut" class="formulaire" style="height:30px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<option value="00">00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<br />
<br />
<label for="fin"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Fin :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_fin" id="h_fin" class="formulaire" style="height:30px;width:195px;margin-right:5px;">
<option value=" ">Heures</option>
<option value="08h">08</option>
<option value="09h">09</option>
<option value="10h">10</option>
<option value="11h">11</option>
<option value="12h">12</option>
<option value="13h">13</option>
<option value="14h">14</option>
<option value="15h">15</option>
<option value="16h">16</option>
<option value="17h">17</option>
<option value="18h">18</option>
<option value="19h">19</option>
<option value="20h">20</option>
<option value="21h">21</option>
<option value="22h">22</option>
<option value="23h">23</option>
<option value="00h">00</option>
<option value="01h">01</option>
<option value="02h">02</option>
</select>
 
<select name="m_fin" id="m_fin" class="formulaire" style="height:30px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<option value="00">00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<br />
<br />
<label for="lieu"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Lieu :</strong> <font color="red">*</font></span></label>
<br />
<select name="lieu" id="lieu" class="formulaire" style="height:30px;">
<option value=" "> </option>
<option value="Quartier commerçant ouest">Quartier commerçant ouest</option>
<option value="Quartier commerçant est">Quartier commerçant est</option>
<option value="Quartier commerçant nord">Quartier commerçant nord</option>
<option value="Quartier commerçant sud">Quartier commerçant sud</option>
</select>
<br />
<br />
<label for="achat"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Liste des achats :</strong></span>
  <br /><span style="font-family: ubuntu, verdana;font-size:10px;margin-left:15px;"><center><em><strong>Aller à la ligne pour chaque pseudo.</strong></em></center></span></label>
<br />
<textarea id="achat" name="achat" placeholder="Exemple : Pseudo - Objet" class="formulaire" style="height:275px; width:200px; resize:none;"></textarea>
<br />
<br />
<label for="presence"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Liste des présences :</strong></span>
  <br /><span style="font-family: ubuntu, verdana;font-size:10px;margin-left:15px;"><center><em><strong>Aller à la ligne pour chaque pseudo.</strong></em></center></span></label>
<br />
<textarea id="presence" name="presence" class="formulaire" style="height:275px; width:200px; resize:none;"></textarea>
<br />
<br />
</div>
</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;">
<tr class="modactions">
<td align="left" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

C'est parfait sinon ! Merci d'avance !

[Scoubifitz]

ça donnerait à peu près ceci :

Code:

<style>
#form_marchand label{
font:bold 11px ubuntu, verdana;
display:inline-block;
}
.court{
height:25px;
width:180px!important;
margin:2px 5px;
}
#button_add{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute11.png);
border:none;
}
#button_add:hover{
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute10.png);
}
#button_del{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/18/72/44/21/suppri10.png);
border:none;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://jqueryui.com/resources/demos/datepicker/datepicker-fr.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
dateFormat:"dd MM"
});
$( "#datepicker" ).datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$( "#datepicker" ).datepicker( "getDate" );
});
</script>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2;

/* tableau options multiples */
monTableau = [];

monTableau[0] = ["Ouverture de l'Apple Store"];
monTableau[0][1] = [
"Apple 1",
"Apple 2",
"Apple 3",
"Apple 4",
"Apple 5"];

monTableau[1] = ["Ouverture du Levi's"];
monTableau[1][1] = [
"Levi's 1",
"Levi's 2",
"Levi's 3",
"Levi's 4",
"Levi's 5"];

monTableau[2] = ["Ouverture de la Boîte de Nuit"];
monTableau[2][1] = [
"Boîte",
"Boîte 2",
"Boîte 3",
"Boîte 4",
"Boîte 5"];

monTableau[3] = ["Ouverture du Bar l'Amical"];
monTableau[3][1] = [
"Bar",
"Bar 2",
"Bar 3",
"Bar 4",
"Bar 5"];

monTableau[4] = ["Ouverture du Concessionnaire"];
monTableau[4][1] = [
"car",
"car 2",
"car 3",
"car 4",
"car 5"];

monTableau[5] = ["Ouverture du Restaurant Suisse"];
monTableau[5][1] =  [
"Suisse",
"Suisse 2",
"Suisse 3",
"Suisse 4",
"Suisse 5"];

monTableau[6] = ["Ouverture de la Bijouterie"];
monTableau[6][1] = [
"Bijou",
"Bijou 2"];

monTableau[7] = ["Ouverture de Carrefour"];
monTableau[7][1] = [
"Carrefour",
"Carrefour 2"];

monTableau[8] = ["Ouverture du Starbucks"];
monTableau[8][1] = [
"Starbucks",
"Starbucks 2"];

monTableau[9] = ["Ouverture de l'Animalerie"];
monTableau[9][1] = [
"Animal",
"Animal 2"];

monTableau[10] == ["Ouverture du Salon de voyance"];
monTableau[10][1] = [
"voyance",
"voyance 2"];

monTableau[11] = ["Ouverture du Microsoft Store"];
monTableau[11][1] = [
"Store",
"Store 1"];

monTableau[12] = ["Ouverture de Häagen-Dazs"];
monTableau[12][1] = [
"Häagen",
"Häagen 2"];

monTableau[13] = ["Ouverture de la Pâtisserie"];
monTableau[13][1] = [
"Pâtisserie",
"Pâtisserie 2"];

monTableau[14] = ["Ouverture du Taxiphone"];
monTableau[14][1] = [
"Taxi",
"Taxi 2"];

monTableau[15] = ["Ouverture du Sushi Bar"];
monTableau[15][1] = [
"Sushi",
"Sushi 2"];

monTableau[16] = ["Ouverture du Musée"];
monTableau[16][1] = [
"Musée",
"Musée 2"];

monTableau[17] = ["Ouverture de Cultura"];
monTableau[17][1] = [
"Cultura",
"Cultura 2"];

monTableau[18] = ["Ouverture de Foot Locker"];
monTableau[18][1] = [
"Foot",
"Locker"];

monTableau[19] = ["Ouverture de la Pizzeria"];
monTableau[19][1] = [
"Pizzeria",
"Pizzeria 2"];

monTableau[20] = ["Ouverture du Salon de beauté"];
monTableau[20][1] = [
"beauté",
"beauté 2"];

monTableau[21] = ["Ouverture du McCafé"];
monTableau[21][1] = [
"McCafé",
"McCafé 2"];

monTableau[22] = ["Ouverture du Cinéma"];
monTableau[22][1] = [
"Cinéma",
"Cinéma 2"];

monTableau[23] = ["Ouverture de la Pharmacie"];
monTableau[23][1] = [
"Pharmacie",
"Pharmacie 2"];

/* changement d'options */
function jeu_onchange(strChoix)
{
document.post.objet1.options.length = 0;
for(var x=0;x<monTableau.length;x++)
{
if (monTableau[x][0] == strChoix)
{
for(var y=0;y<monTableau[x][1].length;y++)
{
opt = y===0?
new Option(monTableau[x][1][y],monTableau[x][1][y],true,true):
new Option(monTableau[x][1][y],monTableau[x][1][y],false,false);
document.post.objet1.options[y] = opt;
}
}
}
}

// script du bouton d'ajout et de suppression
function add_achat(strChoix)
{
var tab1 = document.getElementById('tab1');

var div1 = document.createElement('div');
div1.id = 'div1'+nb_lignes;
var input1 = document.createElement('input');
input1.id = 'achat'+nb_lignes;
input1.name = 'achat'+nb_lignes;
input1.type = 'text';
input1.placeholder = 'Acheteur';
input1.className = 'formulaire court';
var select1 = document.createElement('select');
select1.id = 'objet'+nb_lignes;
select1.name = 'objet'+nb_lignes;
select1.className = 'formulaire court';

tab1.appendChild(div1);
div1.appendChild(input1);
div1.appendChild(select1);

$( "#objet1 Option" ).clone().appendTo( "#objet"+nb_lignes );
$("#activite").attr('disabled', 'disabled');
nb_lignes++;
}
function del_achat()
{
if(nb_lignes>2)
{
nb_lignes--;
var tab1 = document.getElementById('tab1');
var div1 = document.getElementById('div1'+nb_lignes);
tab1.removeChild(div1);
$("#activite").removeAttr('disabled');}
}
function add_prez()
{
var tab2 = document.getElementById('tab2');

var div2 = document.createElement('div');
div2.id = 'div2'+nb_lignes;
var input3 = document.createElement('input');
input3.id = 'present'+nb_lignes;
input3.name = 'present'+nb_lignes;
input3.type = 'text';
input3.placeholder = 'Pseudo';
input3.className = 'formulaire court';

tab2.appendChild(div2);
div2.appendChild(input3);

nb_lignes++;
}
function del_prez()
{
if(nb_lignes>2)
{
nb_lignes--;
var tab2 = document.getElementById('tab2');
var div2 = document.getElementById('div2'+nb_lignes);
tab2.removeChild(div2);
}
}
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:ov: " + form.activite.value + '\n'
+ ":dt: " + form.j_date.value + " " + form.m_date.value + '\n'
+ ":hr: " + form.h_debut.value + "h" + form.m_debut.value + " à " + form.h_fin.value + "h" + form.m_fin.value + '\n'
+ ":lu: " + form.lieu.value + '\n'
+ ":i: Liste des achats :" + '\n' + form.achat.value + '\n' + '\n'
+ ":ps: Liste des présences :" + '\n' + form.presence.value + "[/size][/td][/tr][/table]" + '\n';
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
form.subject.value = form.activite.value ;
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)" id="form_marchand">
<input type="hidden" name="mode" value="reply" /><!--    Un nouveau topic sera créé    -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!--    Value 0: Sujet Normal (1 = post-it / 2 = annonce)    -->
<input type="hidden" name="message" value="" /> <!--    Contiendra le texte du message    -->
<input type="hidden" name="subject" value="" />
<input type="hidden" name="t" value="463" />

<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des marchands</h2>
</th>
</tr>
<tr>
<td height="6">
</td>
</tr>
<tr>
<td class="row1"><br /><div align="center">
<span style="font-size:12px;">N'oubliez pas de noter les étudiants présents lorsque vous ouvrez un commerce.<br />
Indiquez également ceux qui ont achetés un objet dans la liste des présences.</span><br /><br />

<label for="activite">Commerce : <span style="color:red">*</span></label>
<br />
<select name="activite" id="activite" class="formulaire" style="height:30px;" onchange="jeu_onchange(this[this.selectedIndex].value)">
<option value=""></option>
<option value="Ouverture de l'Apple Store">Apple Store</option>
<option value="Ouverture du Levi's">Levi's</option>
<option value="Ouverture de la Boîte de Nuit">Boîte de Nuit</option>
<option value="Ouverture du Bar l'Amical">Bar l'Amical</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture du Restaurant Suisse">Restaurant Suisse</option>
<option value="Ouverture de la Bijouterie">Bijouterie</option>
<option value="Ouverture de Carrefour">Carrefour</option>
<option value="Ouverture du Starbucks">Starbucks</option>
<option value="Ouverture de l'Animalerie">Animalerie</option>
<option value="Ouverture du Salon de voyance">Salon de voyance</option>
<option value="Ouverture du Microsoft Store">Microsoft Store</option>
<option value="Ouverture de Häagen-Dazs">Häagen-Dazs</option>
<option value="Ouverture de la Pâtisserie">Pâtisserie</option>
<option value="Ouverture du Taxiphone">Taxiphone</option>
<option value="Ouverture du Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Musée">Musée</option>
<option value="Ouverture de Cultura">Cultura</option>
<option value="Ouverture de Foot Locker">Foot Locker</option>
<option value="Ouverture de la Pizzeria">Pizzeria</option>
<option value="Ouverture du Salon de beauté">Salon de beauté</option>
<option value="Ouverture du McCafé">McCafé</option>
<option value="Ouverture du Cinéma">Cinéma</option>
<option value="Ouverture de la Pharmacie">Pharmacie</option>
</select>
<br />
<br />
<label for="datepicker">Date : <span style="color:red">*</span></label><br />
<input type="text" id="datepicker" name="datepicker" class="formulaire" required="required" /><br />
<br />
<label for="debut">Début : <span style="color:red">*</span></label>
<br />
<select name="h_debut" id="h_debut" class="formulaire" style="height:30px;width:195px;margin-right:5px;">
<option value=" ">Heures</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
</select>

<select name="m_debut" id="m_debut" class="formulaire" style="height:30px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<option value="00">00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<br />
<br />
<label for="fin">Fin : <span style="color:red">*</span></label>
<br />
<select name="h_fin" id="h_fin" class="formulaire" style="height:30px;width:195px;margin-right:5px;">
<option value=" ">Heures</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
</select>

<select name="m_fin" id="m_fin" class="formulaire" style="height:30px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<option value="00">00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<br />
<br />
<label for="lieu">Lieu : <span style="color:red">*</span></label>
<br />
<select name="lieu" id="lieu" class="formulaire" style="height:30px;">
<option value=" "> </option>
<option value="Quartier commerçant ouest">Quartier commerçant ouest</option>
<option value="Quartier commerçant est">Quartier commerçant est</option>
<option value="Quartier commerçant nord">Quartier commerçant nord</option>
<option value="Quartier commerçant sud">Quartier commerçant sud</option>
</select>
<br />
<br />
<label>Liste des achats :</label>
<table>
<tr>
<td id="tab1" style="vertical-align:top">
<input type="text" id="achat1" name="achat1" placeholder="Acheteur" class="formulaire court"/><select name="objet1" id="objet1" class="formulaire court"><option>choisissez un commerce</option></select>
</td>
<td style="vertical-align:bottom">
<input type="button" id="button_del" name="button_del" onClick="del_achat();" value="" title="débloque la liste des commerces" /><br></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" id="button_add" name="button_add" onClick="add_achat();" value="" title="bloque la liste des commerces" /></td>
</tr>
</table>
<br />
<label>Liste des présences :</label>
<br />
<table>
<tr>
<td style="vertical-align:top">
<div id="tab2">
<input type="text" id="present1" name="present1" class="formulaire court" placeholder="Pseudo" /><br />
</div>
</td>
<td style="vertical-align:bottom">
<input type="button" id="button_del" name="button_del" onClick="del_prez();" value="" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" id="button_add" name="button_add" onClick="add_prez();" value="" /></td>
</tr>
</table>
</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;">
<tr class="modactions">
<td align="left" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

[Phyliono]

Je vais essayer, pouvez-vous me décrire chaque ligne/groupe de lignes de codes (a quoi il sert et a quoi il correspond, pour quel champ) afin que je puisse le reproduire sur une dizaine d'autres formulaires sans avoir à vous redemander ? (Sauf si vous préférez)

Possible de retirer l'image croix pour la première ligne de chaque champ et de mettre les images de la croix et du + sur la même ligne ? (et donc réduire l'écart d'espaces entre la liste des achats et la liste des présences)
Pour la date, il me faut impérativement le même champ que sur le formulaire de base (en liste) comme dans l'ancien code :

Code:

<script type="text/javascript">
function envoiMessage(form)
{
if(form.activite.value==' ')
{
alert('Vous devez indiquer un commerce');
return false;
}
else if(form.date.value==' ')
{
alert('Vous devez indiquer une date');
return false;
}
else if(form.h_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.h_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.lieu.value==' ')
{
alert('Vous devez indiquer un lieu');
return false;
}
else
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:ov: " + form.activite.value + '\n'
+ ":dt: " + form.date.value + '\n'
+ ":hr: " + form.h_debut.value + "" + form.m_debut.value + " à " + form.h_fin.value + "" + form.m_fin.value + '\n'
+ ":lu: " + form.lieu.value + '\n'
+ ":i: Liste des achats :" + '\n' + form.achat.value + '\n' + '\n'
+ ":ps: Liste des présences :" + '\n' + form.presence.value + "[/size][/td][/tr][/table]" + '\n';
 
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
 
form.subject.value = form.activite.value ;
return true;
}
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="return(envoiMessage(this))">
<input type="hidden" name="mode" value="reply" /><!--    Un nouveau topic sera créé    -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!--    Value 0: Sujet Normal (1 = post-it / 2 = annonce)    -->
<input type="hidden" name="message" value="" /> <!--    Contiendra le texte du message    -->
<input type="hidden" name="subject" value="" />
<input type="hidden" name="t" value="586" />

<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des marchands</h2>
</th>
</tr>
<tr>
  <td height="6">
  </td>
</tr>
<tr>
<td class="row1"><br /><div align="center">
  <span style="font-size:12px;">N'oubliez pas de noter les étudiants présents lorsque vous ouvrez un commerce.<br />
Indiquez également ceux qui ont achetés un objet dans la liste des présences.</span><br /><br />
 
<label for="activite"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Commerce :</strong> <font color="red">*</font></span></label>
<br />
<select name="activite" id="activite" class="formulaire" style="height:30px;">
<option value=" "></option>
<option value="Ouverture de l'Apple Store">Apple Store</option>
<option value="Ouverture du Levi's">Levi's</option>
<option value="Ouverture de la Boîte de Nuit">Boîte de Nuit</option>
<option value="Ouverture du Bar">Bar</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture de la Bijouterie">Bijouterie</option>
<option value="Ouverture de Carrefour">Carrefour</option>
<option value="Ouverture du Starbucks">Starbucks</option>
<option value="Ouverture du Salon de voyance">Salon de voyance</option>
<option value="Ouverture de Häagen-Dazs">Häagen-Dazs</option>
<option value="Ouverture de la Pâtisserie">Pâtisserie</option>
<option value="Ouverture du Taxiphone">Taxiphone</option>
<option value="Ouverture du Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Musée">Musée</option>
<option value="Ouverture de Cultura">Cultura</option>
<option value="Ouverture de Foot Locker">Foot Locker</option>
<option value="Ouverture de la Pizzeria">Pizzeria</option>
<option value="Ouverture du Salon de beauté">Salon de beauté</option>
<option value="Ouverture du McCafé">McCafé</option>
<option value="Ouverture du Cinéma">Cinéma</option>
<option value="Ouverture de la Pharmacie">Pharmacie</option>
<option value="Ouverture du Jean-Paul Gaultier">Jean-Paul Gaultier</option>
<option value="Ouverture du McDonald's">McDonald's</option>
<option value="Ouverture de Duty Free">Duty Free</option>
<option value="Ouverture du Restaurant Réunionnais">Restaurant Réunionnais</option>
<option value="Ouverture de la Confiserie">Confiserie</option>
<option value="Ouverture du Photographe">Photographe</option>
<option value="Ouverture du Balmain Society">Balmain Society</option>
<option value="Ouverture de l'Animalerie">Animalerie</option>
</select>
<br />
<br />
<label for="date"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Date :</strong> <font color="red">*</font></span></label>
<br />
<select name="date" id="date" class="formulaire" style="height:30px;">
<option value=" ">Date</option>
<option value="01 décembre">01 décembre</option>
<option value="02 décembre">02 décembre</option>
<option value="03 décembre">03 décembre</option>
<option value="04 décembre">04 décembre</option>
<option value="05 décembre">05 décembre</option>
<option value="06 décembre">06 décembre</option>
<option value="07 décembre">07 décembre</option>
<option value="08 décembre">08 décembre</option>
<option value="09 décembre">09 décembre</option>
<option value="10 décembre">10 décembre</option>
<option value="11 décembre">11 décembre</option>
<option value="12 décembre">12 décembre</option>
<option value="13 décembre">13 décembre</option>
<option value="14 décembre">14 décembre</option>
<option value="15 décembre">15 décembre</option>
<option value="16 décembre">16 décembre</option>
<option value="17 décembre">17 décembre</option>
<option value="18 décembre">18 décembre</option>
<option value="19 décembre">19 décembre</option>
<option value="20 décembre">20 décembre</option>
<option value="21 décembre">21 décembre</option>
<option value="22 décembre">22 décembre</option>
<option value="23 décembre">23 décembre</option>
<option value="24 décembre">24 décembre</option>
<option value="25 décembre">25 décembre</option>
<option value="26 décembre">26 décembre</option>
<option value="27 décembre">27 décembre</option>
<option value="28 décembre">28 décembre</option>
<option value="29 décembre">29 décembre</option>
<option value="30 décembre">30 décembre</option>
<option value="31 décembre">31 décembre</option>
</select>
<br />
<br />

<label for="debut"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Début :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_debut" id="h_debut" class="formulaire" style="height:30px;width:195px;margin-right:5px;">
<option value=" ">Heures</option>
<option value="08h">08</option>
<option value="09h">09</option>
<option value="10h">10</option>
<option value="11h">11</option>
<option value="12h">12</option>
<option value="13h">13</option>
<option value="14h">14</option>
<option value="15h">15</option>
<option value="16h">16</option>
<option value="17h">17</option>
<option value="18h">18</option>
<option value="19h">19</option>
<option value="20h">20</option>
<option value="21h">21</option>
<option value="22h">22</option>
<option value="23h">23</option>
<option value="00h">00</option>
<option value="01h">01</option>
<option value="02h">02</option>
</select>
 
<select name="m_debut" id="m_debut" class="formulaire" style="height:30px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<option value="00">00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<br />
<br />
<label for="fin"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Fin :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_fin" id="h_fin" class="formulaire" style="height:30px;width:195px;margin-right:5px;">
<option value=" ">Heures</option>
<option value="08h">08</option>
<option value="09h">09</option>
<option value="10h">10</option>
<option value="11h">11</option>
<option value="12h">12</option>
<option value="13h">13</option>
<option value="14h">14</option>
<option value="15h">15</option>
<option value="16h">16</option>
<option value="17h">17</option>
<option value="18h">18</option>
<option value="19h">19</option>
<option value="20h">20</option>
<option value="21h">21</option>
<option value="22h">22</option>
<option value="23h">23</option>
<option value="00h">00</option>
<option value="01h">01</option>
<option value="02h">02</option>
</select>
 
<select name="m_fin" id="m_fin" class="formulaire" style="height:30px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<option value="00">00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<br />
<br />
<label for="lieu"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Lieu :</strong> <font color="red">*</font></span></label>
<br />
<select name="lieu" id="lieu" class="formulaire" style="height:30px;">
<option value=" "> </option>
<option value="Quartier commerçant ouest">Quartier commerçant ouest</option>
<option value="Quartier commerçant est">Quartier commerçant est</option>
<option value="Quartier commerçant nord">Quartier commerçant nord</option>
<option value="Quartier commerçant sud">Quartier commerçant sud</option>
</select>
<br />
<br />
<label for="achat"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Liste des achats :</strong></span>
  <br /><span style="font-family: ubuntu, verdana;font-size:10px;margin-left:15px;"><center><em><strong>Aller à la ligne pour chaque pseudo.</strong></em></center></span></label>
<br />
<textarea id="achat" name="achat" placeholder="Exemple : Pseudo - Objet" class="formulaire" style="height:275px; width:200px; resize:none;"></textarea>
<br />
<br />
<label for="presence"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Liste des présences :</strong></span>
  <br /><span style="font-family: ubuntu, verdana;font-size:10px;margin-left:15px;"><center><em><strong>Aller à la ligne pour chaque pseudo.</strong></em></center></span></label>
<br />
<textarea id="presence" name="presence" class="formulaire" style="height:275px; width:200px; resize:none;"></textarea>
<br />
<br />
</div>
</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;">
<tr class="modactions">
<td align="left" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

Actuellement ça me met ce message quand je souhaite envoyer : Vous devez entrer un message avant de poster.

Merci d'avance !

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up