Personnalisation d'un formulaire HTML

Page 2 sur 5 Précédent  1, 2, 3, 4, 5  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Personnalisation d'un formulaire HTML

Message par Phyliono le Dim 1 Nov 2015 - 20:56

Rappel du premier message :

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>


Dernière édition par Phyliono le Mer 18 Nov 2015 - 17:38, édité 1 fois

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mer 16 Déc 2015 - 16:47

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Sam 19 Déc 2015 - 14:11

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Dim 20 Déc 2015 - 18:32

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mar 22 Déc 2015 - 17:44

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mer 23 Déc 2015 - 19:59

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Sam 26 Déc 2015 - 1:04

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Lun 28 Déc 2015 - 12:39

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mar 29 Déc 2015 - 14:32

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mer 30 Déc 2015 - 15:54

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Ven 1 Jan 2016 - 1:06

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Sam 2 Jan 2016 - 1:07

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Dim 3 Jan 2016 - 4:22

Bonjour,

merci pour votre patience et votre persévérance ...
Je n'aurai peut-être pas le temps de tout expliquer en détail , mais je ferai de mon mieux .

J'ai retravaillé le code (fonctionnel cette fois ci). J'ai laissé le calendrier , qui sera plus pratique à l'emploi que de rééditer chaque formulaire pour mettre une liste de jours et de mois ...

Code:
<style>
#form_marchand label{
font:bold 11px ubuntu, verdana;
display:inline-block;
}
.court{
height:25px;
width:180px!important;
margin:2px 5px;
}
#button_add,#button_add1{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute11.png);
border:none;
}
#button_add:hover,#button_add1:hover{
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute10.png);
}
#button_del,#button_del1{
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() {
$( "#date" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
dateFormat:"dd MM"
});
$( "#date" ).datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$( "#date" ).datepicker( "getDate" );
});
</script>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2,nb_lignes1=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 ajout et suppression
function add_achat(strChoix)
  {
    if(document.getElementById("activite").value==="")
    {
      alert("Choisissez un commerce!");
      return false;
    }
    else
    {
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);
document.getElementById("button_del").style.display = "inline";
$( "#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);}
 
if(nb_lignes<=2) {
$("#activite").removeAttr('disabled');
document.getElementById("button_del").style.display = "none";}
}
function add_prez()
{
var tab2 = document.getElementById('tab2');

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

document.getElementById("button_del1").style.display = "inline";
tab2.appendChild(div2);
div2.appendChild(input3);

nb_lignes1++;
}
function del_prez()
{
if(nb_lignes1>2)
{
nb_lignes1--;
var tab2 = document.getElementById('tab2');
var div2 = document.getElementById('div2'+nb_lignes1);
tab2.removeChild(div2);
}
if(nb_lignes1<=2) {
document.getElementById("button_del1").style.display = "none";}
}
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.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";
for (var iter = 1; iter < nb_lignes; iter++)
{
var acheteur = document.getElementById('achat'+iter).value;
var objets = document.getElementById('objet'+iter).value;
txt_message += acheteur +" - "+ objets +'\n';
}
txt_message + "\n:ps: Liste des présences :\n";
for (var iter1 = 1; iter1 < nb_lignes1; iter1++)
{
var visiteurs = document.getElementById('present'+iter1).value;
txt_message += visiteurs +'\n';
}
txt_message += "[/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="date">Date : <span style="color:red">*</span></label><br />
<input type="text" id="date" name="date" 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_add" name="button_add" onClick="add_achat();" />
<input type="button" id="button_del" name="button_del" onClick="del_achat();" style="display:none" /></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_add1" name="button_add1" onClick="add_prez();" />
<input type="button" id="button_del1" name="button_del1" onClick="del_prez();" style="display:none" />
</td>
</tr>
</table></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>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Lun 4 Jan 2016 - 11:21

Merci beaucoup de votre réponse !

On y est presque ! Merci c'est formidable. J'insiste pour supprimer le calendrier et avoir la liste des jours du départ, ce n'est pas un problème de la changer tous les mois et c'est plus facile au niveau de notre gestion s'il vous plait.

Dans l'ensemble tout fonctionne, excepté que le premier champ de la liste des achats est décalé :

Possibilité de l'aligner comme les autres ?

Lorsque que j'envoie le formulaire, la liste des présences n'est pas séparée de la liste des achats :


Possibilité que ce soit séparer comme ceci :


Merci d'avance, c'est formidable Smile

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Lun 4 Jan 2016 - 22:12

Pas de soucis pour remettre une liste à la place du calendrier ...

Pour le décalage , il suffit de mettre les 2 champs sur la même ligne dans la partie HTML ...

Pour l'envoi , il y a une p'tite boulette au niveau du script d'envoi : il manque un " = "(égal) :

txt_message += "\n:ps: Liste des présences :\n";

Je remets le code avec les dernières modifications :

Code:
<style>
#form_marchand label{
font:bold 11px ubuntu, verdana;
display:inline-block;
}
.court{
height:25px;
width:180px!important;
margin:2px 5px;
}
#button_add,#button_add1{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute11.png);
border:none;
}
#button_add:hover,#button_add1:hover{
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute10.png);
}
#button_del,#button_del1{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/18/72/44/21/suppri10.png);
border:none;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2,nb_lignes1=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 ajout et suppression
function add_achat(strChoix)
  {
    if(document.getElementById("activite").value==="")
    {
      alert("Choisissez un commerce!");
      return false;
    }
    else
    {
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);
document.getElementById("button_del").style.display = "inline";
$( "#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);}
 
if(nb_lignes<=2) {
$("#activite").removeAttr('disabled');
document.getElementById("button_del").style.display = "none";}
}
function add_prez()
{
var tab2 = document.getElementById('tab2');

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

document.getElementById("button_del1").style.display = "inline";
tab2.appendChild(div2);
div2.appendChild(input3);

nb_lignes1++;
}
function del_prez()
{
if(nb_lignes1>2)
{
nb_lignes1--;
var tab2 = document.getElementById('tab2');
var div2 = document.getElementById('div2'+nb_lignes1);
tab2.removeChild(div2);
}
if(nb_lignes1<=2) {
document.getElementById("button_del1").style.display = "none";}
}
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.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";
for (var iter = 1; iter < nb_lignes; iter++)
{
var acheteur = document.getElementById('achat'+iter).value;
var objets = document.getElementById('objet'+iter).value;
txt_message += acheteur +" - "+ objets +'\n';
}
txt_message += "\n:ps: Liste des présences :\n";
for (var iter1 = 1; iter1 < nb_lignes1; iter1++)
{
var visiteurs = document.getElementById('present'+iter1).value;
txt_message += visiteurs +'\n';
}
txt_message += "[/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="date">Date : <span style="color:red">*</span></label><br />
<select name="date" id="date" class="formulaire" style="height:30px;">
<option value="">Date</option>
<option value="01 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select><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_add" name="button_add" onClick="add_achat();" />
<input type="button" id="button_del" name="button_del" onClick="del_achat();" style="display:none" /></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_add1" name="button_add1" onClick="add_prez();" />
<input type="button" id="button_del1" name="button_del1" onClick="del_prez();" style="display:none" />
</td>
</tr>
</table></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>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mar 5 Jan 2016 - 17:19

Merci beaucoup !

Il y a juste un décalage de certains champs, ils ne sont pas tous alignés comme ils devraient l'être :


J'avais ajouté un script entre deux pour rendre les champs obligatoires :
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>
Possibilité de le remettre ?

Et j'aimerais cacher le tiret qui sépare le pseudo de l'achat quand ils ne postent rien dans la liste des achats (si la liste est vide, qu'il n'y ait pas que le tiret sur le message)

Je voulais réutiliser ce même formulaire pour d'autres sujets avec des modifications (par exemple pas de liste d'achats mais des points supplémentaires pour les étudiants présents à un cours ou mettre un liste de notes à la place des achats etc...) c'est pour cela que je voulais des explications pour ne plus avoir à redemander...

J'ai modifié mon code, si vous pouvez reprendre à partir de celui-ci :
Code:
<style>
#form_marchand label{
font:bold 11px ubuntu, verdana;
display:inline-block;
}
.court{
height:25px;
width:180px!important;
margin:2px 5px;
}
#button_add,#button_add1{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute10.png);
border:none;
}
#button_add:hover,#button_add1:hover{
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute11.png);
}
#button_del,#button_del1{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/18/72/44/21/suppri10.png);
border:none;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2,nb_lignes1=2;

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

monTableau[0] = ["Ouverture de l'Apple Store"];
monTableau[0][1] = [
"Iphone",
"Ipod nano",
"Ipad",
"Macbook",
"Imac",
"Iphone en or"];
 
monTableau[1] = ["Ouverture du Levi's"];
monTableau[1][1] = [
"Jean Levi's",
"Chemise Levi's",
"Veste Levi's"];

monTableau[2] = ["Ouverture de la Boîte de Nuit"];
monTableau[2][1] = [
"Cocktail",
"Mojito",
"Pina colada",
"Blue Lagoon",
"Bouteille de champagne"];

monTableau[3] = ["Ouverture du Bar"];
monTableau[3][1] = [
"Café",
"Cornet de glace",
"Bière",
"Verre de vin",
"Flûte de champagne"];

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 ajout et suppression
function add_achat(strChoix)
  {
    if(document.getElementById("activite").value==="")
    {
      alert("Choisissez un commerce !");
      return false;
    }
    else
    {
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);
document.getElementById("button_del").style.display = "inline";
$( "#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);}
 
if(nb_lignes<=2) {
$("#activite").removeAttr('disabled');
document.getElementById("button_del").style.display = "none";}
}
function add_prez()
{
var tab2 = document.getElementById('tab2');

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

document.getElementById("button_del1").style.display = "inline";
tab2.appendChild(div2);
div2.appendChild(input3);

nb_lignes1++;
}
function del_prez()
{
if(nb_lignes1>2)
{
nb_lignes1--;
var tab2 = document.getElementById('tab2');
var div2 = document.getElementById('div2'+nb_lignes1);
tab2.removeChild(div2);
}
if(nb_lignes1<=2) {
document.getElementById("button_del1").style.display = "none";}
}
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='bleu' 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";
for (var iter = 1; iter < nb_lignes; iter++)
{
var acheteur = document.getElementById('achat'+iter).value;
var objets = document.getElementById('objet'+iter).value;
txt_message += acheteur +" - "+ objets +'\n';
}
txt_message += "\n:ps: Liste des présences :\n";
for (var iter1 = 1; iter1 < nb_lignes1; iter1++)
{
var visiteurs = document.getElementById('present'+iter1).value;
txt_message += visiteurs +'\n';
}
txt_message += "[/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="791" />

<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">Bar</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture de la Bijouterie">Bijouterie</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 Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Cultura">Cultura</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 de l'Animalerie">Animalerie</option>
<option value="Ouverture du Gun Store">Gun Store</option>
<option value="Ouverture du Paradise Shop">Paradise Shop</option>
<option value="Ouverture du Cabinet médical">Cabinet médical</option>
<option value="Ouverture du Conforama">Conforama</option>
<option value="Ouverture de la Maison Kitsuné">Maison Kitsuné</option>
<option value="Ouverture du SonoZik">SonoZik</option>
</select>
<br />
<br />
<label for="date">Date : <span style="color:red">*</span></label><br />
<select name="date" id="date" class="formulaire" style="height:30px;">
<option value="">Date</option>
<option value="01 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select><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="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">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="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">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" style="height:15px;" /><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_add" name="button_add" onClick="add_achat();" />
<input type="button" id="button_del" name="button_del" onClick="del_achat();" style="display:none" /></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" style="height:15px;" /><br />
</div>
</td>
<td style="vertical-align:bottom">
<input type="button" id="button_add1" name="button_add1" onClick="add_prez();" />
<input type="button" id="button_del1" name="button_del1" onClick="del_prez();" style="display:none" />
</td>
</tr>
</table></div>
</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;">
<tr class="modactions">
<td align="center" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

Merci beaucoup tout de même!

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Mer 6 Jan 2016 - 4:59

Avec alignement , avec un script obligatoire , avec envoi facultatif si le champ des achat reste vide :

Code:
<style>
#form_marchand label{
font:bold 11px ubuntu, verdana;
display:inline-block;
}
#form_marchand select,#form_marchand input[type=text]{
height:30px;margin:5px 3px;
}
.court{
height:25px;
width:195px!important;
}
#button_add,#button_add1{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute10.png);
border:none;
}
#button_add:hover,#button_add1:hover{
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute11.png);
}
#button_del,#button_del1{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/18/72/44/21/suppri10.png);
border:none;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2,nb_lignes1=2;

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

monTableau[0] = ["Ouverture de l'Apple Store"];
monTableau[0][1] = [
"Iphone",
"Ipod nano",
"Ipad",
"Macbook",
"Imac",
"Iphone en or"];
 
monTableau[1] = ["Ouverture du Levi's"];
monTableau[1][1] = [
"Jean Levi's",
"Chemise Levi's",
"Veste Levi's"];

monTableau[2] = ["Ouverture de la Boîte de Nuit"];
monTableau[2][1] = [
"Cocktail",
"Mojito",
"Pina colada",
"Blue Lagoon",
"Bouteille de champagne"];

monTableau[3] = ["Ouverture du Bar"];
monTableau[3][1] = [
"Café",
"Cornet de glace",
"Bière",
"Verre de vin",
"Flûte de champagne"];

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 ajout et suppression
function add_achat(strChoix)
  {
    if(document.getElementById("activite").value==="")
    {
      alert("Choisissez un commerce !");
      return false;
    }
    else
    {
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 espace = 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(espace);
div1.appendChild(select1);
document.getElementById("button_del").style.display = "inline";
$( "#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);}
 
if(nb_lignes<=2) {
$("#activite").removeAttr('disabled');
document.getElementById("button_del").style.display = "none";}
}
function add_prez()
{
var tab2 = document.getElementById('tab2');

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

document.getElementById("button_del1").style.display = "inline";
tab2.appendChild(div2);
div2.appendChild(input3);

nb_lignes1++;
}
function del_prez()
{
if(nb_lignes1>2)
{
nb_lignes1--;
var tab2 = document.getElementById('tab2');
var div2 = document.getElementById('div2'+nb_lignes1);
tab2.removeChild(div2);
}
if(nb_lignes1<=2) {
document.getElementById("button_del1").style.display = "none";}
}
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 une heure de début valide');
return false;
}
else if(form.m_debut.value=='')
{
alert('Vous devez indiquer des minutes de début valide');
return false;
}
else if(form.h_fin.value=='')
{
alert('Vous devez indiquer une heure de fin valide');
return false;
}
else if(form.m_fin.value=='')
{
alert('Vous devez indiquer des minutes de fin 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='bleu' 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";
for (var iter = 1; iter < nb_lignes; iter++)
{
var acheteur = document.getElementById('achat'+iter).value;
var objets = document.getElementById('objet'+iter).value;
txt_message += (form.achat1 ? acheteur +" - "+ objets +'\n' : "");
}
txt_message += "\n:ps: Liste des présences :\n";
for (var iter1 = 1; iter1 < nb_lignes1; iter1++)
{
var visiteurs = document.getElementById('present'+iter1).value;
txt_message += visiteurs +'\n';
}
txt_message += "[/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="return(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="791" />

<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" 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">Bar</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture de la Bijouterie">Bijouterie</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 Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Cultura">Cultura</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 de l'Animalerie">Animalerie</option>
<option value="Ouverture du Gun Store">Gun Store</option>
<option value="Ouverture du Paradise Shop">Paradise Shop</option>
<option value="Ouverture du Cabinet médical">Cabinet médical</option>
<option value="Ouverture du Conforama">Conforama</option>
<option value="Ouverture de la Maison Kitsuné">Maison Kitsuné</option>
<option value="Ouverture du SonoZik">SonoZik</option>
</select>
<br />
<br />
<label for="date">Date : <span style="color:red">*</span></label><br />
<select name="date" id="date" class="formulaire">
<option value="">Date</option>
<option value="01 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select><br />
<br />
<label for="debut">Début : <span style="color:red">*</span></label>
<br />
<select name="h_debut" id="h_debut" class="formulaire court">
<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 court">
<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 court">
<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 court">
<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">
<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 style="margin-left:60px">
<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;width:55px">
<input type="button" id="button_add" name="button_add" onClick="add_achat();" />
<input type="button" id="button_del" name="button_del" onClick="del_achat();" style="display:none" /></td>
</tr>
</table>
<br />
<label>Liste des présences :</label>
<br />
<table style="margin-left:60px">
<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;width:55px">
<input type="button" id="button_add1" name="button_add1" onClick="add_prez();" />
<input type="button" id="button_del1" name="button_del1" onClick="del_prez();" style="display:none" />
</td>
</tr>
</table></div>
</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;">
<tr class="modactions">
<td align="center" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

N'oubliez pas de modifier le "tableau options multiples" du script en fonction de la liste des commerces ...

Je voulais réutiliser ce même formulaire pour d'autres sujets avec des modifications (par exemple pas de liste d'achats mais des points supplémentaires pour les étudiants présents à un cours ou mettre un liste de notes à la place des achats etc...) c'est pour cela que je voulais des explications pour ne plus avoir à redemander...

Comme chacun de vos formulaires est unique et adapté au style de votre forum , le mieux sera de redemander à chaque fois pour être sûr ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mer 6 Jan 2016 - 17:42

Bonjour,

Merci de votre réponse et de votre investissement. Il y a toujours un décalage avec le liste "Date" et sur deux listes aussi (voyez les traits rouges ci-dessous) :


Et comme je l'ai dit dans le message précédent, j'aimerais qu'il n'y ait pas le tiret "-" lorsqu'on envoie le message lorsqu'on n'a aucun achat (donc liste des achats non remplie donc aucun objet choisi)

Je me demandais (je sais j'en demande encore mais c'est toujours dans le sujet et je préfère avoir un bon formulaire durable qui facilite le travail de mes utilisateurs) s'il était possible par exemple de supprimer le champ Lieu et qu'en fonction du Commerce choisi, ça met automatiquement le lieu correspondant dans le message envoyé (sans avoir à choisir ni rien ?

De même pour les horaires, qu'ils ne puissent pas mettre un horaire de plus de 60 minutes... Par exemple, s'ils mettent un horaire de début à 12h10, qu'ils puissent mettre jusqu'à 13h10 maximum (c'est vraiment du pointillisme pour que ce soit parfait sinon tant pis).

Et s'il était possible de vérifier que le pseudo soit inscrit sur le site à chaque fois (pour la liste des achats et des présences), je pense pas mais bon, comme pour la messagerie.

Merci beaucoup ! Je pense que ce sera terminé ensuite!

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Mer 6 Jan 2016 - 19:58

Pour l'alignement , il est correct sur Firefox , mais pas sur Chrome ... scratch

Pour le tiret , j'avais mal compris .... c'est faisable de mettre un acheteur sans achat , mais du coup ça fait doublon avec la liste suivante des personnes dans le magasin , non?

il est possible de mettre le lieu automatiquement .

Pour l'horaire , je peux reprendre ce que j'avais déjà proposé dans un autre de vos formulaires , heure et minutes de début , et liste de minutes de durée ... l'envoi donnera les deux horaires .

vérifier que le pseudo soit inscrit sur le site à chaque fois

Cette partie est hors de ma portée , ou irréalisable ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mer 6 Jan 2016 - 20:42

Merci de votre réponse.

Oui, il ne l'est pas non plus sur Safari...
Il y a toujours un objet avec un acheteur mais il n'est pas obligatoire d'avoir des acheteurs, donc si toute la liste est vide (ni acheteur donc ni objet), un espace apparaît juste sur le message mais pas le tiret.

Je veux bien le lieu alors merci.
Pour le reste, laissez tomber, c'est prise de tête pour rien en fait, ça ira comme ça Smile

Merci beaucoup !

Nouveau code modifié:
Code:
<style>
#form_marchand label{
font:bold 11px ubuntu, verdana;
display:inline-block;
}
#form_marchand select,#form_marchand input[type=text]{
margin:5px 3px;
}
.court{
height:15px;
width:195px!important;
}
.long{
height:25px;
}
.liste{
height:25px;
width:195px!important;
}
#button_add,#button_add1{
height:30px;
width:25px;
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute10.png);
border:none;
background-repeat: no-repeat;
}
#button_add:hover,#button_add1:hover{
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute11.png);
}
#button_del,#button_del1{
height:30px;
width:25px;
background:url(http://i21.servimg.com/u/f21/18/72/44/21/suppri10.png);
border:none;
background-repeat: no-repeat;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2,nb_lignes1=2;

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

monTableau[0] = ["Ouverture de l'Apple Store"];
monTableau[0][1] = [
"Iphone",
"Ipod nano",
"Ipad",
"Macbook",
"Imac",
"Iphone en or"];
 
monTableau[1] = ["Ouverture du Levi's"];
monTableau[1][1] = [
"Jean Levi's",
"Chemise Levi's",
"Veste Levi's"];

monTableau[2] = ["Ouverture de la Boîte de Nuit"];
monTableau[2][1] = [
"Cocktail",
"Mojito",
"Pina colada",
"Blue Lagoon",
"Bouteille de champagne"];

monTableau[3] = ["Ouverture du Bar"];
monTableau[3][1] = [
"Café",
"Cornet de glace",
"Bière",
"Verre de vin",
"Flûte de champagne"];

monTableau[4] = ["Ouverture du Concessionnaire"];
monTableau[4][1] = [
"Vélo"];
 
monTableau[5] = ["Ouverture de la Bijouterie"];
monTableau[5][1] = [
"Bague en diamant",
"Collier saphir",
"Boucles d'oreilles rubis",
"Bracelet émeraude",
"Couronne"];

monTableau[6] = ["Ouverture du Salon de voyance"];
monTableau[6][1] = [
"Amulette",
"Nazar Boncuck",
"Attrapes-rêves",
"Cartes divinatoires",
"Poupée vaudou",
"Pendule",
"Ouija",
"Chouette"];

monTableau[7] = ["Ouverture de Häagen-Dazs"];
monTableau[7][1] = [
"Pot Häagen-Dazs",
"Crêpe à la glace",
"Esquimau chocolat amande",
"Coupe de glace",
"Banana split"];
 
monTableau[8] = ["Ouverture de la Pâtisserie"];
monTableau[8][1] = [
"Éclairs",
"Chou à la crème",
"Religieuse",
"Cupcakes",
"Tarte aux pommes",
"Tarte aux fraises",
"Opéra",
"Gâteau au chocolat",
"Gâteau d'anniversaire",
"Pièce montée"];
 
monTableau[9] = ["Ouverture du Sushi Bar"];
monTableau[9][1] = [
"Makis",
"Thé japonais",
"Sashimi"];
 
monTableau[10] = ["Ouverture du Cultura"];
monTableau[10][1] = [
"Album de Sia",
"Livre Hunger Games",
"DVD Harry Potter"];
 
monTableau[11] = ["Ouverture du Salon de beauté"];
monTableau[11][1] = [
"Gels douche DOP",
"Vernis à ongles Essie",
"Rouges à lèvres Mac",
"Invictus & Olympéa"];
 
monTableau[12] = ["Ouverture du McCafé"];
monTableau[12][1] = [
"Brownie",
"Flan",
"Macarons",
"Délifrapp'"];
 
monTableau[13] = ["Ouverture du Cinéma"];
monTableau[13][1] = [
"Pop-corn",
"Lunettes 3D"];
 
monTableau[14] = ["Ouverture de la Pharmacie"];
monTableau[14][1] = [
"Pansements Mercurochrome",
"Doliprane",
"Préservatifs"];
 
monTableau[15] = ["Ouverture du Jean-Paul Gaultier"];
monTableau[15][1] = [
"Parfum Jean-Paul Gaultier",
"Marinière Jean-Paul Gaultier"];
 
monTableau[16] = ["Ouverture du McDonald's"];
monTableau[16][1] = [
"Hamburger",
"Boisson McDonald's",
"McFlurry"];
 
monTableau[17] = ["Ouverture du Duty Free"];
monTableau[17][1] = [
""];
 
monTableau[18] = ["Ouverture du Restaurant Réunionnais"];
monTableau[18][1] = [
""];
 
monTableau[19] = ["Ouverture de la Confiserie"];
monTableau[19][1] = [
"Sucette",
"Barbe à papa",
"Pomme d'amour",
"Lapin en chocolat"];
 
monTableau[20] = ["Ouverture du Photographe"];
monTableau[20][1] = [
"Photo de paysage"];
 
monTableau[21] = ["Ouverture de l'Animalerie"];
monTableau[21][1] = [
"Poisson rouge"];
 
monTableau[22] = ["Ouverture du Gun Store"];
monTableau[22][1] = [
""];
 
monTableau[23] = ["Ouverture du Paradise Shop"];
monTableau[23][1] = [
"Canard rose",
"Gel Durex"];
 
monTableau[24] = ["Ouverture du Cabinet médical"];
monTableau[24][1] = [
"Prise de sang"];
 
monTableau[25] = ["Ouverture du Conforama"];
monTableau[25][1] = [
""];
 
monTableau[26] = ["Ouverture de la Maison Kitsuné"];
monTableau[26][1] = [
""];
 
monTableau[27] = ["Ouverture du SonoZik"];
monTableau[27][1] = [
""];
 
/* 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 ajout et suppression
function add_achat(strChoix)
  {
    if(document.getElementById("activite").value==="")
    {
      alert("Choisissez un commerce !");
      return false;
    }
    else
    {
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 espace = 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(espace);
div1.appendChild(select1);
document.getElementById("button_del").style.display = "inline";
$( "#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);}
 
if(nb_lignes<=2) {
$("#activite").removeAttr('disabled');
document.getElementById("button_del").style.display = "none";}
}
function add_prez()
{
var tab2 = document.getElementById('tab2');

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

document.getElementById("button_del1").style.display = "inline";
tab2.appendChild(div2);
div2.appendChild(input3);

nb_lignes1++;
}
function del_prez()
{
if(nb_lignes1>2)
{
nb_lignes1--;
var tab2 = document.getElementById('tab2');
var div2 = document.getElementById('div2'+nb_lignes1);
tab2.removeChild(div2);
}
if(nb_lignes1<=2) {
document.getElementById("button_del1").style.display = "none";}
}
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='bleu' 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";
for (var iter = 1; iter < nb_lignes; iter++)
{
var acheteur = document.getElementById('achat'+iter).value;
var objets = document.getElementById('objet'+iter).value;
txt_message += (form.achat1 ? acheteur +" - "+ objets +'\n' : "");
}
txt_message += "\n:ps: Liste des présences :\n";
for (var iter1 = 1; iter1 < nb_lignes1; iter1++)
{
var visiteurs = document.getElementById('present'+iter1).value;
txt_message += visiteurs +'\n';
}
txt_message += "[/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="return(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="791" />

<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 long" 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">Bar</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture de la Bijouterie">Bijouterie</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 Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Cultura">Cultura</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 de l'Animalerie">Animalerie</option>
<option value="Ouverture du Gun Store">Gun Store</option>
<option value="Ouverture du Paradise Shop">Paradise Shop</option>
<option value="Ouverture du Cabinet médical">Cabinet médical</option>
<option value="Ouverture du Conforama">Conforama</option>
<option value="Ouverture de la Maison Kitsuné">Maison Kitsuné</option>
<option value="Ouverture du SonoZik">SonoZik</option>
</select>
<br />
<br />
<label for="date">Date : <span style="color:red">*</span></label><br />
<select name="date" id="date" class="formulaire long">
<option value="">Date</option>
<option value="01 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select><br />
<br />
<label for="debut">Début : <span style="color:red">*</span></label>
<br />
<select name="h_debut" id="h_debut" class="formulaire liste">
<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 liste">
<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 liste">
<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 liste">
<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 long">
<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 style="margin-left:60px">
<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 liste"><option>Choisissez un commerce</option></select>
</td>
<td style="vertical-align:bottom;width:55px">
<input type="button" id="button_add" name="button_add" onClick="add_achat();" />
<input type="button" id="button_del" name="button_del" onClick="del_achat();" style="display:none" /></td>
</tr>
</table>
<br />
<label>Liste des présences :</label>
<table style="margin-left:60px">
<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;width:55px">
<input type="button" id="button_add1" name="button_add1" onClick="add_prez();" />
<input type="button" id="button_del1" name="button_del1" onClick="del_prez();" style="display:none" />
</td>
</tr>
</table></div>
</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;">
<tr class="modactions">
<td align="center" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>


Dernière édition par Phyliono le Ven 8 Jan 2016 - 1:13, édité 1 fois

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Jeu 7 Jan 2016 - 23:50

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Ven 8 Jan 2016 - 15:01

Bon ... j'ai aussi repris la structure du formulaire pour un alignement correct , quelque soit le navigateur (j'ai vu les modif's de votre code , j'ai supprimé les class "long" et "liste")

J'ai rajouté le lieu dans le script tableau , mais comme je ne connais pas le lieu pour chaque boutique , ce sera à vous de rectifier ...
.../...
monTableau[0][2] = ["ouest"];
.../...
monTableau[1][2] = ["est"];
.../...
monTableau[2][2] = ["nord"];
.../... ...
Il suffit de modifier le point cardinal de chaque boutique , cette valeur sera transmise à un input de type hidden (caché) , valeur qui sera récupérée par le script d'envoi qui complétera la phrase du lieu .
+ ":lu: Quartier commerçant " + form.lieu.value + '\n'

Le code modifié :

Code:
<style>
#form_marchand label{
font:bold 11px ubuntu, verdana;
display:block;text-align:center;margin-left:-60px;
}
#form_marchand select,#form_marchand input[type=text]{
height:25px!important;margin:5px 6px 5px 0;padding:0 5px;
}
.court{
width:195px!important;
}
#button_add,#button_add1{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute10.png);
border:none;
}
#button_add:hover,#button_add1:hover{
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute11.png);
}
#button_del,#button_del1{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/18/72/44/21/suppri10.png);
border:none;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var nb_lignes=2,nb_lignes1=2;

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

monTableau[0] = ["Ouverture de l'Apple Store"];
monTableau[0][1] = [
"Iphone",
"Ipod nano",
"Ipad",
"Macbook",
"Imac",
"Iphone en or"];
monTableau[0][2] = ["ouest"];
 
monTableau[1] = ["Ouverture du Levi's"];
monTableau[1][1] = [
"Jean Levi's",
"Chemise Levi's",
"Veste Levi's"];
monTableau[1][2] = ["est"];

monTableau[2] = ["Ouverture de la Boîte de Nuit"];
monTableau[2][1] = [
"Cocktail",
"Mojito",
"Pina colada",
"Blue Lagoon",
"Bouteille de champagne"];
monTableau[2][2] = ["nord"];

monTableau[3] = ["Ouverture du Bar"];
monTableau[3][1] = [
"Café",
"Cornet de glace",
"Bière",
"Verre de vin",
"Flûte de champagne"];
monTableau[3][2] = ["sud"];

monTableau[4] = ["Ouverture du Concessionnaire"];
monTableau[4][1] = [
"Vélo"];
monTableau[4][2] = ["est"];
 
monTableau[5] = ["Ouverture de la Bijouterie"];
monTableau[5][1] = [
"Bague en diamant",
"Collier saphir",
"Boucles d'oreilles rubis",
"Bracelet émeraude",
"Couronne"];
monTableau[5][2] = ["est"];

monTableau[6] = ["Ouverture du Salon de voyance"];
monTableau[6][1] = [
"Amulette",
"Nazar Boncuck",
"Attrapes-rêves",
"Cartes divinatoires",
"Poupée vaudou",
"Pendule",
"Ouija",
"Chouette"];
monTableau[6][2] = ["est"];

monTableau[7] = ["Ouverture de Häagen-Dazs"];
monTableau[7][1] = [
"Pot Häagen-Dazs",
"Crêpe à la glace",
"Esquimau chocolat amande",
"Coupe de glace",
"Banana split"];
monTableau[7][2] = ["est"];
 
monTableau[8] = ["Ouverture de la Pâtisserie"];
monTableau[8][1] = [
"Éclairs",
"Chou à la crème",
"Religieuse",
"Cupcakes",
"Tarte aux pommes",
"Tarte aux fraises",
"Opéra",
"Gâteau au chocolat",
"Gâteau d'anniversaire",
"Pièce montée"];
monTableau[8][2] = ["est"];
 
monTableau[9] = ["Ouverture du Sushi Bar"];
monTableau[9][1] = [
"Makis",
"Thé japonais",
"Sashimi"];
monTableau[9][2] = ["est"];
 
monTableau[10] = ["Ouverture du Cultura"];
monTableau[10][1] = [
"Album de Sia",
"Livre Hunger Games",
"DVD Harry Potter"];
monTableau[10][2] = ["est"];
 
monTableau[11] = ["Ouverture du Salon de beauté"];
monTableau[11][1] = [
"Gels douche DOP",
"Vernis à ongles Essie",
"Rouges à lèvres Mac",
"Invictus & Olympéa"];
monTableau[11][2] = ["est"];
 
monTableau[12] = ["Ouverture du McCafé"];
monTableau[12][1] = [
"Brownie",
"Flan",
"Macarons",
"Délifrapp'"];
monTableau[12][2] = ["est"];
 
monTableau[13] = ["Ouverture du Cinéma"];
monTableau[13][1] = [
"Pop-corn",
"Lunettes 3D"];
monTableau[13][2] = ["est"];
 
monTableau[14] = ["Ouverture de la Pharmacie"];
monTableau[14][1] = [
"Pansements Mercurochrome",
"Doliprane",
"Préservatifs"];
monTableau[14][2] = ["est"];
 
monTableau[15] = ["Ouverture du Jean-Paul Gaultier"];
monTableau[15][1] = [
"Parfum Jean-Paul Gaultier",
"Marinière Jean-Paul Gaultier"];
monTableau[15][2] = ["est"];
 
monTableau[16] = ["Ouverture du McDonald's"];
monTableau[16][1] = [
"Hamburger",
"Boisson McDonald's",
"McFlurry"];
monTableau[16][2] = ["est"];
 
monTableau[17] = ["Ouverture du Duty Free"];
monTableau[17][1] = [
""];
monTableau[17][2] = ["est"];
 
monTableau[18] = ["Ouverture du Restaurant Réunionnais"];
monTableau[18][1] = [
""];
monTableau[18][2] = ["est"];
 
monTableau[19] = ["Ouverture de la Confiserie"];
monTableau[19][1] = [
"Sucette",
"Barbe à papa",
"Pomme d'amour",
"Lapin en chocolat"];
monTableau[19][2] = ["est"];
 
monTableau[20] = ["Ouverture du Photographe"];
monTableau[20][1] = [
"Photo de paysage"];
monTableau[20][2] = ["est"];
 
monTableau[21] = ["Ouverture de l'Animalerie"];
monTableau[21][1] = [
"Poisson rouge"];
monTableau[21][2] = ["est"];
 
monTableau[22] = ["Ouverture du Gun Store"];
monTableau[22][1] = [
""];
monTableau[22][2] = ["est"];
 
monTableau[23] = ["Ouverture du Paradise Shop"];
monTableau[23][1] = [
"Canard rose",
"Gel Durex"];
monTableau[23][2] = ["est"];
 
monTableau[24] = ["Ouverture du Cabinet médical"];
monTableau[24][1] = [
"Prise de sang"];
monTableau[24][2] = ["est"];
 
monTableau[25] = ["Ouverture du Conforama"];
monTableau[25][1] = [
""];
monTableau[25][2] = ["est"];
 
monTableau[26] = ["Ouverture de la Maison Kitsuné"];
monTableau[26][1] = [
""];
monTableau[26][2] = ["est"];
 
monTableau[27] = ["Ouverture du SonoZik"];
monTableau[27][1] = [
""];
monTableau[27][2] = ["est"];
 
/* 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;
document.post.lieu.value = monTableau[x][2];
}
}
}
}

// script du bouton ajout et suppression
function add_achat(strChoix)
  {
    if(document.getElementById("activite").value==="")
    {
      alert("Choisissez un commerce !");
      return false;
    }
    else
    {
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 espace = 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(espace);
div1.appendChild(select1);
document.getElementById("button_del").style.display = "inline";
$( "#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);}
 
if(nb_lignes<=2) {
$("#activite").removeAttr('disabled');
document.getElementById("button_del").style.display = "none";}
}
function add_prez()
{
var tab2 = document.getElementById('tab2');

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

document.getElementById("button_del1").style.display = "inline";
tab2.appendChild(div2);
div2.appendChild(input3);

nb_lignes1++;
}
function del_prez()
{
if(nb_lignes1>2)
{
nb_lignes1--;
var tab2 = document.getElementById('tab2');
var div2 = document.getElementById('div2'+nb_lignes1);
tab2.removeChild(div2);
}
if(nb_lignes1<=2) {
document.getElementById("button_del1").style.display = "none";}
}
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 une heure de début valide');
return false;
}
else if(form.m_debut.value=='')
{
alert('Vous devez indiquer des minutes de début valide');
return false;
}
else if(form.h_fin.value=='')
{
alert('Vous devez indiquer une heure de fin valide');
return false;
}
else if(form.m_fin.value=='')
{
alert('Vous devez indiquer des minutes de fin 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='bleu' 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: Quartier commerçant " + form.lieu.value + '\n'
+ ":i: Liste des achats :\n";
for (var iter = 1; iter < nb_lignes; iter++)
{
var acheteur = document.getElementById('achat'+iter).value;
var objets = document.getElementById('objet'+iter).value;
txt_message += (acheteur ? acheteur +" - "+ objets +'\n' : "");
}
txt_message += "\n:ps: Liste des présences :\n";
for (var iter1 = 1; iter1 < nb_lignes1; iter1++)
{
var visiteurs = document.getElementById('present'+iter1).value;
txt_message += visiteurs +'\n';
}
txt_message += "[/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="return(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="791" />
<input type="hidden" name="lieu" value="" />

<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 style="margin:auto;padding-left:60px;width:464px">
<div style="font-size:12px;text-align:center;margin-left:-60px">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.</div><br />
 
<label for="activite">Commerce : <span style="color:red">*</span></label>
<select name="activite" id="activite" class="formulaire" 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">Bar</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture de la Bijouterie">Bijouterie</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 Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Cultura">Cultura</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 de l'Animalerie">Animalerie</option>
<option value="Ouverture du Gun Store">Gun Store</option>
<option value="Ouverture du Paradise Shop">Paradise Shop</option>
<option value="Ouverture du Cabinet médical">Cabinet médical</option>
<option value="Ouverture du Conforama">Conforama</option>
<option value="Ouverture de la Maison Kitsuné">Maison Kitsuné</option>
<option value="Ouverture du SonoZik">SonoZik</option>
</select>
<br />
<br />
<label for="date">Date : <span style="color:red">*</span></label>
<select name="date" id="date" class="formulaire">
<option value="">Date</option>
<option value="01 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select><br />
<br />
<label for="debut">Début : <span style="color:red">*</span></label>
<select name="h_debut" id="h_debut" class="formulaire court">
<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 court">
<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>
<select name="h_fin" id="h_fin" class="formulaire court">
<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 court">
<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>Liste des achats :</label>
<table border="0" cellspacing="0" cellpadding="0">
<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;width:55px">
<input type="button" id="button_add" name="button_add" onClick="add_achat();" />
<input type="button" id="button_del" name="button_del" onClick="del_achat();" style="display:none" /></td>
</tr>
</table>
<br />
<label>Liste des présences :</label>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="vertical-align:top">
<div id="tab2">
<input type="text" id="present1" name="present1" class="formulaire" placeholder="Pseudo" /><br />
</div>
</td>
<td style="vertical-align:bottom;width:55px">
<input type="button" id="button_add1" name="button_add1" onClick="add_prez();" />
<input type="button" id="button_del1" name="button_del1" onClick="del_prez();" style="display:none" />
</td>
</tr>
</table></div>
</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;">
<tr class="modactions">
<td align="center" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Sam 9 Jan 2016 - 3:34

Merci c'est parfait.

Seul petit bémol, les images pour ajouter ou supprimer ne sont pas alignées avec le champ.

J'ai beaucoup modifié le code, reprenez celui-ci si possible :
Code:
<style>
#form_presence label{
font:bold 11px ubuntu, verdana;
display:block;text-align:center;margin-left:-60px;
}
#form_presence select,#form_presence input[type=text]{
height:25px!important;margin:5px 6px 5px 0;padding:0 5px;
}
.court{
width:195px!important;
}
.text{
width:185px!important;
}
#button_add,#button_add1{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute10.png);
border:none;
}
#button_add:hover,#button_add1:hover{
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute11.png);
}
#button_del,#button_del1{
height:25px;
width:25px;
background:url(http://i68.servimg.com/u/f68/17/44/20/01/suppri10.png);
border:none;
}
#button_del:hover,#button_del1:hover{
background:url(http://i68.servimg.com/u/f68/17/44/20/01/suppri11.png);
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var nb_lignes=2,nb_lignes1=2;

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

monTableau[0] = ["Ouverture de l'Apple Store"];
monTableau[0][1] = [
"",
"Iphone",
"Ipod nano",
"Ipad",
"Macbook",
"Imac",
"Iphone en or"];
monTableau[0][2] = ["ouest"];

monTableau[1] = ["Ouverture du Levi's"];
monTableau[1][1] = [
"",
"Jean Levi's",
"Chemise Levi's",
"Veste Levi's"];
monTableau[1][2] = ["ouest"];

monTableau[2] = ["Ouverture de la Boîte de Nuit"];
monTableau[2][1] = [
"",
"Cocktail",
"Mojito",
"Pina colada",
"Blue Lagoon",
"Bouteille de champagne"];
monTableau[2][2] = ["ouest"];

monTableau[3] = ["Ouverture du Bar"];
monTableau[3][1] = [
"",
"Café",
"Cornet de glace",
"Bière",
"Verre de vin",
"Flûte de champagne"];
monTableau[3][2] = ["ouest"];

monTableau[4] = ["Ouverture du Concessionnaire"];
monTableau[4][1] = [
"",
"Vélo"];
monTableau[4][2] = ["ouest"];

monTableau[5] = ["Ouverture de la Bijouterie"];
monTableau[5][1] = [
"",
"Bague en diamant",
"Collier saphir",
"Boucles d'oreilles rubis",
"Bracelet émeraude",
"Couronne"];
monTableau[5][2] = ["ouest"];

monTableau[6] = ["Ouverture du Salon de voyance"];
monTableau[6][1] = [
"",
"Amulette",
"Nazar Boncuck",
"Attrapes-rêves",
"Cartes divinatoires",
"Poupée vaudou",
"Pendule",
"Ouija",
"Chouette"];
monTableau[6][2] = ["nord"];

monTableau[7] = ["Ouverture de Häagen-Dazs"];
monTableau[7][1] = [
"",
"Pot Häagen-Dazs",
"Crêpe à la glace",
"Esquimau chocolat amande",
"Coupe de glace",
"Banana split"];
monTableau[7][2] = ["ouest"];

monTableau[8] = ["Ouverture de la Pâtisserie"];
monTableau[8][1] = [
"",
"Éclairs",
"Chou à la crème",
"Religieuse",
"Cupcakes",
"Tarte aux pommes",
"Tarte aux fraises",
"Opéra",
"Gâteau au chocolat",
"Gâteau d'anniversaire",
"Pièce montée"];
monTableau[8][2] = ["nord"];

monTableau[9] = ["Ouverture du Sushi Bar"];
monTableau[9][1] = [
"",
"Makis",
"Thé japonais",
"Sashimi"];
monTableau[9][2] = ["sud"];

monTableau[10] = ["Ouverture du Cultura"];
monTableau[10][1] = [
"",
"Album de Sia",
"Livre Hunger Games",
"DVD Harry Potter"];
monTableau[10][2] = ["nord"];
 
monTableau[11] = ["Ouverture du Salon de beauté"];
monTableau[11][1] = [
"",
"Gels douche DOP",
"Vernis à ongles Essie",
"Rouges à lèvres Mac",
"Invictus & Olympéa"];
monTableau[11][2] = ["nord"];

monTableau[12] = ["Ouverture du McCafé"];
monTableau[12][1] = [
"",
"Brownie",
"Flan",
"Macarons",
"Délifrapp'"];
monTableau[12][2] = ["ouest"];

monTableau[13] = ["Ouverture du Cinéma"];
monTableau[13][1] = [
"",
"Pop-corn",
"Lunettes 3D"];
monTableau[13][2] = ["sud"];

monTableau[14] = ["Ouverture de la Pharmacie"];
monTableau[14][1] = [
"",
"Pansements Mercurochrome",
"Doliprane",
"Préservatifs"];
monTableau[14][2] = ["nord"];

monTableau[15] = ["Ouverture du Jean-Paul Gaultier"];
monTableau[15][1] = [
"",
"Parfum Jean-Paul Gaultier",
"Marinière Jean-Paul Gaultier"];
monTableau[15][2] = ["sud"];

monTableau[16] = ["Ouverture du McDonald's"];
monTableau[16][1] = [
"",
"Hamburger",
"Boisson McDonald's",
"McFlurry"];
monTableau[16][2] = ["ouest"];

monTableau[17] = ["Ouverture du Duty Free"];
monTableau[17][1] = [
""];
monTableau[17][2] = ["sud"];

monTableau[18] = ["Ouverture du Restaurant Réunionnais"];
monTableau[18][1] = [
""];
monTableau[18][2] = ["sud"];

monTableau[19] = ["Ouverture de la Confiserie"];
monTableau[19][1] = [
"",
"Sucette",
"Barbe à papa",
"Pomme d'amour",
"Lapin en chocolat"];
monTableau[19][2] = ["nord"];

monTableau[20] = ["Ouverture du Photographe"];
monTableau[20][1] = [
"",
"Photo de paysage"];
monTableau[20][2] = ["nord"];

monTableau[21] = ["Ouverture de l'Animalerie"];
monTableau[21][1] = [
"",
"Poisson rouge"];
monTableau[21][2] = ["nord"];

monTableau[22] = ["Ouverture du Gun Store"];
monTableau[22][1] = [
""];
monTableau[22][2] = ["sud"];

monTableau[23] = ["Ouverture du Paradise Shop"];
monTableau[23][1] = [
"",
"Canard rose",
"Gel Durex"];
monTableau[23][2] = ["nord"];

monTableau[24] = ["Ouverture du Cabinet médical"];
monTableau[24][1] = [
"",
"Prise de sang"];
monTableau[24][2] = ["sud"];

monTableau[25] = ["Ouverture du Conforama"];
monTableau[25][1] = [
""];
monTableau[25][2] = ["sud"];

monTableau[26] = ["Ouverture de la Maison Kitsuné"];
monTableau[26][1] = [
""];
monTableau[26][2] = ["ouest"];

monTableau[27] = ["Ouverture du SonoZik"];
monTableau[27][1] = [
""];
monTableau[27][2] = ["sud"];

/* 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;
document.post.lieu.value = monTableau[x][2];
}
}
}
}

// script du bouton ajout et suppression
function add_achat(strChoix)
  {
    if(document.getElementById("activite").value==="")
    {
      alert("Choisissez un commerce !");
      return false;
    }
    else
    {
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 = 'Pseudo';
input1.className = 'formulaire text';
var espace = 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(espace);
div1.appendChild(select1);
document.getElementById("button_del").style.display = "inline";
$( "#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);}
 
if(nb_lignes<=2) {
$("#activite").removeAttr('disabled');
document.getElementById("button_del").style.display = "none";}
}
function add_prez()
{
var tab2 = document.getElementById('tab2');

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

document.getElementById("button_del1").style.display = "inline";
tab2.appendChild(div2);
div2.appendChild(input3);

nb_lignes1++;
}
function del_prez()
{
if(nb_lignes1>2)
{
nb_lignes1--;
var tab2 = document.getElementById('tab2');
var div2 = document.getElementById('div2'+nb_lignes1);
tab2.removeChild(div2);
}
if(nb_lignes1<=2) {
document.getElementById("button_del1").style.display = "none";}
}
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='bleu' 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: Quartier commerçant " + form.lieu.value + '\n'
+ ":i: Liste des achats :\n";
for (var iter = 1; iter < nb_lignes; iter++)
{
var acheteur = document.getElementById('achat'+iter).value;
var objets = document.getElementById('objet'+iter).value;
txt_message += (acheteur ? acheteur +" - "+ objets +'\n' : "\n");
}
txt_message += "\n:ps: Liste des présences :\n";
for (var iter1 = 1; iter1 < nb_lignes1; iter1++)
{
var visiteurs = document.getElementById('present'+iter1).value;
txt_message += visiteurs +'\n';
}
txt_message += "[/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="return(envoiMessage(this))" id="form_presence">
<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="791" />
<input type="hidden" name="lieu" value="" />

<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 style="margin:auto;padding-left:60px;width:470px">
<div style="font-size:12px;text-align:center;margin-left:-60px">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.</div><br />
 
<label for="activite">Commerce : <span style="color:red">*</span></label>
<select name="activite" id="activite" class="formulaire" 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">Bar</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture de la Bijouterie">Bijouterie</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 Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Cultura">Cultura</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 de l'Animalerie">Animalerie</option>
<option value="Ouverture du Gun Store">Gun Store</option>
<option value="Ouverture du Paradise Shop">Paradise Shop</option>
<option value="Ouverture du Cabinet médical">Cabinet médical</option>
<option value="Ouverture du Conforama">Conforama</option>
<option value="Ouverture de la Maison Kitsuné">Maison Kitsuné</option>
<option value="Ouverture du SonoZik">SonoZik</option>
</select>
<br />
<br />
<label for="date">Date : <span style="color:red">*</span></label>
<select name="date" id="date" class="formulaire">
<option value="">Date</option>
<option value="01 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select><br />
<br />
<label for="debut">Début : <span style="color:red">*</span></label>
<select name="h_debut" id="h_debut" class="formulaire court">
<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 court">
<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>
<select name="h_fin" id="h_fin" class="formulaire court">
<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 court">
<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>Liste des achats :</label>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="tab1" style="vertical-align:top">
<input type="text" id="achat1" name="achat1" placeholder="Pseudo" class="formulaire text" />
  <select name="objet1" id="objet1" style="margin-top:-1px" class="formulaire court"><option>Choisissez un commerce</option></select>
</td>
<td style="vertical-align:bottom;width:55px">
<input type="button" id="button_add" name="button_add" onClick="add_achat();" />
<input type="button" id="button_del" name="button_del" onClick="del_achat();" style="display:none" /></td>
</tr>
</table>
<br />
<label>Liste des présences :</label>
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="vertical-align:top;">
<div id="tab2">
<input type="text" id="present1" name="present1" class="formulaire text" placeholder="Pseudo" /><br />
</div>
</td>
<td style="vertical-align:bottom;width:100px">
<input type="button" id="button_add1" name="button_add1" onClick="add_prez();" />
<input type="button" id="button_del1" name="button_del1" onClick="del_prez();" style="display:none" />
</td>
</tr>
</table>
<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="center" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

Merci d'avance. Ce sera tout pour ce formulaire Smile

J'aimerais faire pareil pour le lieu sur ce formulaire, j'ai essayé mais pas réussi... (seulement le lieu!)
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 + "[/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>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var nb_lignes=2,nb_lignes1=2;

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

monTableau[0] = ["Ouverture de l'Apple Store"];
monTableau[0][1] = ["ouest"];

monTableau[1] = ["Ouverture du Levi's"];
monTableau[1][1] = ["ouest"];

monTableau[2] = ["Ouverture de la Boîte de Nuit"];
monTableau[2][1] = ["ouest"];

monTableau[3] = ["Ouverture du Bar"];
monTableau[3][1] = ["ouest"];

monTableau[4] = ["Ouverture du Concessionnaire"];
monTableau[4][1] = ["ouest"];

monTableau[5] = ["Ouverture de la Bijouterie"];
monTableau[5][1] = ["ouest"];

monTableau[6] = ["Ouverture du Salon de voyance"];
monTableau[6][1] = ["nord"];

monTableau[7] = ["Ouverture de Häagen-Dazs"];
monTableau[7][1] = ["ouest"];

monTableau[8] = ["Ouverture de la Pâtisserie"];
monTableau[8][1] = ["nord"];

monTableau[9] = ["Ouverture du Sushi Bar"];
monTableau[9][1] = ["sud"];

monTableau[10] = ["Ouverture du Cultura"];
monTableau[10][1] = ["nord"];
 
monTableau[11] = ["Ouverture du Salon de beauté"];
monTableau[11][1] = ["nord"];

monTableau[12] = ["Ouverture du McCafé"];
monTableau[12][1] = ["ouest"];

monTableau[13] = ["Ouverture du Cinéma"];
monTableau[13][1] = ["sud"];

monTableau[14] = ["Ouverture de la Pharmacie"];
monTableau[14][1] = ["nord"];

monTableau[15] = ["Ouverture du Jean-Paul Gaultier"];
monTableau[15][1] = ["sud"];

monTableau[16] = ["Ouverture du McDonald's"];
monTableau[16][1] = ["ouest"];

monTableau[17] = ["Ouverture du Duty Free"];
monTableau[17][1] = ["sud"];

monTableau[18] = ["Ouverture du Restaurant Réunionnais"];
monTableau[18][1] = ["sud"];

monTableau[19] = ["Ouverture de la Confiserie"];
monTableau[19][1] = ["nord"];

monTableau[20] = ["Ouverture du Photographe"];
monTableau[20][1] = ["nord"];

monTableau[21] = ["Ouverture de l'Animalerie"];
monTableau[21][1] = ["nord"];

monTableau[22] = ["Ouverture du Gun Store"];
monTableau[22][1] = ["sud"];

monTableau[23] = ["Ouverture du Paradise Shop"];
monTableau[23][1] = ["nord"];

monTableau[24] = ["Ouverture du Cabinet médical"];
monTableau[24][1] = ["sud"];

monTableau[25] = ["Ouverture du Conforama"];
monTableau[25][1] = ["sud"];

monTableau[26] = ["Ouverture de la Maison Kitsuné"];
monTableau[26][1] = ["ouest"];

monTableau[27] = ["Ouverture du SonoZik"];
monTableau[27][1] = ["sud"];

/* changement d'options */
function jeu_onchange(strChoix)
{
for(var x=0;x<monTableau.length;x++)
{
if (monTableau[x][0] == strChoix)
document.post.lieu.value = monTableau[x][1];
}
}
</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="785" />
 
<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Planning des commerces</h2>
</th>
</tr>
<tr>
  <td height="5">
  </td>
</tr>
<tr>
<tr>
<td class="row1"><br /><div align="center">
 
<label for="activite"><span style="font-family: ubuntu, verdana;font-size:11px;"><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 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 Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Cultura">Cultura</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 de l'Animalerie">Animalerie</option>
<option value="Ouverture du Gun Store">Gun Store</option>
<option value="Ouverture du Paradise Shop">Paradise Shop</option>
<option value="Ouverture du Cabinet médical">Cabinet médical</option>
<option value="Ouverture du Conforama">Conforama</option>
<option value="Ouverture de la Maison Kitsuné">Maison Kitsuné</option>
<option value="Ouverture du SonoZik">SonoZik</option>
</select>
<br />
<br />
<label for="date"><span style="font-family: ubuntu, verdana;font-size:11px;"><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 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select>
<br />
<br />
<label for="debut"><span style="font-family: ubuntu, verdana;font-size:11px;"><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;">
<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;"><strong>Fin :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_fin" id="h_fin" class="formulaire" style="height:30px;width:195px;">
<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 />
<input type="hidden" name="lieu" value="" />
</div>
</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;">
<tr class="modactions">
<td align="center" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Sam 9 Jan 2016 - 16:54

C'est pour l'alignement vertical des boutons , je suppose ...

j'ai aussi mis le tiret des achats en conditionnel , puisque vous avez opté pour la première option vide dans la liste des objets .

Code:
<style>
#form_presence label{
font:bold 11px ubuntu, verdana;
display:block;text-align:center;margin-left:-60px;
}
#form_presence select,#form_presence input[type=text]{
height:25px!important;margin:5px 6px 5px 0;padding:0 5px;
}
.court{
width:195px!important;
}
.text{
width:185px!important;
}
#button_add,#button_add1{
height:25px;
width:25px;
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute10.png);
border:none;
}
#button_add:hover,#button_add1:hover{
background:url(http://i21.servimg.com/u/f21/17/44/20/01/ajoute11.png);
}
#button_del,#button_del1{
height:25px;
width:25px;
background:url(http://i68.servimg.com/u/f68/17/44/20/01/suppri10.png);
border:none;
}
#button_del:hover,#button_del1:hover{
background:url(http://i68.servimg.com/u/f68/17/44/20/01/suppri11.png);
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var nb_lignes=2,nb_lignes1=2;

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

monTableau[0] = ["Ouverture de l'Apple Store"];
monTableau[0][1] = [
"",
"Iphone",
"Ipod nano",
"Ipad",
"Macbook",
"Imac",
"Iphone en or"];
monTableau[0][2] = ["ouest"];

monTableau[1] = ["Ouverture du Levi's"];
monTableau[1][1] = [
"",
"Jean Levi's",
"Chemise Levi's",
"Veste Levi's"];
monTableau[1][2] = ["ouest"];

monTableau[2] = ["Ouverture de la Boîte de Nuit"];
monTableau[2][1] = [
"",
"Cocktail",
"Mojito",
"Pina colada",
"Blue Lagoon",
"Bouteille de champagne"];
monTableau[2][2] = ["ouest"];

monTableau[3] = ["Ouverture du Bar"];
monTableau[3][1] = [
"",
"Café",
"Cornet de glace",
"Bière",
"Verre de vin",
"Flûte de champagne"];
monTableau[3][2] = ["ouest"];

monTableau[4] = ["Ouverture du Concessionnaire"];
monTableau[4][1] = [
"",
"Vélo"];
monTableau[4][2] = ["ouest"];

monTableau[5] = ["Ouverture de la Bijouterie"];
monTableau[5][1] = [
"",
"Bague en diamant",
"Collier saphir",
"Boucles d'oreilles rubis",
"Bracelet émeraude",
"Couronne"];
monTableau[5][2] = ["ouest"];

monTableau[6] = ["Ouverture du Salon de voyance"];
monTableau[6][1] = [
"",
"Amulette",
"Nazar Boncuck",
"Attrapes-rêves",
"Cartes divinatoires",
"Poupée vaudou",
"Pendule",
"Ouija",
"Chouette"];
monTableau[6][2] = ["nord"];

monTableau[7] = ["Ouverture de Häagen-Dazs"];
monTableau[7][1] = [
"",
"Pot Häagen-Dazs",
"Crêpe à la glace",
"Esquimau chocolat amande",
"Coupe de glace",
"Banana split"];
monTableau[7][2] = ["ouest"];

monTableau[8] = ["Ouverture de la Pâtisserie"];
monTableau[8][1] = [
"",
"Éclairs",
"Chou à la crème",
"Religieuse",
"Cupcakes",
"Tarte aux pommes",
"Tarte aux fraises",
"Opéra",
"Gâteau au chocolat",
"Gâteau d'anniversaire",
"Pièce montée"];
monTableau[8][2] = ["nord"];

monTableau[9] = ["Ouverture du Sushi Bar"];
monTableau[9][1] = [
"",
"Makis",
"Thé japonais",
"Sashimi"];
monTableau[9][2] = ["sud"];

monTableau[10] = ["Ouverture du Cultura"];
monTableau[10][1] = [
"",
"Album de Sia",
"Livre Hunger Games",
"DVD Harry Potter"];
monTableau[10][2] = ["nord"];
 
monTableau[11] = ["Ouverture du Salon de beauté"];
monTableau[11][1] = [
"",
"Gels douche DOP",
"Vernis à ongles Essie",
"Rouges à lèvres Mac",
"Invictus & Olympéa"];
monTableau[11][2] = ["nord"];

monTableau[12] = ["Ouverture du McCafé"];
monTableau[12][1] = [
"",
"Brownie",
"Flan",
"Macarons",
"Délifrapp'"];
monTableau[12][2] = ["ouest"];

monTableau[13] = ["Ouverture du Cinéma"];
monTableau[13][1] = [
"",
"Pop-corn",
"Lunettes 3D"];
monTableau[13][2] = ["sud"];

monTableau[14] = ["Ouverture de la Pharmacie"];
monTableau[14][1] = [
"",
"Pansements Mercurochrome",
"Doliprane",
"Préservatifs"];
monTableau[14][2] = ["nord"];

monTableau[15] = ["Ouverture du Jean-Paul Gaultier"];
monTableau[15][1] = [
"",
"Parfum Jean-Paul Gaultier",
"Marinière Jean-Paul Gaultier"];
monTableau[15][2] = ["sud"];

monTableau[16] = ["Ouverture du McDonald's"];
monTableau[16][1] = [
"",
"Hamburger",
"Boisson McDonald's",
"McFlurry"];
monTableau[16][2] = ["ouest"];

monTableau[17] = ["Ouverture du Duty Free"];
monTableau[17][1] = [
""];
monTableau[17][2] = ["sud"];

monTableau[18] = ["Ouverture du Restaurant Réunionnais"];
monTableau[18][1] = [
""];
monTableau[18][2] = ["sud"];

monTableau[19] = ["Ouverture de la Confiserie"];
monTableau[19][1] = [
"",
"Sucette",
"Barbe à papa",
"Pomme d'amour",
"Lapin en chocolat"];
monTableau[19][2] = ["nord"];

monTableau[20] = ["Ouverture du Photographe"];
monTableau[20][1] = [
"",
"Photo de paysage"];
monTableau[20][2] = ["nord"];

monTableau[21] = ["Ouverture de l'Animalerie"];
monTableau[21][1] = [
"",
"Poisson rouge"];
monTableau[21][2] = ["nord"];

monTableau[22] = ["Ouverture du Gun Store"];
monTableau[22][1] = [
""];
monTableau[22][2] = ["sud"];

monTableau[23] = ["Ouverture du Paradise Shop"];
monTableau[23][1] = [
"",
"Canard rose",
"Gel Durex"];
monTableau[23][2] = ["nord"];

monTableau[24] = ["Ouverture du Cabinet médical"];
monTableau[24][1] = [
"",
"Prise de sang"];
monTableau[24][2] = ["sud"];

monTableau[25] = ["Ouverture du Conforama"];
monTableau[25][1] = [
""];
monTableau[25][2] = ["sud"];

monTableau[26] = ["Ouverture de la Maison Kitsuné"];
monTableau[26][1] = [
""];
monTableau[26][2] = ["ouest"];

monTableau[27] = ["Ouverture du SonoZik"];
monTableau[27][1] = [
""];
monTableau[27][2] = ["sud"];

/* 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;
document.post.lieu.value = monTableau[x][2];
}
}
}
}

// script du bouton ajout et suppression
function add_achat(strChoix)
  {
    if(document.getElementById("activite").value==="")
    {
      alert("Choisissez un commerce !");
      return false;
    }
    else
    {
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 = 'Pseudo';
input1.className = 'formulaire text';
var espace = 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(espace);
div1.appendChild(select1);
document.getElementById("button_del").style.display = "inline";
$( "#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);}
 
if(nb_lignes<=2) {
$("#activite").removeAttr('disabled');
document.getElementById("button_del").style.display = "none";}
}
function add_prez()
{
var tab2 = document.getElementById('tab2');

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

document.getElementById("button_del1").style.display = "inline";
tab2.appendChild(div2);
div2.appendChild(input3);

nb_lignes1++;
}
function del_prez()
{
if(nb_lignes1>2)
{
nb_lignes1--;
var tab2 = document.getElementById('tab2');
var div2 = document.getElementById('div2'+nb_lignes1);
tab2.removeChild(div2);
}
if(nb_lignes1<=2) {
document.getElementById("button_del1").style.display = "none";}
}
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='bleu' 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: Quartier commerçant " + form.lieu.value + '\n'
+ ":i: Liste des achats :\n";
for (var iter = 1; iter < nb_lignes; iter++)
{
var acheteur = document.getElementById('achat'+iter).value;
var objets = document.getElementById('objet'+iter).value;
txt_message += (acheteur ? acheteur +" - "+ objets +'\n' : "\n");
}
txt_message += "\n:ps: Liste des présences :\n";
for (var iter1 = 1; iter1 < nb_lignes1; iter1++)
{
var visiteurs = document.getElementById('present'+iter1).value;
txt_message += visiteurs +'\n';
}
txt_message += "[/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="return(envoiMessage(this))" id="form_presence">
<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="791" />
<input type="hidden" name="lieu" value="" />

<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 style="margin:auto;padding-left:60px;width:470px">
<div style="font-size:12px;text-align:center;margin-left:-60px">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.</div><br />
 
<label for="activite">Commerce : <span style="color:red">*</span></label>
<select name="activite" id="activite" class="formulaire" 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">Bar</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture de la Bijouterie">Bijouterie</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 Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Cultura">Cultura</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 de l'Animalerie">Animalerie</option>
<option value="Ouverture du Gun Store">Gun Store</option>
<option value="Ouverture du Paradise Shop">Paradise Shop</option>
<option value="Ouverture du Cabinet médical">Cabinet médical</option>
<option value="Ouverture du Conforama">Conforama</option>
<option value="Ouverture de la Maison Kitsuné">Maison Kitsuné</option>
<option value="Ouverture du SonoZik">SonoZik</option>
</select>
<br />
<br />
<label for="date">Date : <span style="color:red">*</span></label>
<select name="date" id="date" class="formulaire">
<option value="">Date</option>
<option value="01 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select><br />
<br />
<label for="debut">Début : <span style="color:red">*</span></label>
<select name="h_debut" id="h_debut" class="formulaire court">
<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 court">
<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>
<select name="h_fin" id="h_fin" class="formulaire court">
<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 court">
<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>Liste des achats :</label>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="tab1" style="vertical-align:top">
<input type="text" id="achat1" name="achat1" placeholder="Pseudo" class="formulaire text" />
  <select name="objet1" id="objet1" style="margin-top:-1px" class="formulaire court"><option>Choisissez un commerce</option></select>
</td>
<td style="vertical-align:bottom;width:55px;padding:5px 0">
<input type="button" id="button_add" name="button_add" onClick="add_achat();" />
<input type="button" id="button_del" name="button_del" onClick="del_achat();" style="display:none" /></td>
</tr>
</table>
<br />
<label>Liste des présences :</label>
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="vertical-align:top;">
<div id="tab2">
<input type="text" id="present1" name="present1" class="formulaire text" placeholder="Pseudo" /><br />
</div>
</td>
<td style="vertical-align:bottom;width:100px;padding:5px 0">
<input type="button" id="button_add1" name="button_add1" onClick="add_prez();" />
<input type="button" id="button_del1" name="button_del1" onClick="del_prez();" style="display:none" />
</td>
</tr>
</table>
<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="center" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

Pour le 2e code , c'est presque ça ...

en premier , pas besoin de mettre une alerte sue le champ du lieu , puisqu'il est caché
Code:
 // inutile
else if(form.lieu.value==' ')
{
alert('Vous devez indiquer un lieu');
return false;
}

ne pas oublier le supplément de texte dans le script d'envoi :

Code:
+ ":lu: Quartier commerçant " + form.lieu.value + "[/size][/td][/tr][/table]" + '\n';

... et enfin , le plus important , placer le déclencheur "onchange" sur la liste des commerces :

Code:
<select name="activite" id="activite" class="formulaire" style="height:30px;" onchange="jeu_onchange(this[this.selectedIndex].value)">

un essai ?

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
{
// 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: Quartier commerçant " + form.lieu.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>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var nb_lignes=2,nb_lignes1=2;

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

monTableau[0] = ["Ouverture de l'Apple Store"];
monTableau[0][1] = ["ouest"];

monTableau[1] = ["Ouverture du Levi's"];
monTableau[1][1] = ["ouest"];

monTableau[2] = ["Ouverture de la Boîte de Nuit"];
monTableau[2][1] = ["ouest"];

monTableau[3] = ["Ouverture du Bar"];
monTableau[3][1] = ["ouest"];

monTableau[4] = ["Ouverture du Concessionnaire"];
monTableau[4][1] = ["ouest"];

monTableau[5] = ["Ouverture de la Bijouterie"];
monTableau[5][1] = ["ouest"];

monTableau[6] = ["Ouverture du Salon de voyance"];
monTableau[6][1] = ["nord"];

monTableau[7] = ["Ouverture de Häagen-Dazs"];
monTableau[7][1] = ["ouest"];

monTableau[8] = ["Ouverture de la Pâtisserie"];
monTableau[8][1] = ["nord"];

monTableau[9] = ["Ouverture du Sushi Bar"];
monTableau[9][1] = ["sud"];

monTableau[10] = ["Ouverture du Cultura"];
monTableau[10][1] = ["nord"];
 
monTableau[11] = ["Ouverture du Salon de beauté"];
monTableau[11][1] = ["nord"];

monTableau[12] = ["Ouverture du McCafé"];
monTableau[12][1] = ["ouest"];

monTableau[13] = ["Ouverture du Cinéma"];
monTableau[13][1] = ["sud"];

monTableau[14] = ["Ouverture de la Pharmacie"];
monTableau[14][1] = ["nord"];

monTableau[15] = ["Ouverture du Jean-Paul Gaultier"];
monTableau[15][1] = ["sud"];

monTableau[16] = ["Ouverture du McDonald's"];
monTableau[16][1] = ["ouest"];

monTableau[17] = ["Ouverture du Duty Free"];
monTableau[17][1] = ["sud"];

monTableau[18] = ["Ouverture du Restaurant Réunionnais"];
monTableau[18][1] = ["sud"];

monTableau[19] = ["Ouverture de la Confiserie"];
monTableau[19][1] = ["nord"];

monTableau[20] = ["Ouverture du Photographe"];
monTableau[20][1] = ["nord"];

monTableau[21] = ["Ouverture de l'Animalerie"];
monTableau[21][1] = ["nord"];

monTableau[22] = ["Ouverture du Gun Store"];
monTableau[22][1] = ["sud"];

monTableau[23] = ["Ouverture du Paradise Shop"];
monTableau[23][1] = ["nord"];

monTableau[24] = ["Ouverture du Cabinet médical"];
monTableau[24][1] = ["sud"];

monTableau[25] = ["Ouverture du Conforama"];
monTableau[25][1] = ["sud"];

monTableau[26] = ["Ouverture de la Maison Kitsuné"];
monTableau[26][1] = ["ouest"];

monTableau[27] = ["Ouverture du SonoZik"];
monTableau[27][1] = ["sud"];

/* changement d'options */
function jeu_onchange(strChoix)
{
for(var x=0;x<monTableau.length;x++)
{
if (monTableau[x][0] == strChoix)
document.post.lieu.value = monTableau[x][1];
}
}
</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="785" />
 
<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Planning des commerces</h2>
</th>
</tr>
<tr>
  <td height="5">
  </td>
</tr>
<tr>
<tr>
<td class="row1"><br /><div align="center">
 
<label for="activite"><span style="font-family: ubuntu, verdana;font-size:11px;"><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">Bar</option>
<option value="Ouverture du Concessionnaire">Concessionnaire</option>
<option value="Ouverture de la Bijouterie">Bijouterie</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 Sushi Bar">Sushi Bar</option>
<option value="Ouverture du Cultura">Cultura</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 de l'Animalerie">Animalerie</option>
<option value="Ouverture du Gun Store">Gun Store</option>
<option value="Ouverture du Paradise Shop">Paradise Shop</option>
<option value="Ouverture du Cabinet médical">Cabinet médical</option>
<option value="Ouverture du Conforama">Conforama</option>
<option value="Ouverture de la Maison Kitsuné">Maison Kitsuné</option>
<option value="Ouverture du SonoZik">SonoZik</option>
</select>
<br />
<br />
<label for="date"><span style="font-family: ubuntu, verdana;font-size:11px;"><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 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select>
<br />
<br />
<label for="debut"><span style="font-family: ubuntu, verdana;font-size:11px;"><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;">
<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;"><strong>Fin :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_fin" id="h_fin" class="formulaire" style="height:30px;width:195px;">
<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 />
<input type="hidden" name="lieu" value="" />
</div>
</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:6px;">
<tr class="modactions">
<td align="center" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Sam 9 Jan 2016 - 17:23

Génial !

Pour les images des croix, c'est toujours décalé.

Je pense qu'en fait, c'est le champ liste qui est décalé d'un pixel vers le bas (voir traits rouges) pour la liste des achats.

Pour la liste des présences, pour le premier champ il est bien aligné, mais quand on ajoute il est décalé d'un pixel vers le haut (voir traits rouges).


Voilà merci beaucoup.

Je vais passer à d'autres formulaires, préférez-vous que je fasse un autre sujet ou que je continue sur celui-ci ?

Merci d'avance.

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Sam 9 Jan 2016 - 17:54

Le décalage vient bien de la balise liste , qui est déterminée par le CSS spécifique du navigateur . C'est le navigateur qui prime sur le CSS général ... Sur Firefox , je n'ai pas ce souci ...

Euh ... c'est grave , le pixel de décalage ?

Si les problèmes de vos autres formulaire sont du même type que celui là , on peut continuer sur le même sujet .

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Sam 9 Jan 2016 - 18:03

Ca me dérange un peu, on le voit quand même sur Chrome et Safari... Mais si on ne peut rien y faire ce n'est pas grave

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Dim 10 Jan 2016 - 16:22

Pour ce qui est des différences entre les différents navigateurs , je ne peux que vous recommander cette lecture :

http://www.alsacreations.com/actu/lire/453-comment-ne-pas-styler-les-elements-de-formulaire.html


Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Dim 10 Jan 2016 - 19:15

Merci !

Donc je pense que je ne peux rien y faire ?

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mer 13 Jan 2016 - 18:33

Bonjour,

Alors pour ce formulaire, j'aimerais que dans la liste déroulante, seuls les mots avant la parenthèse s'affichent alors que la parenthèse, elle, ne s'afficherait qu'à l'envoi du message.

Par exemple :
Sur le formulaire dans la liste déroulante on aurait :
Salle d'art
Salle de cours abandonnée
Amphithéâtre
Bibliothèque
Cours en plein air
Sortie
Alors que sur le message ça afficherait ceci :
Salle d'art (hall de la créativité)
Salle de cours abandonnée (hall de la culture)
Amphithéâtre (hall des services)
Bibliothèque (hall des services)
Cours en plein air
Sortie

Et il ne fonctionne pas à l'envoi aussi...

Code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2,nb_lignes1=2;

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

monTableau[0] = ["Cours d'art"];
monTableau[0][1] = [
"Salle d'art (hall de la créativité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[1] = ["Cours d'astronomie"];
monTableau[1][1] = [
"Salle d'astronomie (hall de la rationalité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[2] = ["Cours de bienséance"];
monTableau[2][1] = [
"Salle de bienséance (hall de la technique)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[3] = ["Cours de botanique"];
monTableau[3][1] = [
"Salle de botanique (hall de la technique)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[4] = ["Cours de cinéma"];
monTableau[4][1] = [
"Salle de cinéma (hall de la créativité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[5] = ["Cours de cuisine"];
monTableau[5][1] = [
"Salle de cuisine (hall de la technique)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[6] = ["Cours d'écriture"];
monTableau[6][1] = [
"Salle d'écriture (hall de la culture)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[7] = ["Cours d'esthétique"];
monTableau[7][1] = [
"Salle d'esthétique (hall de la créativité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[8] = ["Cours de géographie"];
monTableau[8][1] = [
"Salle de géographie (hall de la culture)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[9] = ["Cours d'habbologie"];
monTableau[9][1] = [
"Salle d'habbologie (hall de la technique)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[10] = ["Cours d'histoire"];
monTableau[10][1] = [
"Salle d'histoire (hall de la culture)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[11] = ["Cours d'informatique"];
monTableau[11][1] = [
"Salle d'informatique (hall de la rationalité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[12] = ["Cours de journalisme"];
monTableau[12][1] = [
"Salle de journalisme (hall de la technique)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[13] = ["Cours de langues"];
monTableau[13][1] = [
"Salle de langues (hall de la culture)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[14] = ["Cours de littérature"];
monTableau[14][1] = [
"Salle de littérature (hall de la créativité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[15] = ["Cours de mathématiques"];
monTableau[15][1] = [
"Salle de mathématiques (hall de la rationalité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[16] = ["Cours de médecine"];
monTableau[16][1] = [
"Salle de médecine (hall de la rationalité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[17] = ["Cours de mode"];
monTableau[17][1] = [
"Salle de mode (hall de la créativité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[18] = ["Cours de musique"];
monTableau[18][1] = [
"Salle de musique (hall de la créativité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[19] = ["Cours de philosophie"];
monTableau[12][1] = [
"Salle de philosophie (hall de la culture)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[20] = ["Cours de psychologie"];
monTableau[20][1] = [
"Salle de psychologie (hall de la rationalité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[21] = ["Cours de sciences"];
monTableau[21][1] = [
"Salle de sciences (hall de la rationalité)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[22] = ["Cours de société"];
monTableau[22][1] = [
"Salle de société (hall de la culture)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
monTableau[23] = ["Cours de technologie"];
monTableau[23][1] = [
"Salle de technologie (hall de la technique)",
"Salle de cours abandonnée (hall de la culture)",
"Amphithéâtre (hall des services)",
"Bibliothèque (hall des services)",
"Cours en plein air",
"Sortie"];
 
/* changement d'options */
function jeu_onchange(strChoix)
{
document.post.salle1.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.salle1.options[y] = opt;
}
}
}
}

function envoiMessage(form)
{
if(form.activite.value==' ')
{
alert('Vous devez choisir une matière');
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='bleu' width='70%' align='center'][tr][td][size=13]:cr: " + 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 + "[/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="784" />

<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Planning des cours</h2>
</th>
</tr>
<tr>
  <td height="5">
  </td>
</tr>
<tr>
<tr>
<td class="row1"><br />
<div align="center">
  <span style="font-size:12px;">Avant de planifier un cours, vérifiez qu'il n'y a pas une autre activité sur le même créneau horaire.</span><br /><br />
 
<label for="activite"><span style="font-family: ubuntu, verdana;font-size:11px;"><strong>Matière :</strong> <font color="red">*</font></span></label>
<br />
<select name="activite" id="activite" class="formulaire" style="height:25px;" onchange="jeu_onchange(this[this.selectedIndex].value)">
<option value=" "></option>
<option value="Cours d'art">Art</option>
<option value="Cours d'astronomie">Astronomie</option>
<option value="Cours de bienséance">Bienséance</option>
<option value="Cours de botanique">Botanique</option>
<option value="Cours de cinéma">Cinéma</option>
<option value="Cours de cuisine">Cuisine</option>
<option value="Cours d'écriture">Écriture</option>
<option value="Cours d'esthétique">Esthétique</option>
<option value="Cours de géographie">Géographie</option>
<option value="Cours d'habbologie">Habbologie</option>
<option value="Cours d'histoire">Histoire</option>
<option value="Cours d'informatique">Informatique</option>
<option value="Cours de journalisme">Journalisme</option>
<option value="Cours de langues">Langues</option>
<option value="Cours de littérature">Littérature</option>
<option value="Cours de mathématiques">Mathématiques</option>
<option value="Cours de médecine">Médecine</option>
<option value="Cours de mode">Mode</option>
<option value="Cours de musique">Musique</option>
<option value="Cours de philosophie">Philosophie</option>
<option value="Cours de psychologie">Psychologie</option>
<option value="Cours de sciences">Sciences</option>
<option value="Cours de société">Société</option>
<option value="Cours de technologie">Technologie</option>
</select>
<br />
<br />
<label for="date"><span style="font-family: ubuntu, verdana;font-size:11px;"><strong>Date :</strong> <font color="red">*</font></span></label>
<br />
<select name="date" id="date" class="formulaire" style="height:25px;">
<option value=" ">Date</option>
<option value="01 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select>
<br />
<br />
<label for="debut"><span style="font-family: ubuntu, verdana;font-size:11px;"><strong>Début :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_debut" id="h_debut" class="formulaire" style="height:25px;width:196px;">
<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:25px;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;"><strong>Fin :</strong> <font color="red">*</font></span></label>
<br />
<select name="h_fin" id="h_fin" class="formulaire" style="height:25px;width:195px;">
<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:25px;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="salle1" id="salle1" class="formulaire court" style="height:25px;">
<option value=" "> </option>
<option value="Amphithéâtre (hall des services)">Amphithéâtre</option>
<option value="Bibliothèque (hall des services)">Bibliothèque</option>
<option value="Cours en plein air">Cours en plein air</option>
<option value="Salle de cours abandonnée (hall de la culture)">Salle de cours abandonnée</option>
<option value="Salle d'art (hall de la créativité)">Salle d'art</option>
<option value="Salle d'astronomie (hall de la rationalité)">Salle d'astronomie</option>
<option value="Salle de bienséance (hall de la technique)">Salle de bienséance</option>
<option value="Salle de botanique (hall de la technique)">Salle de botanique</option>
<option value="Salle de cinéma (hall de la créativité)">Salle de cinéma</option>
<option value="Salle de cuisine (hall de la technique)">Salle de cuisine</option>
<option value="Salle d'écriture (hall de la culture)">Salle d'écriture</option>
<option value="Salle d'esthétique (hall de la créativité)">Salle d'esthétique</option>
<option value="Salle de géographie (hall de la culture)">Salle de géographie</option>
<option value="Salle d'habbologie (hall de la technique)">Salle d'habbologie</option>
<option value="Salle d'histoire (hall de la culture)">Salle d'histoire</option>
<option value="Salle d'informatique (hall de la rationalité)">Salle d'informatique</option>
<option value="Salle de journalisme (hall de la technique)">Salle de journalisme</option>
<option value="Salle de langues (hall de la culture)">Salle de langues</option>
<option value="Salle de littérature (hall de la créativité)">Salle de littérature</option>
<option value="Salle de mathématiques (hall de la rationalité)">Salle de mathématiques</option>
<option value="Salle de médecine (hall de la rationalité)">Salle de médecine</option>
<option value="Salle de mode (hall de la créativité)">Salle de mode</option>
<option value="Salle de musique (hall de la créativité)">Salle de musique</option>
<option value="Salle de philosophie (hall de la culture)">Salle de philosophie</option>
<option value="Salle de psychologie (hall de la rationalité)">Salle de psychologie</option>
<option value="Salle de sciences (hall de la rationalité)">Salle de sciences</option>
<option value="Salle de société (hall de la culture)">Salle de société</option>
<option value="Salle de technologie (hall de la technique)">Salle de technologie</option>
<option value="Sortie">Sortie</option></select>
<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="center" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

Merci d'avance Smile

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Jeu 14 Jan 2016 - 18:49

up

Phyliono
*****

Messages : 991
Inscrit(e) le : 24/02/2013

http://www.universiteuniverselle.com
Phyliono a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 5 Précédent  1, 2, 3, 4, 5  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum