Personnalisation d'un formulaire HTML

Page 4 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 : 921
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 22 Fév 2016 - 2:31

J'ai fait la modification mais les listes Lieu & Etoiles ne fonctionnent plus, je ne peux plus les modifier après avoir choisi la matière...

Code:
<style>
#form_prof label{
font:bold 11px ubuntu, verdana;
display:block;
text-align:center;
}
#form_prof select,#form_prof input[type=text]{
height:25px!important;margin:10px 6px 0 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">

/* 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[19][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 ",""]
];
/* tableau options multiples */
mesStars = [];

mesStars[0] = ["10"];
mesStars[0][1] = [
["Pas de bonus","0"]
];

mesStars[1] = ["20"];
mesStars[1][1] = [
["Pas de bonus","0"]
];

mesStars[2] = ["30"];
mesStars[2][1] = [
["Pas de bonus","0"],
["1 *","1"]
];

mesStars[3] = ["40"];
mesStars[3][1] = [
["Pas de bonus","0"],
["1 *","1"]
];

mesStars[4] = ["50"];
mesStars[4][1] = [
["Pas de bonus","0"],
["1 *","1"],
["2 *","2"]
];

mesStars[5] = ["60"];
mesStars[5][1] = [
["Pas de bonus","0"],
["1 *","1"],
["2 *","2"]
];

/* changement d'options */
function jeu_onchange(strChoix)
{
document.post.lieu.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][0],monTableau[x][1][y][0]+monTableau[x][1][y][1],true,true):
new Option(monTableau[x][1][y][0],monTableau[x][1][y][0]+monTableau[x][1][y][1],false,false);
document.post.lieu.options[y] = opt;
}
}
}
}

/* message étoiles et options étoiles */

function verification_choix(starChoix) {
if(post.duree.selectedIndex === 1||post.duree.selectedIndex === 2)
{

document.getElementById("star_mess").innerHTML = "Bonus pour tous les élèves présents : 1 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' />.";
}
else if(post.duree.selectedIndex === 3||post.duree.selectedIndex === 4)
{
document.getElementById("star_mess").innerHTML = "Bonus pour tous les élèves présents : 2 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' />.<br />Option d'un bonus supplémentaire pour 3 élèves : 1 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' />";
}
else if(post.duree.selectedIndex === 5||post.duree.selectedIndex === 6)
{
document.getElementById("star_mess").innerHTML = "Bonus pour tous les élèves présents : 3 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' alt='étoile' />.<br />Option d'un bonus supplémentaire pour 6 élèves : 1 ou 2 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' /> ";
}
else
{
document.getElementById("star_mess").innerHTML = "";
}

document.post.etoile1.options.length = 0;
for(var x=0;x<mesStars.length;x++)
{
if (mesStars[x][0] == starChoix)
{
for(var y=0;y<mesStars[x][1].length;y++)
{
opt1 = y===0?
new Option(mesStars[x][1][y][0],mesStars[x][1][y][1],true,true):
new Option(mesStars[x][1][y][0],mesStars[x][1][y][1],false,false);
document.post.etoile1.options[y] = opt1;
}
}
}
}

var nb_lignes=2,nb_lignes1=2;

// script du bouton ajout et suppression

function add_prez()
{
if(document.getElementById("duree").value==="")
{
alert("Choisissez une durée !");
return false;
}
else
{
var tab2 = document.getElementById('tab2');

var div1 = document.createElement('div');
div1.id = 'div1'+nb_lignes;
var input1 = document.createElement('input');
input1.id = 'present'+nb_lignes;
input1.name = 'present'+nb_lignes;
input1.type = 'text';
input1.placeholder = 'Pseudo';
input1.className = 'formulaire court';
var espace = document.createTextNode(" ");
var select1 = document.createElement('select');
select1.id = 'etoile'+nb_lignes;
select1.name = 'etoile'+nb_lignes;
select1.className = 'formulaire court';

tab2.appendChild(div1);
div1.appendChild(input1);
div1.appendChild(espace);
div1.appendChild(select1);
document.getElementById("button_del1").style.display = "inline";
$( "#etoile1 Option" ).clone().appendTo( "#etoile"+nb_lignes );
$("#duree").attr('disabled', 'disabled');
nb_lignes++;
}
}
function del_prez()
{
if(nb_lignes>2)
{
nb_lignes--;
var tab2 = document.getElementById('tab2');
var div1 = document.getElementById('div1'+nb_lignes);
tab2.removeChild(div1);}

if(nb_lignes <= 2) {
$("#duree").removeAttr('disabled');
document.getElementById("button_del1").style.display = "none";}
}

/* envoi du message */

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.duree.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 h_debut = Number(form.h_debut.value);
var m_debut = Number(form.m_debut.value);
var m_fin = Number(form.duree.value);
var h_fin;
if ((m_debut + m_fin) >= 60)
{
m_fin = (m_debut + m_fin) - 60;
h_fin = h_debut + 1;
}
else
{
m_fin = m_debut + m_fin;
h_fin = h_debut;
}
if(h_debut = 0)
{h_debut = "00";}
if(m_debut = 0)
{m_debut = "00";}
if(m_fin = 0)
{m_fin = "00";}
if(h_fin = 0||h_fin = 24)
{h_fin = "00";}

var txt_message = "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:cr: " + form.activite.value + '\n'
+ ":dt: " + form.date.value + '\n'
+ ":hr: " + h_debut + "h" + m_debut + " à " + h_fin + "h" + m_fin + '\n'
+ ":lu: " + form.lieu.value + '\n'
+ ":ps: Liste des présences :" + '\n';
for (var nb = 1; nb < nb_lignes; nb++)
{
var present = document.getElementById('present'+nb).value;
var etoiles = Number(document.getElementById('etoile'+nb).value);
if(post.duree.selectedIndex === 1||post.duree.selectedIndex === 2)
{etoiles = etoiles + 1 ;}
else if(post.duree.selectedIndex === 3||post.duree.selectedIndex === 4)
{etoiles = etoiles + 2 ;}
else if(post.duree.selectedIndex === 5||post.duree.selectedIndex === 6)
{etoiles = etoiles + 3 ;}
txt_message += (present ? present +" - "+ etoiles + " <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' />\n" : "\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 ;
return true;
}
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="return(envoiMessage(this))" id="form_prof">
<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="789" />

<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des professeurs</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 avant la fin du cours.</span><br /><br />

<label for="activite">Matière : <span style="color:red">*</span></label>

<select name="activite" id="activite" class="formulaire" style="height:30px;" 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">Date : <span style="color:red">*</span></label>

<select name="date" id="date" class="formulaire">
<option value="" style="display:none">Date</option>
<option value="01 février">01 février</option>
<option value="02 février">02 février</option>
<option value="03 février">03 février</option>
<option value="04 février">04 février</option>
<option value="05 février">05 février</option>
<option value="06 février">06 février</option>
<option value="07 février">07 février</option>
<option value="08 février">08 février</option>
<option value="09 février">09 février</option>
<option value="10 février">10 février</option>
<option value="11 février">11 février</option>
<option value="12 février">12 février</option>
<option value="13 février">13 février</option>
<option value="14 février">14 février</option>
<option value="15 février">15 février</option>
<option value="16 février">16 février</option>
<option value="17 février">17 février</option>
<option value="18 février">18 février</option>
<option value="19 février">19 février</option>
<option value="20 février">20 février</option>
<option value="21 février">21 février</option>
<option value="22 février">22 février</option>
<option value="23 février">23 février</option>
<option value="24 février">24 février</option>
<option value="25 février">25 février</option>
<option value="26 février">26 février</option>
<option value="27 février">27 février</option>
<option value="28 février">28 février</option>
<option value="29 février">29 février</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="" style="display:none">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 court">
<option value="" style="display:none">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="duree">Durée : <span style="color:red">*</span></label>

<select name="duree" id="duree" class="formulaire" onChange="verification_choix(this[this.selectedIndex].value)">
<option value="" style="display:none">Minutes</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>
<option value="60">60</option>
</select>
<br /><span id="star_mess" style="font-size:12px;"></span>
<br />
<label for="lieu">Lieu : <span style="color:red">*</span></label>
<select name="lieu" id="lieu" class="formulaire" style="height:25px;">
<option value="">Choisissez une matière</option>
</select>
<br />
<br />
<label>Liste des présences : <span style="color:red">*</span></label>
<table border="0" cellspacing="0" cellpadding="0" style="margin-left:55px">
<tr>
<td style="vertical-align:top">
<div id="tab2">
<input type="text" id="present1" name="present1" class="formulaire court" placeholder="Pseudo" />
<select name="etoile1" id="etoile1" class="formulaire court">
<option>Choisissez une durée</option></select>
</div>
</td>
<td style="vertical-align:bottom;width:60px">
<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>

Phyliono
*****

Messages : 921
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 22 Fév 2016 - 2:34

Boulette de ma part ...

Modifiez encore une fois la partie concernée :
Code:
   
    var h_debut = Number(form.h_debut.value);
    var m_debut = Number(form.m_debut.value);
    var m_fin = Number(form.duree.value);
    var h_fin;
    if ((m_debut + m_fin) >= 60)
    {
    m_fin = (m_debut + m_fin) - 60;
    h_fin = h_debut + 1;
    }
    else
    {
    m_fin = m_debut + m_fin;
    h_fin = h_debut;
    }
if(h_debut = 0)
{h_debut = "00";}
if(m_debut = 0)
{m_debut = "00";}
if(m_fin = 0)
{m_fin = "00";}
if(h_fin = 0)
{h_fin = "00";}
else if(h_fin = 24)
{h_fin = "00";}

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 22 Fév 2016 - 2:40

Il y a un problème à l'envoi, j'ai mis début à 12h00 et durée 50 minutes, voilà le résultat :


Phyliono
*****

Messages : 921
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 22 Fév 2016 - 2:53

Décidément , c'est l'heure de se coucher ...

Nouvelle correction (la bonne , cette fois) :

Code:
var h_debut = Number(form.h_debut.value);
var m_debut = Number(form.m_debut.value);
var m_fin = Number(form.duree.value);
var h_fin = h_debut;
if ((m_debut + m_fin) >= 60)
{
m_fin = (m_debut + m_fin) - 60;
h_fin = h_debut + 1;
}
else
{
m_fin = m_debut + m_fin;
h_fin = h_debut;
}
if(h_debut === 0)
{h_debut = "00";}
if(m_debut === 0)
{m_debut = "00";}
if(m_fin === 0)
{m_fin = "00";}
if(h_fin === 0)
{h_fin = "00";}
else if(h_fin === 24)
{h_fin = "00";}

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 22 Fév 2016 - 3:37

Parfait ! Merci beaucoup, j'adore.

Pour le formulaire ci-dessous, je n'arrive déjà pas à faire fonctionner le champ Objet à côté du pseudo... Ensuite, on peut retirer la liste des présences. Ou même la faire disparaître ET du formulaire ET du message s'il s'agit d'une activité dite "Aide" (ce n'est qu'un détail). Enfin, comme pour le formulaire précédent, j'aimerais la même chose mais dans ce style :

Dans les services de 10 ou 20 minutes : les étudiants gagnent seulement 1 étoile Étoile de présence.
Dans les services de 30 ou 40 minutes : les étudiants gagnent 1 étoile de présence et le guide peut faire gagner 1 étoile supplémentaire à 3 étudiants (à indiquer dans la liste des présents).
Dans les services de 50 ou 60 minutes : les étudiants gagnent 1 étoile de présence et le guide peut faire gagner entre 1 et 2 étoiles supplémentaires à 6 étudiants (à indiquer dans la liste des présents).

Je viens de penser à quelque chose, toujours par rapport à la durée, rajouter ce que gagne le guide.
Je voudrais rajouter un autre cadre sous le cadre bleu (une autre table) où seront indiquées les récompenses du professeur selon la règle suivante :
- Guide débutant : 1 étoile + 1 soleil / 10 minutes
- Guide titulaire : 2 étoiles + 1 soleil / 10 minutes
- Guide certifié : 3 étoiles + 1 soleil / 10 minutes

Ce qui donnerait le cadre ci-dessous :


Code BBCODE de ce cadre (pour une durée de 60 minutes) :
Code:
[table class="jaune" align="center" width="70%"][tr][td][size=13]:av: Récompenses :
Débutant : 6 :e: - 6 :s:
Titularisé : 12 :e: - 6 :s:
Certifié : 18 :e: - 6 :s:[/size][/td][/tr][/table]

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

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

monTableau[0] = ["Aide"];
monTableau[0][1] = [
[" "," "],
];
 
monTableau[1] = ["Ouverture de l'infirmerie"];
monTableau[1][1] = [
["Carte vitale"," "],
];
 
monTableau[2] = ["Ouverture de la bibliothèque"];
monTableau[2][1] = [
["Carte de bibliothèque"," "],
];
 
monTableau[3] = ["Ouverture de la cafétéria"];
monTableau[3][1] = [
["Carte de cantine"," "],
];
 
monTableau[4] = ["Ouverture de la permanence"];
monTableau[4][1] = [
["Carte étudiante"," "],
];
 
/* changement d'options */
function jeu_onchange(strChoix)
{
document.post.lieu.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][0],monTableau[x][1][y][0]+monTableau[x][1][y][1],true,true):
        new Option(monTableau[x][1][y][0],monTableau[x][1][y][0]+monTableau[x][1][y][1],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 une activité !");
      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 une activité');
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 cartes :\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="928" />
<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 guides</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 lors de vos ouvertures.<br />
Indiquez également ceux qui ont pris une carte dans la liste des présences.</div><br />
 
<label for="activite">Activité : <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="Aide">Aide</option>
<option value="Ouverture de l'infirmerie">Ouverture de l'infirmerie</option>
<option value="Ouverture de la bibliothèque">Ouverture de la bibliothèque</option>
<option value="Ouverture de la cafétéria">Ouverture de la cafétéria</option>
<option value="Ouverture de la permanence">Ouverture de la permanence</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 février">01 février</option>
<option value="02 février">02 février</option>
<option value="03 février">03 février</option>
<option value="04 février">04 février</option>
<option value="05 février">05 février</option>
<option value="06 février">06 février</option>
<option value="07 février">07 février</option>
<option value="08 février">08 février</option>
<option value="09 février">09 février</option>
<option value="10 février">10 février</option>
<option value="11 février">11 février</option>
<option value="12 février">12 février</option>
<option value="13 février">13 février</option>
<option value="14 février">14 février</option>
<option value="15 février">15 février</option>
<option value="16 février">16 février</option>
<option value="17 février">17 février</option>
<option value="18 février">18 février</option>
<option value="19 février">19 février</option>
<option value="20 février">20 février</option>
<option value="21 février">21 février</option>
<option value="22 février">22 février</option>
<option value="23 février">23 février</option>
<option value="24 février">24 février</option>
<option value="25 février">25 février</option>
<option value="26 février">26 février</option>
<option value="27 février">27 février</option>
<option value="28 février">28 février</option>
<option value="29 février">29 février</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 for="lieu"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Lieu :</strong> <font color="red">*</font></span></label>
<select name="lieu" id="lieu" class="formulaire" style="height:25px;">
<option value=" "> </option>
<option value="Accueil">Accueil</option>
<option value="Bibliothèque">Bibliothèque</option>
<option value="Cafétéria">Cafétéria</option>
<option value="Infirmerie">Infirmerie</option>
<option value="Permanence">Permanence</option>
<option value="Hall principal">Hall principal</option>
<option value="Hall des services">Hall des services</option>
<option value="Hall de la rationalité">Hall de la rationalité</option>
<option value="Hall de la culture">Hall de la culture</option>
<option value="Hall de la créativité">Hall de la créativité</option>
<option value="Hall de la technique">Hall de la technique</option>
</select>
<br />
<br />
<label>Liste des cartes :</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 une activité</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>

Merci beaucoup !! Reposez-vous pour ce soir, vous m'avez déjà beaucoup aidé.

Phyliono
*****

Messages : 921
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 22 Fév 2016 - 19:46

Pour l'aide , il y a un smiley ? ... comme pour l'ouverture (si j'ai bien compris) :ov: = ...

il y en a aussi un pour une carte ?

pour le reste , c'est faisable .

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 22 Fév 2016 - 19:51

Alors, pour les cartes : http://r35.imgfast.net/users/3513/13/24/26/smiles/3300365515.png (devant Liste des présences :ps:)

Pour l'aide (:hl:) c'est ceci : http://r35.imgfast.net/users/3513/13/24/26/smiles/3066606405.png

Merci beaucoup de votre aide très généreuse.

Phyliono
*****

Messages : 921
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 22 Fév 2016 - 19:53

Ok ! la suite , demain ... là , je pars au taf .

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 22 Fév 2016 - 20:00

Pas de soucis ! Bon courage.

Phyliono
*****

Messages : 921
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 Mar 23 Fév 2016 - 19:42

Dernière question : le 2e tableau sera sous le premier dans les 2 cas de figures ?
en mode "aide" comme en mode "guide" ?

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 23 Fév 2016 - 19:42

Dans les deux cas oui, que ce soit une ouverture ou une aide, il s'affiche dessous.

Phyliono
*****

Messages : 921
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 Mar 23 Fév 2016 - 19:45

Il me reste des tests d'envoi à faire ... la suite , demain , après le taf ... Hi

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 23 Fév 2016 - 19:48

Ok merci !

Phyliono
*****

Messages : 921
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 24 Fév 2016 - 4:05

voilà ...

Donc , suivant l'activité - aide ou ouverture - il y aura des zones du formulaire masquées .

La durée permet aussi le calcul des récompenses pour les guides .

Faites des tests ...

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;
}
.separe{
border-top:1px solid #ffffff;
}
.court{
width:195px!important;
}
#form_presence .tiers{
width:125px!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">

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

monTableau[0] = ["Aide"];
monTableau[0][1] = [
[" "," "],
];

monTableau[1] = ["Ouverture de l'infirmerie"];
monTableau[1][1] = [
["Pas de carte",""],
["Carte vitale"," - Carte vitale"],
];

monTableau[2] = ["Ouverture de la bibliothèque"];
monTableau[2][1] = [
["Pas de carte",""],
["Carte de bibliothèque"," - Carte de bibliothèque"],
];

monTableau[3] = ["Ouverture de la cafétéria"];
monTableau[3][1] = [
["Pas de carte",""],
["Carte de cantine"," - Carte de cantine"],
];

monTableau[4] = ["Ouverture de la permanence"];
monTableau[4][1] = [
["Pas de carte",""],
["Carte étudiante"," - Carte étudiante"],
];

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

mesStars[0] = ["10"];
mesStars[0][1] = [
["Pas de bonus","0"]
];

mesStars[1] = ["20"];
mesStars[1][1] = [
["Pas de bonus","0"]
];

mesStars[2] = ["30"];
mesStars[2][1] = [
["Pas de bonus","0"],
["1 *","1"]
];

mesStars[3] = ["40"];
mesStars[3][1] = [
["Pas de bonus","0"],
["1 *","1"]
];

mesStars[4] = ["50"];
mesStars[4][1] = [
["Pas de bonus","0"],
["1 *","1"],
["2 *","2"]
];

mesStars[5] = ["60"];
mesStars[5][1] = [
["Pas de bonus","0"],
["1 *","1"],
["2 *","2"]
];


/* changement d'options */
function jeu_onchange(strChoix)
{if(post.activite.selectedIndex === 1)
{
document.getElementById("listeCarte").style.display = "none";
document.getElementById("present1").value="";
document.getElementById("star_mess").style.display = "none";
}
else{
document.getElementById("listeCarte").style.display = "block";
document.post.objet1.options.length = 0;
document.getElementById("star_mess").style.display = "inline";

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][0],monTableau[x][1][y][1],true,true):
new Option(monTableau[x][1][y][0],monTableau[x][1][y][1],false,false);
document.post.objet1.options[y] = opt;
}
}
}}
}

/* message étoiles et options étoiles */

function verification_choix(starChoix) {
if(post.duree.selectedIndex === 1||post.duree.selectedIndex === 2)
{

document.getElementById("star_mess").innerHTML = "Bonus pour tous les élèves présents : 1 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' />.";
}
else if(post.duree.selectedIndex === 3||post.duree.selectedIndex === 4)
{
document.getElementById("star_mess").innerHTML = "Bonus pour tous les élèves présents : 1 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' />.<br />Option d'un bonus supplémentaire pour 3 élèves : 1 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' />";
}
else if(post.duree.selectedIndex === 5||post.duree.selectedIndex === 6)
{
document.getElementById("star_mess").innerHTML = "Bonus pour tous les élèves présents : 1 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' alt='étoile' />.<br />Option d'un bonus supplémentaire pour 6 élèves : 1 ou 2 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' /> ";
}
else
{
document.getElementById("star_mess").innerHTML = "";
}

document.post.etoile1.options.length = 0;
for(var x=0;x<mesStars.length;x++)
{
if (mesStars[x][0] == starChoix)
{
for(var y=0;y<mesStars[x][1].length;y++)
{
opt1 = y===0?
new Option(mesStars[x][1][y][0],mesStars[x][1][y][1],true,true):
new Option(mesStars[x][1][y][0],mesStars[x][1][y][1],false,false);
document.post.etoile1.options[y] = opt1;
}
}
}
}


var nb_lignes=2;
// script du bouton ajout et suppression
function add_achat(strChoix)
{
if(document.getElementById("activite").value==="")
{
alert("Choisissez une activité !");
return false;
}
else if(document.getElementById("duree").value==="")
{
alert("Choisissez une duree !");
return false;
}
else
{
var tab1 = document.getElementById('tab1');

var div1 = document.createElement('div');
div1.id = 'div1'+nb_lignes;
div1.className = 'separe';
var input1 = document.createElement('input');
input1.id = 'present'+nb_lignes;
input1.name = 'present'+nb_lignes;
input1.type = 'text';
input1.placeholder = 'Pseudo';
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';
var espace2 = document.createTextNode(" ");
var select2 = document.createElement('select');
select2.id = 'etoile'+nb_lignes;
select2.name = 'etoile'+nb_lignes;
select2.className = 'formulaire court';

tab1.appendChild(div1);
div1.appendChild(input1);
div1.appendChild(espace);
div1.appendChild(select1);
div1.appendChild(espace2);
div1.appendChild(select2);
document.getElementById("button_del").style.display = "inline";
$( "#objet1 Option" ).clone().appendTo( "#objet"+nb_lignes );
$( "#etoile1 Option" ).clone().appendTo( "#etoile"+nb_lignes );
$("#activite").attr('disabled', 'disabled');
$("#duree").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');
$("#duree").removeAttr('disabled');
document.getElementById("button_del").style.display = "none";}
}

function envoiMessage(form)
{if(form.activite.value=='')
{
alert('Vous devez indiquer une activité');
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.duree.value=='')
{
alert('Vous devez indiquer une durée valide');
return false;
}
else if(form.lieu.value=='')
{
alert('Vous devez indiquer un lieu');
return false;
}
else
{
/* Créer un message suivant le choix de l\'activité */

var h_debut = Number(form.h_debut.value);
var m_debut = Number(form.m_debut.value);
var m_fin = Number(form.duree.value);
var h_fin = h_debut;
if ((m_debut + m_fin) >= 60)
{
m_fin = (m_debut + m_fin) - 60;
h_fin = h_debut + 1;
}
else
{
m_fin = m_debut + m_fin;
h_fin = h_debut;
}
if(h_debut === 0)
{h_debut = "00";}
if(m_debut === 0)
{m_debut = "00";}
if(m_fin === 0)
{m_fin = "00";}
if(h_fin === 0)
{h_fin = "00";}
else if(h_fin === 24)
{h_fin = "00";}
var txt_message = "";

/* si AIDE est choisi */

if(post.activite.selectedIndex === 1)
{
txt_message = "[table class='bleu' width='70%' align='center']"
+ "[tr][td][size=13]:hl: " + form.activite.value + '\n'
+ ":dt: " + form.date.value + '\n'
+ ":hr: " + h_debut + "h" + m_debut + " à " + h_fin + "h" + m_fin + '\n'
+ ":lu: " + form.lieu.value + '\n'
+ "[/size][/td][/tr][/table]\n";
}
else

/* si AIDE n'est pas choisi */

{
txt_message = "[table class='t_planning' width='70%' align='center']"
+ "[tr][td][size=13]:cr: " + form.activite.value + '\n'
+ ":dt: " + form.date.value + '\n'
+ ":hr: " + h_debut + "h" + m_debut + " à " + h_fin + "h" + m_fin + '\n'
+ ":lu: " + form.lieu.value + '\n'
+ ":ps: Liste des présences :" + '\n';
for (var nb = 1; nb < nb_lignes; nb++)
{
var present = document.getElementById('present'+nb).value;
var carte = document.getElementById('objet'+nb).value;
var etoiles = Number(document.getElementById('etoile'+nb).value);
etoiles = etoiles + 1 ;
txt_message += (present ? present + carte + " - " + etoiles + " :e: \n" : "\n");
}
txt_message += "[/size][/td][/tr][/table]" + '\n';
}

var star=1;
var sun=1;
var time = Number(form.duree.value);
{
star = star * time / 10 ;
sun = sun * time /10 ;
}

txt_message += "[table class='jaune' align='center' width='70%']"
+ "[tr][td][size=13]:av: Récompenses :\n"
+ "Débutant : "+star+" :e: - "+sun+" :s: \n"
+ "Titularisé : "+(star*2)+" :e: - "+sun+" :s: \n"
+ "Certifié : "+(star*3)+" :e: - "+sun+" :s: \n[/size][/td][/tr][/table]";

// 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="928" />

<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des guides</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 lors de vos ouvertures.<br />
Indiquez également ceux qui ont pris une carte dans la liste des présences.</div><br />

<label for="activite">Activité : <span style="color:red">*</span></label>
<select name="activite" id="activite" class="formulaire" onchange="jeu_onchange(this[this.selectedIndex].value)">
<option value="" style="display:none"></option>
<option value="Aide">Aide</option>
<option value="Ouverture de l'infirmerie">Ouverture de l'infirmerie</option>
<option value="Ouverture de la bibliothèque">Ouverture de la bibliothèque</option>
<option value="Ouverture de la cafétéria">Ouverture de la cafétéria</option>
<option value="Ouverture de la permanence">Ouverture de la permanence</option>
</select>
<br />
<br />
<label for="date">Date : <span style="color:red">*</span></label>
<select name="date" id="date" class="formulaire">
<option value="" style="display:none">Date</option>
<option value="01 février">01 février</option>
<option value="02 février">02 février</option>
<option value="03 février">03 février</option>
<option value="04 février">04 février</option>
<option value="05 février">05 février</option>
<option value="06 février">06 février</option>
<option value="07 février">07 février</option>
<option value="08 février">08 février</option>
<option value="09 février">09 février</option>
<option value="10 février">10 février</option>
<option value="11 février">11 février</option>
<option value="12 février">12 février</option>
<option value="13 février">13 février</option>
<option value="14 février">14 février</option>
<option value="15 février">15 février</option>
<option value="16 février">16 février</option>
<option value="17 février">17 février</option>
<option value="18 février">18 février</option>
<option value="19 février">19 février</option>
<option value="20 février">20 février</option>
<option value="21 février">21 février</option>
<option value="22 février">22 février</option>
<option value="23 février">23 février</option>
<option value="24 février">24 février</option>
<option value="25 février">25 février</option>
<option value="26 février">26 février</option>
<option value="27 février">27 février</option>
<option value="28 février">28 février</option>
<option value="29 février">29 février</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="" style="display:none">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 court">
<option value="" style="display:none">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="duree">Durée : <span style="color:red">*</span></label>

<select name="duree" id="duree" class="formulaire" onChange="verification_choix(this[this.selectedIndex].value)">
<option value="" style="display:none">Minutes</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>
<option value="60">60</option>
</select>
<br /><span id="star_mess" style="font-size:12px;"></span>
<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>
<select name="lieu" id="lieu" class="formulaire" style="height:25px;">
<option value=""></option>
<option value="Accueil">Accueil</option>
<option value="Bibliothèque">Bibliothèque</option>
<option value="Cafétéria">Cafétéria</option>
<option value="Infirmerie">Infirmerie</option>
<option value="Permanence">Permanence</option>
<option value="Hall principal">Hall principal</option>
<option value="Hall des services">Hall des services</option>
<option value="Hall de la rationalité">Hall de la rationalité</option>
<option value="Hall de la culture">Hall de la culture</option>
<option value="Hall de la créativité">Hall de la créativité</option>
<option value="Hall de la technique">Hall de la technique</option>
</select>
<br />
<br />
<div id="listeCarte">
<label>Liste des étudiants présents - achat de carte - option de bonus :</label>
<table border="0" cellspacing="0" cellpadding="0" style="margin-left:-2px">
<tr>
<td id="tab1" style="vertical-align:top;text-align:right;width:410px;">
<input type="text" id="present1" name="present1" placeholder="Pseudo" class="formulaire court" />
<select name="objet1" id="objet1" style="margin-top:-1px" class="formulaire court"><option>Choisissez une activité</option></select>
<select name="etoile1" id="etoile1" class="formulaire court">
<option>choisissez une durée</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>
</div>
<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>

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 24 Fév 2016 - 13:50

J'aime beaucoup ! J'avais juste oublié, est-il possible de faire en sorte que si c'est Aide qui est choisi, il y a le champ Lieu qui s'affiche avec cette liste :
Code:
<option value="Accueil">Accueil</option>
<option value="Hall principal">Hall principal</option>
<option value="Hall des services">Hall des services</option>
<option value="Hall de la rationalité">Hall de la rationalité</option>
<option value="Hall de la culture">Hall de la culture</option>
<option value="Hall de la créativité">Hall de la créativité</option>
<option value="Hall de la technique">Hall de la technique</option>

Et si c'est autre chose, le lieu se met automatiquement?
Pour l'ouverture de la bibliothèque : Bibliothèque (hall des services)
Pour l'ouverture de la cafétéria : Cafétéria (hall des services)
Pour l'ouverture de l'infirmerie : Infirmerie (hall des services)
Pour l'ouverture de la permanence : Permanence (hall des services)

Et si possible pour les champs de la liste des étudiants, que tout soit sur la même ligne (les 3 champs) donc sans la ligne blanche entre les deux. Réduire la largeur du champ Bonus, etc... ?

Merci beaucoup ! C'est super.

Il y a-t-il possibilité de rajouter ce cadre jaune "Récompenses :" pour le formulaire d'avant sur les Présences des professeurs ?
Selon ces critères :
- Professeur débutant : 3 étoiles + 1 soleil / 10 minutes
- Professeur titulaire : 6 étoiles + 1 soleil / 10 minutes
- Professeur certifié : 9 étoiles + 1 soleil / 10 minutes

Merci infiniment.

Phyliono
*****

Messages : 921
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 24 Fév 2016 - 22:45

@Phyliono a écrit:
Il y a-t-il possibilité de rajouter ce cadre jaune "Récompenses :" pour le formulaire d'avant sur les Présences des professeurs ?
Selon ces critères :
- Professeur débutant : 3 étoiles + 1 soleil / 10 minutes
- Professeur titulaire : 6 étoiles + 1 soleil / 10 minutes
- Professeur certifié : 9 étoiles + 1 soleil / 10 minutes

Merci infiniment.

Pour le formulaire précédent , repérez cette ligne :
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;

et placez ce bout de code au-dessus de cette ligne :
Code:

var star=1;
var sun=1;
var time = Number(form.duree.value);
{
star = star * time / 10 ;
sun = sun * time /10 ;
}

txt_message += "[table class='jaune' align='center' width='70%']"
+ "[tr][td][size=13]:av: Récompenses :\n"
+ "Débutant : "+(star*3)+" :e: - "+sun+" :s: \n"
+ "Titularisé : "+(star*6)+" :e: - "+sun+" :s: \n"
+ "Certifié : "+(star*9)+" :e: - "+sun+" :s: \n[/size][/td][/tr][/table]";

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 24 Fév 2016 - 23:09

D'accord merci beaucoup. Pour le formulaire sur les guides, savez-vous comment faire ?

Merci !!

Phyliono
*****

Messages : 921
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 Jeu 25 Fév 2016 - 0:31

Comme ça ?

Code:
<style>
#form_presence label{
font:bold 11px ubuntu, verdana;
display:block;text-align:center;;
}
#form_presence select,#form_presence input[type=text]{
height:25px!important;margin:5px 6px 5px 0;padding:0 5px;
}
.court{
width:195px!important;
}
#form_presence .tiers{
width:150px!important;
}
#form_presence .quart{
width:130px!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">

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

monTableau[0] = ["Aide"];
monTableau[0][1] = [
["",""]
];
monTableau[0][2] = [
["Accueil","Accueil"],
["Hall principal","Hall principal"],
["Hall des services","Hall des services"],
["Hall de la rationalité","Hall de la rationalité"],
["Hall de la culture","Hall de la culture"],
["Hall de la créativité","Hall de la créativité"],
["Hall de la technique","Hall de la technique"]
];

monTableau[1] = ["Ouverture de l'infirmerie"];
monTableau[1][1] = [
["Pas de carte",""],
["Carte vitale"," - Carte vitale"]
];
monTableau[1][2] = [
["Infirmerie","Infirmerie (hall des services)"]
];

monTableau[2] = ["Ouverture de la bibliothèque"];
monTableau[2][1] = [
["Pas de carte",""],
["Carte de bibliothèque"," - Carte de bibliothèque"]
];
monTableau[2][2] = [
["Bibliothèque","Bibliothèque (hall des services)"]
];

monTableau[3] = ["Ouverture de la cafétéria"];
monTableau[3][1] = [
["Pas de carte",""],
["Carte de cantine"," - Carte de cantine"]
];
monTableau[3][2] = [
["Cafétéria","Cafétéria (hall des services)"]
];

monTableau[4] = ["Ouverture de la permanence"];
monTableau[4][1] = [
["Pas de carte",""],
["Carte étudiante"," - Carte étudiante"]
];
monTableau[4][2] = [
["Permanence","Permanence (hall des services)"]
];

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

mesStars[0] = ["10"];
mesStars[0][1] = [
["Pas de bonus","0"]
];

mesStars[1] = ["20"];
mesStars[1][1] = [
["Pas de bonus","0"]
];

mesStars[2] = ["30"];
mesStars[2][1] = [
["Pas de bonus","0"],
["1 *","1"]
];

mesStars[3] = ["40"];
mesStars[3][1] = [
["Pas de bonus","0"],
["1 *","1"]
];

mesStars[4] = ["50"];
mesStars[4][1] = [
["Pas de bonus","0"],
["1 *","1"],
["2 *","2"]
];

mesStars[5] = ["60"];
mesStars[5][1] = [
["Pas de bonus","0"],
["1 *","1"],
["2 *","2"]
];


/* changement d'options */
function jeu_onchange(strChoix)
{if(post.activite.selectedIndex === 1)
{
document.getElementById("listeCarte").style.display = "none";
document.getElementById("listeLieu").style.display = "block";
document.getElementById("present1").value="";
document.getElementById("star_mess").style.display = "none";
document.post.lieu.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][0],monTableau[x][1][y][1],true,true):
new Option(monTableau[x][1][y][0],monTableau[x][1][y][1],false,false);
document.post.objet1.options[y] = opt;
}
for(var z=0;z<monTableau[x][2].length;z++)
{
opt1 = z==0?
new Option(monTableau[x][2][z][0],monTableau[x][2][z][1],true,true):
new Option(monTableau[x][2][z][0],monTableau[x][2][z][1],false,false);
document.post.lieu.options[z] = opt1;
}
}
}
}
else{
document.getElementById("listeCarte").style.display = "block";
document.getElementById("listeLieu").style.display = "none";
document.post.objet1.options.length = 0;
document.post.lieu.options.length = 0;
document.getElementById("star_mess").style.display = "inline";

for( x=0;x<monTableau.length;x++)
{
if (monTableau[x][0] == strChoix)
{
for( y=0;y<monTableau[x][1].length;y++)
{
opt = y===0?
new Option(monTableau[x][1][y][0],monTableau[x][1][y][1],true,true):
new Option(monTableau[x][1][y][0],monTableau[x][1][y][1],false,false);
document.post.objet1.options[y] = opt;
}
for(var z=0;z<monTableau[x][2].length;z++)
{
opt1 = z==0?
new Option(monTableau[x][2][z][0],monTableau[x][2][z][1],true,true):
new Option(monTableau[x][2][z][0],monTableau[x][2][z][1],false,false);
document.post.lieu.options[z] = opt1;
}
}
}}
}

/* message étoiles et options étoiles */

function verification_choix(starChoix) {
if(post.duree.selectedIndex === 1||post.duree.selectedIndex === 2)
{

document.getElementById("star_mess").innerHTML = "Bonus pour tous les élèves présents : 1 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' />.";
}
else if(post.duree.selectedIndex === 3||post.duree.selectedIndex === 4)
{
document.getElementById("star_mess").innerHTML = "Bonus pour tous les élèves présents : 1 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' />.<br />Option d'un bonus supplémentaire pour 3 élèves : 1 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' />";
}
else if(post.duree.selectedIndex === 5||post.duree.selectedIndex === 6)
{
document.getElementById("star_mess").innerHTML = "Bonus pour tous les élèves présents : 1 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' alt='étoile' />.<br />Option d'un bonus supplémentaire pour 6 élèves : 1 ou 2 <img src='http://i56.servimg.com/u/f56/18/72/44/21/atoile11.png' /> ";
}
else
{
document.getElementById("star_mess").innerHTML = "";
}

document.post.etoile1.options.length = 0;
for(var x=0;x<mesStars.length;x++)
{
if (mesStars[x][0] == starChoix)
{
for(var y=0;y<mesStars[x][1].length;y++)
{
opt1 = y===0?
new Option(mesStars[x][1][y][0],mesStars[x][1][y][1],true,true):
new Option(mesStars[x][1][y][0],mesStars[x][1][y][1],false,false);
document.post.etoile1.options[y] = opt1;
}
}
}
}


var nb_lignes=2;
// script du bouton ajout et suppression
function add_achat(strChoix)
{
if(document.getElementById("activite").value==="")
{
alert("Choisissez une activité !");
return false;
}
else if(document.getElementById("duree").value==="")
{
alert("Choisissez une duree !");
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 = 'present'+nb_lignes;
input1.name = 'present'+nb_lignes;
input1.type = 'text';
input1.placeholder = 'Pseudo';
input1.className = 'formulaire quart';
var espace = document.createTextNode(" ");
var select1 = document.createElement('select');
select1.id = 'objet'+nb_lignes;
select1.name = 'objet'+nb_lignes;
select1.className = 'formulaire tiers';
var espace2 = document.createTextNode(" ");
var select2 = document.createElement('select');
select2.id = 'etoile'+nb_lignes;
select2.name = 'etoile'+nb_lignes;
select2.className = 'formulaire quart';

tab1.appendChild(div1);
div1.appendChild(input1);
div1.appendChild(espace);
div1.appendChild(select1);
div1.appendChild(espace2);
div1.appendChild(select2);
document.getElementById("button_del").style.display = "inline";
$( "#objet1 Option" ).clone().appendTo( "#objet"+nb_lignes );
$( "#etoile1 Option" ).clone().appendTo( "#etoile"+nb_lignes );
$("#activite").attr('disabled', 'disabled');
$("#duree").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');
$("#duree").removeAttr('disabled');
document.getElementById("button_del").style.display = "none";}
}

function envoiMessage(form)
{if(form.activite.value=='')
{
alert('Vous devez indiquer une activité');
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.duree.value=='')
{
alert('Vous devez indiquer une durée valide');
return false;
}
else if(form.lieu.value=='')
{
alert('Vous devez indiquer un lieu');
return false;
}
else
{
/* Créer un message suivant le choix de l\'activité */

var h_debut = Number(form.h_debut.value);
var m_debut = Number(form.m_debut.value);
var m_fin = Number(form.duree.value);
var h_fin = h_debut;
if ((m_debut + m_fin) >= 60)
{
m_fin = (m_debut + m_fin) - 60;
h_fin = h_debut + 1;
}
else
{
m_fin = m_debut + m_fin;
h_fin = h_debut;
}
if(h_debut === 0)
{h_debut = "00";}
if(m_debut === 0)
{m_debut = "00";}
if(m_fin === 0)
{m_fin = "00";}
if(h_fin === 0)
{h_fin = "00";}
else if(h_fin === 24)
{h_fin = "00";}
var txt_message = "";

/* si AIDE est choisi */

if(post.activite.selectedIndex === 1)
{
txt_message = "[table class='bleu' width='70%' align='center']"
+ "[tr][td][size=13]:hl: " + form.activite.value + '\n'
+ ":dt: " + form.date.value + '\n'
+ ":hr: " + h_debut + "h" + m_debut + " à " + h_fin + "h" + m_fin + '\n'
+ ":lu: " + form.lieu.value + '\n'
+ "[/size][/td][/tr][/table]\n";
}
else

/* si AIDE n'est pas choisi */

{
txt_message = "[table class='t_planning' width='70%' align='center']"
+ "[tr][td][size=13]:cr: " + form.activite.value + '\n'
+ ":dt: " + form.date.value + '\n'
+ ":hr: " + h_debut + "h" + m_debut + " à " + h_fin + "h" + m_fin + '\n'
+ ":lu: " + form.lieu.value + '\n'
+ ":ps: Liste des présences :" + '\n';
for (var nb = 1; nb < nb_lignes; nb++)
{
var present = document.getElementById('present'+nb).value;
var carte = document.getElementById('objet'+nb).value;
var etoiles = Number(document.getElementById('etoile'+nb).value);
etoiles = etoiles + 1 ;
txt_message += (present ? present + carte + " - " + etoiles + " :e: \n" : "\n");
}
txt_message += "[/size][/td][/tr][/table]" + '\n';
}

var star=1;
var sun=1;
var time = Number(form.duree.value);
{
star = star * time / 10 ;
sun = sun * time /10 ;
}

txt_message += "[table class='jaune' align='center' width='70%']"
+ "[tr][td][size=13]:av: Récompenses :\n"
+ "Débutant : "+star+" :e: - "+sun+" :s: \n"
+ "Titularisé : "+(star*2)+" :e: - "+sun+" :s: \n"
+ "Certifié : "+(star*3)+" :e: - "+sun+" :s: \n[/size][/td][/tr][/table]";

// 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="928" />

<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des guides</h2>
</th>
</tr>
<tr>
<td height="6">
</td>
</tr>
<tr>
<td class="row1"><br /><div style="margin:auto;text-align:center;">
<div style="font-size:12px;">N'oubliez pas de noter les étudiants présents lors de vos ouvertures.<br />
Indiquez également ceux qui ont pris une carte dans la liste des présences.</div><br />

<label for="activite">Activité : <span style="color:red">*</span></label>
<select name="activite" id="activite" class="formulaire" onchange="jeu_onchange(this[this.selectedIndex].value)">
<option value="" style="display:none"></option>
<option value="Aide">Aide</option>
<option value="Ouverture de l'infirmerie">Ouverture de l'infirmerie</option>
<option value="Ouverture de la bibliothèque">Ouverture de la bibliothèque</option>
<option value="Ouverture de la cafétéria">Ouverture de la cafétéria</option>
<option value="Ouverture de la permanence">Ouverture de la permanence</option>
</select>
<br />
<br />
<label for="date">Date : <span style="color:red">*</span></label>
<select name="date" id="date" class="formulaire">
<option value="" style="display:none">Date</option>
<option value="01 février">01 février</option>
<option value="02 février">02 février</option>
<option value="03 février">03 février</option>
<option value="04 février">04 février</option>
<option value="05 février">05 février</option>
<option value="06 février">06 février</option>
<option value="07 février">07 février</option>
<option value="08 février">08 février</option>
<option value="09 février">09 février</option>
<option value="10 février">10 février</option>
<option value="11 février">11 février</option>
<option value="12 février">12 février</option>
<option value="13 février">13 février</option>
<option value="14 février">14 février</option>
<option value="15 février">15 février</option>
<option value="16 février">16 février</option>
<option value="17 février">17 février</option>
<option value="18 février">18 février</option>
<option value="19 février">19 février</option>
<option value="20 février">20 février</option>
<option value="21 février">21 février</option>
<option value="22 février">22 février</option>
<option value="23 février">23 février</option>
<option value="24 février">24 février</option>
<option value="25 février">25 février</option>
<option value="26 février">26 février</option>
<option value="27 février">27 février</option>
<option value="28 février">28 février</option>
<option value="29 février">29 février</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="" style="display:none">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 court">
<option value="" style="display:none">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="duree">Durée : <span style="color:red">*</span></label>

<select name="duree" id="duree" class="formulaire" onChange="verification_choix(this[this.selectedIndex].value)">
<option value="" style="display:none">Minutes</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>
<option value="60">60</option>
</select>
<br /><span id="star_mess" style="font-size:12px;"></span>
<br />
<div id="listeLieu">
<label for="lieu"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Lieu :</strong> <font color="red">*</font></span></label>
<select name="lieu" id="lieu" class="formulaire" style="height:25px;">
<option value="">Choisissez une activité</option>
  </select>
<br />
<br /></div>
<div id="listeCarte">
<label>Liste des étudiants présents - achat de carte - option de bonus :</label>
<table border="0" cellspacing="0" cellpadding="0" style="margin:auto;width:560px;">
<tr>
<td id="tab1" style="vertical-align:top;text-align:right;">
<input type="text" id="present1" name="present1" placeholder="Pseudo" class="formulaire quart" />
<select name="objet1" id="objet1" style="margin-top:-1px" class="formulaire tiers"><option>Choisir une activité</option></select>
<select name="etoile1" id="etoile1" class="formulaire quart">
<option>choisir une durée</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>
</div>
<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>

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 Jeu 25 Fév 2016 - 1:22

Parfait merci !

J'ai d'autres formulaires qui sont juste à adapter en fonction de ce que vous avez fait là en fait. Je ne sais pas comment faire pour ajouter les éléments que je vous ai demandé donc je vous les demande petit à petit.

Pour le formulaire ci-dessous, il n'y a pas grand chose à changer. Il faut juste ajouter le cadre jaune Récompenses selon le principe suivant (donc ajouter le champ Durée si j'ai bien compris) :

- Marchand débutant : 1 étoile + 1 soleil / 10 minutes
- Marchand titulaire : 2 étoiles + 1 soleil / 10 minutes
- Marchand certifié : 3 étoiles + 1 soleil / 10 minutes

Il n'y a pas d'étoiles supplémentaires ici.

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 du Photographe"];
monTableau[19][1] = [
"",
"Photo de paysage"];
monTableau[19][2] = ["nord"];

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

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

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

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

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

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

monTableau[26] = ["Ouverture du SonoZik"];
monTableau[26][1] = [
""];
monTableau[26][2] = ["sud"];
 
monTableau[27] = ["Ouverture du Jardiland"];
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 = '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="931" />
<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 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>
<option value="Ouverture du Jardiland">Jardiland</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 février">01 février</option>
<option value="02 février">02 février</option>
<option value="03 février">03 février</option>
<option value="04 février">04 février</option>
<option value="05 février">05 février</option>
<option value="06 février">06 février</option>
<option value="07 février">07 février</option>
<option value="08 février">08 février</option>
<option value="09 février">09 février</option>
<option value="10 février">10 février</option>
<option value="11 février">11 février</option>
<option value="12 février">12 février</option>
<option value="13 février">13 février</option>
<option value="14 février">14 février</option>
<option value="15 février">15 février</option>
<option value="16 février">16 février</option>
<option value="17 février">17 février</option>
<option value="18 février">18 février</option>
<option value="19 février">19 février</option>
<option value="20 février">20 février</option>
<option value="21 février">21 février</option>
<option value="22 février">22 février</option>
<option value="23 février">23 février</option>
<option value="24 février">24 février</option>
<option value="25 février">25 février</option>
<option value="26 février">26 février</option>
<option value="27 février">27 février</option>
<option value="28 février">28 février</option>
<option value="29 février">29 février</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>

On devrait bientôt boucler ce sujet je pense (enfin!)

Merci beaucoup de votre aide généreuse!

Phyliono
*****

Messages : 921
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 Jeu 25 Fév 2016 - 2:35

C'est le principe ...

Première chose , ne mettre que des chiffres pour la liste des heures de début, ce qui permettra le calcul au niveau du script .
Code:
<select name="h_debut" id="h_debut" class="formulaire court">
<option value="" style="display:none">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>
Ensuite , remplacer les 2 listes (heures et minutes de fin)
Code:
<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>
par la liste de durée .
Code:
<label for="duree">Durée : <span style="color:red">*</span></label>
<select name="duree" id="duree" class="formulaire" onChange="verification_choix(this[this.selectedIndex].value)">
<option value="" style="display:none">Minutes</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>
<option value="60">60</option>
</select>
Dans le script :
- remplacer les alertes pour les heures et minutes de fin par l'alerte pour la durée .
Code:

else if(form.duree.value=='')
{
alert('Vous devez indiquer une durée valide');
return false;
}
- Avant de créer le message d'envoi , il faut donc récupérer les différentes valeurs pour les retravailler :
Code:

var h_debut = Number(form.h_debut.value);
var m_debut = Number(form.m_debut.value);
var m_fin = Number(form.duree.value);
var h_fin = h_debut;
if ((m_debut + m_fin) >= 60)
{
m_fin = (m_debut + m_fin) - 60;
h_fin = h_debut + 1;
}
else
{
m_fin = m_debut + m_fin;
h_fin = h_debut;
}
if(h_debut === 0)
{h_debut = "00";}
if(m_debut === 0)
{m_debut = "00";}
if(m_fin === 0)
{m_fin = "00";}
if(h_fin === 0)
{h_fin = "00";}
else if(h_fin === 24)
{h_fin = "00";}
Ensuite modifier la partie de message d'envoi :
Code:
+ ":hr: " + form.h_debut.value + "" + form.m_debut.value + " à " + form.h_fin.value + "" + form.m_fin.value + '\n'
par :
Code:
+ ":hr: " + h_debut + "h" + m_debut + " à " + h_fin + "h" + m_fin + '\n'
Maintenant qu'on a cette liste de durée , on peut mettre la suite du message pour les récompenses des marchands :

Code:

var star=1;
var sun=1;
var time = Number(form.duree.value);
{
star = star * time / 10 ;
sun = sun * time /10 ;
}

txt_message += "[table class='jaune' align='center' width='70%']"
+ "[tr][td][size=13]:av: Récompenses :\n"
+ "Marchand débutant : "+(star*1)+" :e: - "+sun+" :s: \n"
+ "Marchand titulaire : "+(star*2)+" :e: - "+sun+" :s: \n"
+ "Marchand certifié : "+(star*3)+" :e: - "+sun+" :s: \n[/size][/td][/tr][/table]";

le code complet :
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 du Photographe"];
monTableau[19][1] = [
"",
"Photo de paysage"];
monTableau[19][2] = ["nord"];

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

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

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

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

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

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

monTableau[26] = ["Ouverture du SonoZik"];
monTableau[26][1] = [
""];
monTableau[26][2] = ["sud"];
 
monTableau[27] = ["Ouverture du Jardiland"];
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 = '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.duree.value=='')
{
alert('Vous devez indiquer une durée valide');
return false;
}
else if(form.lieu.value=='')
{
alert('Vous devez indiquer un lieu');
return false;
}
else
{
var h_debut = Number(form.h_debut.value);
var m_debut = Number(form.m_debut.value);
var m_fin = Number(form.duree.value);
var h_fin = h_debut;
if ((m_debut + m_fin) >= 60)
{
m_fin = (m_debut + m_fin) - 60;
h_fin = h_debut + 1;
}
else
{
m_fin = m_debut + m_fin;
h_fin = h_debut;
}
if(h_debut === 0)
{h_debut = "00";}
if(m_debut === 0)
{m_debut = "00";}
if(m_fin === 0)
{m_fin = "00";}
if(h_fin === 0)
{h_fin = "00";}
else if(h_fin === 24)
{h_fin = "00";}

// 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: " + h_debut + "h" + m_debut + " à " + h_fin + "h" + m_fin + '\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";

var star=1;
var sun=1;
var time = Number(form.duree.value);
{
star = star * time / 10 ;
sun = sun * time /10 ;
}

txt_message += "[table class='jaune' align='center' width='70%']"
+ "[tr][td][size=13]:av: Récompenses :\n"
+ "Marchand débutant : "+(star*1)+" :e: - "+sun+" :s: \n"
+ "Marchand titulaire : "+(star*2)+" :e: - "+sun+" :s: \n"
+ "Marchand certifié : "+(star*3)+" :e: - "+sun+" :s: \n[/size][/td][/tr][/table]";

// 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="931" />
<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 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>
<option value="Ouverture du Jardiland">Jardiland</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 février">01 février</option>
<option value="02 février">02 février</option>
<option value="03 février">03 février</option>
<option value="04 février">04 février</option>
<option value="05 février">05 février</option>
<option value="06 février">06 février</option>
<option value="07 février">07 février</option>
<option value="08 février">08 février</option>
<option value="09 février">09 février</option>
<option value="10 février">10 février</option>
<option value="11 février">11 février</option>
<option value="12 février">12 février</option>
<option value="13 février">13 février</option>
<option value="14 février">14 février</option>
<option value="15 février">15 février</option>
<option value="16 février">16 février</option>
<option value="17 février">17 février</option>
<option value="18 février">18 février</option>
<option value="19 février">19 février</option>
<option value="20 février">20 février</option>
<option value="21 février">21 février</option>
<option value="22 février">22 février</option>
<option value="23 février">23 février</option>
<option value="24 février">24 février</option>
<option value="25 février">25 février</option>
<option value="26 février">26 février</option>
<option value="27 février">27 février</option>
<option value="28 février">28 février</option>
<option value="29 février">29 février</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="" style="display:none">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 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="duree">Durée : <span style="color:red">*</span></label>
<select name="duree" id="duree" class="formulaire" onChange="verification_choix(this[this.selectedIndex].value)">
<option value="" style="display:none">Minutes</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>
<option value="60">60</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>

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 Jeu 25 Fév 2016 - 2:50

Merci beaucoup pour ces explications. Je vais essayer de faire les 4 autres formulaires qu'il me reste seul demain de sorte à éviter de trop en demander (même si c'est déjà fait...), si je n'y arrive pas, je reviendrai vers vous (et ce sera tout ensuite!)

Juste un détail pour ce formulaire, je n'arrive pas à mettre la barre en bas de la même hauteur que le bouton Envoyer (et d'afficher le texte rouge de la limite 24h en haut de la page en-dessous de 30 tâches maximum :


Code:
<style type="text/css">
#form_minister label{
font:bold 11px ubuntu, verdana;
display:inline-block;
}
#form_minister label span{
color:red;
}
#form_minister span{
font-size:12px;
}
#form_minister .italic{
font:bold italic 10px ubuntu, verdana;
}
#form_minister .court{
height:25px;
width:120px;
margin:2px 5px;
}
#form_minister textarea{
height:50px;
width:400px;
resize:none;
}
#form_minister .forumline td{
text-align:center;padding:10px 0;
font:bold 11px ubuntu, verdana;
}
#button_add,#button_del{
height:30px;
width:195px;
background:url(http://i18.servimg.com/u/f18/18/72/44/21/catego14.png);
font-weight:bold;
}
#button_add:hover,#button_del:hover{
background:url(http://i18.servimg.com/u/f18/18/72/44/21/catego15.png);
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://jqueryui.com/resources/demos/datepicker/datepicker-fr.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
dateFormat:"DD dd MM"
});
$( "#datepicker" ).datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$( "#datepicker" ).datepicker( "getDate" );
});
</script>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2;
var listheure = new Array("00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23");
var listheurevalue = listheure;
var listminut = new Array("00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59");
var listminutvalue = listminut;
// script du bouton d'ajout et de suppression
function add_horaire()
{
var tab1 = document.getElementById('tab1');
var tr1 = document.createElement('tr');
tr1.id = 'tr1'+nb_lignes;
var td1 = document.createElement('td');
td1.className = 'row1';
var label1 = document.createElement('label');
label1.className = 'court';
var txtdeb = document.createTextNode("Début : ");
var span1 = document.createElement('span');
var txtspan1 = document.createTextNode("*");
var select11 = document.createElement("select");
select11.className = 'formulaire court';
select11.setAttribute("name", "h_debut"+nb_lignes);
select11.setAttribute("id", "h_debut"+nb_lignes);
select11.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <24; i++)
{
select11.options[i] = new Option(listheure[i], listheurevalue[i],false);
}
var txth1 = document.createTextNode("h");
var select12 = document.createElement("select");
select12.className = 'formulaire court';
select12.setAttribute("name", "m_debut"+nb_lignes);
select12.setAttribute("id", "m_debut"+nb_lignes);
select12.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <60; i++)
{
select12.options[i] = new Option(listminut[i], listminutvalue[i],false);
}
var br1 = document.createElement('br');
+
tab1.appendChild(tr1);
tr1.appendChild(td1);
td1.appendChild(label1);
label1.appendChild(txtdeb);
label1.appendChild(span1);
span1.appendChild(txtspan1);
td1.appendChild(select11);
td1.appendChild(txth1);
td1.appendChild(select12);
td1.appendChild(br1);

var label2 = document.createElement('label');
label2.className = 'court';
var txtfin = document.createTextNode("Fin : ");
var span2 = document.createElement('span');
var txtspan2 = document.createTextNode("*");
var select21 = document.createElement("select");
select21.className = 'formulaire court';
select21.setAttribute("name", "h_fin"+nb_lignes);
select21.setAttribute("id", "h_fin"+nb_lignes);
select21.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <24; i++)
{
select21.options[i] = new Option(listheure[i], listheurevalue[i],false);
}
var txth2 = document.createTextNode("h");
var select22 = document.createElement("select");
select22.className = 'formulaire court';
select22.setAttribute("name", "m_fin"+nb_lignes);
select22.setAttribute("id", "m_fin"+nb_lignes);
select22.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <60; i++)
{
select22.options[i] = new Option(listminut[i], listminutvalue[i],false);
}
var br2 = document.createElement('br');

td1.appendChild(label2);
label2.appendChild(txtfin);
label2.appendChild(span2);
span2.appendChild(txtspan2);
td1.appendChild(select21);
td1.appendChild(txth2);
td1.appendChild(select22);
td1.appendChild(br2);

var input3 = document.createElement('input');
input3.setAttribute("name", "presence"+nb_lignes);
input3.setAttribute("id", "presence"+nb_lignes);
input3.setAttribute("type", "hidden");
var div3 = document.createElement('div');
div3.setAttribute("id", "nuit"+nb_lignes);
var br31 = document.createElement('br');

td1.appendChild(input3);
td1.appendChild(div3);
div3.appendChild(br31);

var label4 = document.createElement('label');
var txttache = document.createTextNode("Tâche : ");
var br41 = document.createElement('br');
var span4 = document.createElement('span');
span4.className = 'italic';
var txtspan4 = document.createTextNode("Merci d'indiquer une seule tâche.");
var br42 = document.createElement('br');
var input4 = document.createElement('textarea');
input4.className = 'formulaire';
input4.setAttribute("name", "tache"+nb_lignes);
input4.setAttribute("id", "tache"+nb_lignes);
input4.setAttribute("required", "required");
var br5 = document.createElement('br');

td1.appendChild(label4);
label4.appendChild(txttache);
td1.appendChild(br41);
td1.appendChild(span4);
span4.appendChild(txtspan4);
td1.appendChild(br42);
td1.appendChild(input4);
td1.appendChild(br5);
 
nb_lignes++;
}
function del_horaire()
{
if(nb_lignes>2)
{
nb_lignes--;
var tab1 = document.getElementById('tab1');
var tr1 = document.getElementById('tr1'+nb_lignes);
tab1.removeChild(tr1);
}
}
function add_total(form)
{
for (var i = 1; i < nb_lignes; i++)
{
var h_debut = Number(document.getElementById('h_debut'+i).value);
var m_debut = Number(document.getElementById('m_debut'+i).value);
var h_fin = Number(document.getElementById('h_fin'+i).value);
var m_fin = Number(document.getElementById('m_fin'+i).value);
var h_total = ((h_fin*60) + m_fin) - ((h_debut*60) + m_debut)  ;
if(h_debut>h_fin||h_debut==h_fin&&m_debut>m_fin)
{
h_total+=1440 ;
document.getElementById('nuit'+i).innerHTML='" Début " supérieur à " Fin "';
}
else
{
document.getElementById('nuit'+i).innerHTML="<br />";
}
document.getElementById('presence'+i).value = h_total;
var total ="";
total = Number(document.getElementById('presence1').value)
+Number(document.getElementById('presence2').value)
+Number(document.getElementById('presence3').value)
+Number(document.getElementById('presence4').value)
+Number(document.getElementById('presence5').value)
+Number(document.getElementById('presence6').value)
+Number(document.getElementById('presence7').value)
+Number(document.getElementById('presence8').value)
+Number(document.getElementById('presence9').value)
+Number(document.getElementById('presence10').value)
+Number(document.getElementById('presence11').value)
+Number(document.getElementById('presence12').value)
+Number(document.getElementById('presence13').value)
+Number(document.getElementById('presence14').value)
+Number(document.getElementById('presence15').value)
+Number(document.getElementById('presence16').value)
+Number(document.getElementById('presence17').value)
+Number(document.getElementById('presence18').value)
+Number(document.getElementById('presence19').value)
+Number(document.getElementById('presence20').value)
+Number(document.getElementById('presence21').value)
+Number(document.getElementById('presence22').value)
+Number(document.getElementById('presence23').value)
+Number(document.getElementById('presence24').value)
+Number(document.getElementById('presence25').value)
+Number(document.getElementById('presence26').value)
+Number(document.getElementById('presence27').value)
+Number(document.getElementById('presence28').value)
+Number(document.getElementById('presence29').value)
+Number(document.getElementById('presence30').value);
document.getElementById('total').value = total;
if (total>1440){
document.getElementById('totalplus').innerHTML="Les journées n'ont que 24h (ou 1440')";
}else{
document.getElementById('totalplus').innerHTML="";
}
}
}
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='t_planning' width='80%' align='center'][tr][td]"
+"[center][size=14]"+ form.datepicker.value + "[/size][/center]\n"
+ "[center][size=13][u]Total :[/u] " + form.total.value + " minutes[/size][/center]\n"
+ "[/td]\n[/tr]\n[/table]";
for (var nb = 1; nb < nb_lignes; nb++)
{
var h_debut = document.getElementById('h_debut'+nb).value;
var m_debut = document.getElementById('m_debut'+nb).value;
var h_fin = document.getElementById('h_fin'+nb).value;
var m_fin = document.getElementById('m_fin'+nb).value;
var tache = document.getElementById('tache'+nb).value;
txt_message += "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:hr: "
+ h_debut + "h" + m_debut + " à " + h_fin + "h" + m_fin + '\n'
+ ":nm: " + tache  + "[/size][/td]\n[/tr]\n[/table]\n";
}
txt_message += "\n";
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)" id="form_minister">
<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="934" />
<table class="forumline" style="width: 100%;border-spacing: 8px;padding:0;" border="0" id="tab1" name="tab1" >
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des ministres</h2>
</th>
</tr>
<tr name="tr11" id="tr11">
<td class="row1">
  <span style="font-size:12px;">Merci de ne poster qu'une seule présence par jour.<br />(30 tâches au maximum)</span><br />
<label for="datepicker">Date : <span style="color:red">*</span></label><br />
<input type="text" id="datepicker" name="datepicker" class="formulaire" required="required" /><br />
<label>Temps total de présence :<input id="total" name="total" class="formulaire court" readonly /> minutes</label>
<input type="hidden" id="presence1" name="presence1" />
<input type="hidden" id="presence2" name="presence2" />
<input type="hidden" id="presence3" name="presence3" />
<input type="hidden" id="presence4" name="presence4" />
<input type="hidden" id="presence5" name="presence5" />
<input type="hidden" id="presence6" name="presence6" />
<input type="hidden" id="presence7" name="presence7" />
<input type="hidden" id="presence8" name="presence8" />
<input type="hidden" id="presence9" name="presence9" />
<input type="hidden" id="presence10" name="presence10" />
<input type="hidden" id="presence11" name="presence11" />
<input type="hidden" id="presence12" name="presence12" />
<input type="hidden" id="presence13" name="presence13" />
<input type="hidden" id="presence14" name="presence14" />
<input type="hidden" id="presence15" name="presence15" />
<input type="hidden" id="presence16" name="presence16" />
<input type="hidden" id="presence17" name="presence17" />
<input type="hidden" id="presence18" name="presence18" />
<input type="hidden" id="presence19" name="presence19" />
<input type="hidden" id="presence20" name="presence20" />
<input type="hidden" id="presence21" name="presence21" />
<input type="hidden" id="presence22" name="presence22" />
<input type="hidden" id="presence23" name="presence23" />
<input type="hidden" id="presence24" name="presence24" />
<input type="hidden" id="presence25" name="presence25" />
<input type="hidden" id="presence26" name="presence26" />
<input type="hidden" id="presence27" name="presence27" />
<input type="hidden" id="presence28" name="presence28" />
<input type="hidden" id="presence29" name="presence29" />
<input type="hidden" id="presence30" name="presence30" />
<br />
<br />

<label class="court">Début : <span>*</span></label>
<select name="h_debut1" id="h_debut1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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>
</select>
h
<select name="m_debut1" id="m_debut1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select><br />
<label class="court">Fin : <span>*</span></label>
<select name="h_fin1" id="h_fin1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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>
</select>
h
<select name="m_fin1" id="m_fin1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select><br />
<div id="nuit1"><br /></div>
<label>Tâche :</label><br />
<span class="italic">Merci d'indiquer une seule tâche.</span><br />
<textarea id="tache1" name="tache1" class="formulaire" required="required" rows="8"></textarea>
</td></tr></table>
<br />
<div align="center"><input type="button" id="button_add" name="button_add"  onClick="add_horaire();" value="Ajouter un horaire" />
<input type="button" id="button_del" name="button_del" onClick="del_horaire();" value="Retirer le dernier horaire" />
</div>
<br />
<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">
<label><span id="totalplus"></span><br /><label>
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

Merci beaucoup, bonne nuit à vous.

Phyliono
*****

Messages : 921
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 Jeu 25 Fév 2016 - 3:09

On peut tenter ceci :

Code:
<style type="text/css">
#form_minister label{
font:bold 11px ubuntu, verdana;
display:inline-block;
}
#form_minister label span{
color:red;
}
#form_minister span{
font-size:12px;
}
#form_minister .italic{
font:bold italic 10px ubuntu, verdana;
}
#form_minister .court{
height:25px;
width:120px;
margin:2px 5px;
}
#form_minister textarea{
height:50px;
width:400px;
resize:none;
}
#form_minister .forumline td{
text-align:center;padding:10px 0;
font:bold 11px ubuntu, verdana;
}
#form_minister .modgen{
padding:2px 0!important;
}
#button_add,#button_del{
height:30px;
width:195px;
background:url(http://i18.servimg.com/u/f18/18/72/44/21/catego14.png);
font-weight:bold;
}
#button_add:hover,#button_del:hover{
background:url(http://i18.servimg.com/u/f18/18/72/44/21/catego15.png);
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://jqueryui.com/resources/demos/datepicker/datepicker-fr.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
dateFormat:"DD dd MM"
});
$( "#datepicker" ).datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$( "#datepicker" ).datepicker( "getDate" );
});
</script>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2;
var listheure = new Array("00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23");
var listheurevalue = listheure;
var listminut = new Array("00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59");
var listminutvalue = listminut;
// script du bouton d'ajout et de suppression
function add_horaire()
{
var tab1 = document.getElementById('tab1');
var tr1 = document.createElement('tr');
tr1.id = 'tr1'+nb_lignes;
var td1 = document.createElement('td');
td1.className = 'row1';
var label1 = document.createElement('label');
label1.className = 'court';
var txtdeb = document.createTextNode("Début : ");
var span1 = document.createElement('span');
var txtspan1 = document.createTextNode("*");
var select11 = document.createElement("select");
select11.className = 'formulaire court';
select11.setAttribute("name", "h_debut"+nb_lignes);
select11.setAttribute("id", "h_debut"+nb_lignes);
select11.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <24; i++)
{
select11.options[i] = new Option(listheure[i], listheurevalue[i],false);
}
var txth1 = document.createTextNode("h");
var select12 = document.createElement("select");
select12.className = 'formulaire court';
select12.setAttribute("name", "m_debut"+nb_lignes);
select12.setAttribute("id", "m_debut"+nb_lignes);
select12.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <60; i++)
{
select12.options[i] = new Option(listminut[i], listminutvalue[i],false);
}
var br1 = document.createElement('br');
+
tab1.appendChild(tr1);
tr1.appendChild(td1);
td1.appendChild(label1);
label1.appendChild(txtdeb);
label1.appendChild(span1);
span1.appendChild(txtspan1);
td1.appendChild(select11);
td1.appendChild(txth1);
td1.appendChild(select12);
td1.appendChild(br1);

var label2 = document.createElement('label');
label2.className = 'court';
var txtfin = document.createTextNode("Fin : ");
var span2 = document.createElement('span');
var txtspan2 = document.createTextNode("*");
var select21 = document.createElement("select");
select21.className = 'formulaire court';
select21.setAttribute("name", "h_fin"+nb_lignes);
select21.setAttribute("id", "h_fin"+nb_lignes);
select21.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <24; i++)
{
select21.options[i] = new Option(listheure[i], listheurevalue[i],false);
}
var txth2 = document.createTextNode("h");
var select22 = document.createElement("select");
select22.className = 'formulaire court';
select22.setAttribute("name", "m_fin"+nb_lignes);
select22.setAttribute("id", "m_fin"+nb_lignes);
select22.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <60; i++)
{
select22.options[i] = new Option(listminut[i], listminutvalue[i],false);
}
var br2 = document.createElement('br');

td1.appendChild(label2);
label2.appendChild(txtfin);
label2.appendChild(span2);
span2.appendChild(txtspan2);
td1.appendChild(select21);
td1.appendChild(txth2);
td1.appendChild(select22);
td1.appendChild(br2);

var input3 = document.createElement('input');
input3.setAttribute("name", "presence"+nb_lignes);
input3.setAttribute("id", "presence"+nb_lignes);
input3.setAttribute("type", "hidden");
var div3 = document.createElement('div');
div3.setAttribute("id", "nuit"+nb_lignes);
var br31 = document.createElement('br');

td1.appendChild(input3);
td1.appendChild(div3);
div3.appendChild(br31);

var label4 = document.createElement('label');
var txttache = document.createTextNode("Tâche : ");
var br41 = document.createElement('br');
var span4 = document.createElement('span');
span4.className = 'italic';
var txtspan4 = document.createTextNode("Merci d'indiquer une seule tâche.");
var br42 = document.createElement('br');
var input4 = document.createElement('textarea');
input4.className = 'formulaire';
input4.setAttribute("name", "tache"+nb_lignes);
input4.setAttribute("id", "tache"+nb_lignes);
input4.setAttribute("required", "required");
var br5 = document.createElement('br');

td1.appendChild(label4);
label4.appendChild(txttache);
td1.appendChild(br41);
td1.appendChild(span4);
span4.appendChild(txtspan4);
td1.appendChild(br42);
td1.appendChild(input4);
td1.appendChild(br5);
 
nb_lignes++;
}
function del_horaire()
{
if(nb_lignes>2)
{
nb_lignes--;
var tab1 = document.getElementById('tab1');
var tr1 = document.getElementById('tr1'+nb_lignes);
tab1.removeChild(tr1);
}
}
function add_total(form)
{
for (var i = 1; i < nb_lignes; i++)
{
var h_debut = Number(document.getElementById('h_debut'+i).value);
var m_debut = Number(document.getElementById('m_debut'+i).value);
var h_fin = Number(document.getElementById('h_fin'+i).value);
var m_fin = Number(document.getElementById('m_fin'+i).value);
var h_total = ((h_fin*60) + m_fin) - ((h_debut*60) + m_debut)  ;
if(h_debut>h_fin||h_debut==h_fin&&m_debut>m_fin)
{
h_total+=1440 ;
document.getElementById('nuit'+i).innerHTML='" Début " supérieur à " Fin "';
}
else
{
document.getElementById('nuit'+i).innerHTML="<br />";
}
document.getElementById('presence'+i).value = h_total;
var total ="";
total = Number(document.getElementById('presence1').value)
+Number(document.getElementById('presence2').value)
+Number(document.getElementById('presence3').value)
+Number(document.getElementById('presence4').value)
+Number(document.getElementById('presence5').value)
+Number(document.getElementById('presence6').value)
+Number(document.getElementById('presence7').value)
+Number(document.getElementById('presence8').value)
+Number(document.getElementById('presence9').value)
+Number(document.getElementById('presence10').value)
+Number(document.getElementById('presence11').value)
+Number(document.getElementById('presence12').value)
+Number(document.getElementById('presence13').value)
+Number(document.getElementById('presence14').value)
+Number(document.getElementById('presence15').value)
+Number(document.getElementById('presence16').value)
+Number(document.getElementById('presence17').value)
+Number(document.getElementById('presence18').value)
+Number(document.getElementById('presence19').value)
+Number(document.getElementById('presence20').value)
+Number(document.getElementById('presence21').value)
+Number(document.getElementById('presence22').value)
+Number(document.getElementById('presence23').value)
+Number(document.getElementById('presence24').value)
+Number(document.getElementById('presence25').value)
+Number(document.getElementById('presence26').value)
+Number(document.getElementById('presence27').value)
+Number(document.getElementById('presence28').value)
+Number(document.getElementById('presence29').value)
+Number(document.getElementById('presence30').value);
document.getElementById('total').value = total;
if (total>1440){
document.getElementById('totalplus').innerHTML="Les journées n'ont que 24h (ou 1440')";
}else{
document.getElementById('totalplus').innerHTML="";
}
}
}
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='t_planning' width='80%' align='center'][tr][td]"
+"[center][size=14]"+ form.datepicker.value + "[/size][/center]\n"
+ "[center][size=13][u]Total :[/u] " + form.total.value + " minutes[/size][/center]\n"
+ "[/td]\n[/tr]\n[/table]";
for (var nb = 1; nb < nb_lignes; nb++)
{
var h_debut = document.getElementById('h_debut'+nb).value;
var m_debut = document.getElementById('m_debut'+nb).value;
var h_fin = document.getElementById('h_fin'+nb).value;
var m_fin = document.getElementById('m_fin'+nb).value;
var tache = document.getElementById('tache'+nb).value;
txt_message += "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:hr: "
+ h_debut + "h" + m_debut + " à " + h_fin + "h" + m_fin + '\n'
+ ":nm: " + tache  + "[/size][/td]\n[/tr]\n[/table]\n";
}
txt_message += "\n";
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)" id="form_minister">
<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="934" />
<table class="forumline" style="width: 100%;border-spacing: 8px;padding:0;" border="0" id="tab1" name="tab1" >
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des ministres</h2>
</th>
</tr>
<tr name="tr11" id="tr11">
<td class="row1">
  <span style="font-size:12px;">Merci de ne poster qu'une seule présence par jour.<br />(30 tâches au maximum)</span><br />
<label for="datepicker">Date : <span style="color:red">*</span></label><br />
<input type="text" id="datepicker" name="datepicker" class="formulaire" required="required" /><br />
<label>Temps total de présence :<input id="total" name="total" class="formulaire court" readonly /> minutes</label>
<input type="hidden" id="presence1" name="presence1" />
<input type="hidden" id="presence2" name="presence2" />
<input type="hidden" id="presence3" name="presence3" />
<input type="hidden" id="presence4" name="presence4" />
<input type="hidden" id="presence5" name="presence5" />
<input type="hidden" id="presence6" name="presence6" />
<input type="hidden" id="presence7" name="presence7" />
<input type="hidden" id="presence8" name="presence8" />
<input type="hidden" id="presence9" name="presence9" />
<input type="hidden" id="presence10" name="presence10" />
<input type="hidden" id="presence11" name="presence11" />
<input type="hidden" id="presence12" name="presence12" />
<input type="hidden" id="presence13" name="presence13" />
<input type="hidden" id="presence14" name="presence14" />
<input type="hidden" id="presence15" name="presence15" />
<input type="hidden" id="presence16" name="presence16" />
<input type="hidden" id="presence17" name="presence17" />
<input type="hidden" id="presence18" name="presence18" />
<input type="hidden" id="presence19" name="presence19" />
<input type="hidden" id="presence20" name="presence20" />
<input type="hidden" id="presence21" name="presence21" />
<input type="hidden" id="presence22" name="presence22" />
<input type="hidden" id="presence23" name="presence23" />
<input type="hidden" id="presence24" name="presence24" />
<input type="hidden" id="presence25" name="presence25" />
<input type="hidden" id="presence26" name="presence26" />
<input type="hidden" id="presence27" name="presence27" />
<input type="hidden" id="presence28" name="presence28" />
<input type="hidden" id="presence29" name="presence29" />
<input type="hidden" id="presence30" name="presence30" />
<br />
<br />

<label class="court">Début : <span>*</span></label>
<select name="h_debut1" id="h_debut1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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>
</select>
h
<select name="m_debut1" id="m_debut1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select><br />
<label class="court">Fin : <span>*</span></label>
<select name="h_fin1" id="h_fin1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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>
</select>
h
<select name="m_fin1" id="m_fin1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select><br />
<div id="nuit1"><br /></div>
<label>Tâche :</label><br />
<span class="italic">Merci d'indiquer une seule tâche.</span><br />
<textarea id="tache1" name="tache1" class="formulaire" required="required" rows="8"></textarea>
</td></tr></table>
<br />
<div align="center"><input type="button" id="button_add" name="button_add"  onClick="add_horaire();" value="Ajouter un horaire" />
<input type="button" id="button_del" name="button_del" onClick="del_horaire();" value="Retirer le dernier horaire" />
</div>
<br />
<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">
<label><span id="totalplus"></span><label>
<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 Jeu 25 Fév 2016 - 13:34

Bonjour,

C'est mieux mais il y a encore quelques pixels de trop...



Merci !

Phyliono
*****

Messages : 921
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 Jeu 25 Fév 2016 - 14:39

J'avais oublié de déplacer le texte de la limite des 24h ...

Code:
<style type="text/css">
#form_minister label{
font:bold 11px ubuntu, verdana;
display:inline-block;
}
#form_minister label span{
color:red;
}
#form_minister span{
font-size:12px;
}
#form_minister .italic{
font:bold italic 10px ubuntu, verdana;
}
#form_minister .court{
height:25px;
width:120px;
margin:2px 5px;
}
#form_minister textarea{
height:50px;
width:400px;
resize:none;
}
#form_minister .forumline td{
text-align:center;padding:10px 0;
font:bold 11px ubuntu, verdana;
}
#form_minister .modgen{
padding:0px!important;
}
#button_add,#button_del{
height:30px;
width:195px;
background:url(http://i18.servimg.com/u/f18/18/72/44/21/catego14.png);
font-weight:bold;
}
#button_add:hover,#button_del:hover{
background:url(http://i18.servimg.com/u/f18/18/72/44/21/catego15.png);
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://jqueryui.com/resources/demos/datepicker/datepicker-fr.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
dateFormat:"DD dd MM"
});
$( "#datepicker" ).datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$( "#datepicker" ).datepicker( "getDate" );
});
</script>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2;
var listheure = new Array("00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23");
var listheurevalue = listheure;
var listminut = new Array("00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59");
var listminutvalue = listminut;
// script du bouton d'ajout et de suppression
function add_horaire()
{
var tab1 = document.getElementById('tab1');
var tr1 = document.createElement('tr');
tr1.id = 'tr1'+nb_lignes;
var td1 = document.createElement('td');
td1.className = 'row1';
var label1 = document.createElement('label');
label1.className = 'court';
var txtdeb = document.createTextNode("Début : ");
var span1 = document.createElement('span');
var txtspan1 = document.createTextNode("*");
var select11 = document.createElement("select");
select11.className = 'formulaire court';
select11.setAttribute("name", "h_debut"+nb_lignes);
select11.setAttribute("id", "h_debut"+nb_lignes);
select11.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <24; i++)
{
select11.options[i] = new Option(listheure[i], listheurevalue[i],false);
}
var txth1 = document.createTextNode("h");
var select12 = document.createElement("select");
select12.className = 'formulaire court';
select12.setAttribute("name", "m_debut"+nb_lignes);
select12.setAttribute("id", "m_debut"+nb_lignes);
select12.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <60; i++)
{
select12.options[i] = new Option(listminut[i], listminutvalue[i],false);
}
var br1 = document.createElement('br');
+
tab1.appendChild(tr1);
tr1.appendChild(td1);
td1.appendChild(label1);
label1.appendChild(txtdeb);
label1.appendChild(span1);
span1.appendChild(txtspan1);
td1.appendChild(select11);
td1.appendChild(txth1);
td1.appendChild(select12);
td1.appendChild(br1);

var label2 = document.createElement('label');
label2.className = 'court';
var txtfin = document.createTextNode("Fin : ");
var span2 = document.createElement('span');
var txtspan2 = document.createTextNode("*");
var select21 = document.createElement("select");
select21.className = 'formulaire court';
select21.setAttribute("name", "h_fin"+nb_lignes);
select21.setAttribute("id", "h_fin"+nb_lignes);
select21.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <24; i++)
{
select21.options[i] = new Option(listheure[i], listheurevalue[i],false);
}
var txth2 = document.createTextNode("h");
var select22 = document.createElement("select");
select22.className = 'formulaire court';
select22.setAttribute("name", "m_fin"+nb_lignes);
select22.setAttribute("id", "m_fin"+nb_lignes);
select22.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <60; i++)
{
select22.options[i] = new Option(listminut[i], listminutvalue[i],false);
}
var br2 = document.createElement('br');

td1.appendChild(label2);
label2.appendChild(txtfin);
label2.appendChild(span2);
span2.appendChild(txtspan2);
td1.appendChild(select21);
td1.appendChild(txth2);
td1.appendChild(select22);
td1.appendChild(br2);

var input3 = document.createElement('input');
input3.setAttribute("name", "presence"+nb_lignes);
input3.setAttribute("id", "presence"+nb_lignes);
input3.setAttribute("type", "hidden");
var div3 = document.createElement('div');
div3.setAttribute("id", "nuit"+nb_lignes);
var br31 = document.createElement('br');

td1.appendChild(input3);
td1.appendChild(div3);
div3.appendChild(br31);

var label4 = document.createElement('label');
var txttache = document.createTextNode("Tâche : ");
var br41 = document.createElement('br');
var span4 = document.createElement('span');
span4.className = 'italic';
var txtspan4 = document.createTextNode("Merci d'indiquer une seule tâche.");
var br42 = document.createElement('br');
var input4 = document.createElement('textarea');
input4.className = 'formulaire';
input4.setAttribute("name", "tache"+nb_lignes);
input4.setAttribute("id", "tache"+nb_lignes);
input4.setAttribute("required", "required");
var br5 = document.createElement('br');

td1.appendChild(label4);
label4.appendChild(txttache);
td1.appendChild(br41);
td1.appendChild(span4);
span4.appendChild(txtspan4);
td1.appendChild(br42);
td1.appendChild(input4);
td1.appendChild(br5);
 
nb_lignes++;
}
function del_horaire()
{
if(nb_lignes>2)
{
nb_lignes--;
var tab1 = document.getElementById('tab1');
var tr1 = document.getElementById('tr1'+nb_lignes);
tab1.removeChild(tr1);
}
}
function add_total(form)
{
for (var i = 1; i < nb_lignes; i++)
{
var h_debut = Number(document.getElementById('h_debut'+i).value);
var m_debut = Number(document.getElementById('m_debut'+i).value);
var h_fin = Number(document.getElementById('h_fin'+i).value);
var m_fin = Number(document.getElementById('m_fin'+i).value);
var h_total = ((h_fin*60) + m_fin) - ((h_debut*60) + m_debut)  ;
if(h_debut>h_fin||h_debut==h_fin&&m_debut>m_fin)
{
h_total+=1440 ;
document.getElementById('nuit'+i).innerHTML='" Début " supérieur à " Fin "';
}
else
{
document.getElementById('nuit'+i).innerHTML="<br />";
}
document.getElementById('presence'+i).value = h_total;
var total ="";
total = Number(document.getElementById('presence1').value)
+Number(document.getElementById('presence2').value)
+Number(document.getElementById('presence3').value)
+Number(document.getElementById('presence4').value)
+Number(document.getElementById('presence5').value)
+Number(document.getElementById('presence6').value)
+Number(document.getElementById('presence7').value)
+Number(document.getElementById('presence8').value)
+Number(document.getElementById('presence9').value)
+Number(document.getElementById('presence10').value)
+Number(document.getElementById('presence11').value)
+Number(document.getElementById('presence12').value)
+Number(document.getElementById('presence13').value)
+Number(document.getElementById('presence14').value)
+Number(document.getElementById('presence15').value)
+Number(document.getElementById('presence16').value)
+Number(document.getElementById('presence17').value)
+Number(document.getElementById('presence18').value)
+Number(document.getElementById('presence19').value)
+Number(document.getElementById('presence20').value)
+Number(document.getElementById('presence21').value)
+Number(document.getElementById('presence22').value)
+Number(document.getElementById('presence23').value)
+Number(document.getElementById('presence24').value)
+Number(document.getElementById('presence25').value)
+Number(document.getElementById('presence26').value)
+Number(document.getElementById('presence27').value)
+Number(document.getElementById('presence28').value)
+Number(document.getElementById('presence29').value)
+Number(document.getElementById('presence30').value);
document.getElementById('total').value = total;
if (total>1440){
document.getElementById('totalplus').innerHTML="Les journées n'ont que 24h (ou 1440')<br />";
}else{
document.getElementById('totalplus').innerHTML="";
}
}
}
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='t_planning' width='80%' align='center'][tr][td]"
+"[center][size=14]"+ form.datepicker.value + "[/size][/center]\n"
+ "[center][size=13][u]Total :[/u] " + form.total.value + " minutes[/size][/center]\n"
+ "[/td]\n[/tr]\n[/table]";
for (var nb = 1; nb < nb_lignes; nb++)
{
var h_debut = document.getElementById('h_debut'+nb).value;
var m_debut = document.getElementById('m_debut'+nb).value;
var h_fin = document.getElementById('h_fin'+nb).value;
var m_fin = document.getElementById('m_fin'+nb).value;
var tache = document.getElementById('tache'+nb).value;
txt_message += "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:hr: "
+ h_debut + "h" + m_debut + " à " + h_fin + "h" + m_fin + '\n'
+ ":nm: " + tache  + "[/size][/td]\n[/tr]\n[/table]\n";
}
txt_message += "\n";
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)" id="form_minister">
<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="934" />
<table class="forumline" style="width: 100%;border-spacing: 8px;padding:0;" border="0" id="tab1" name="tab1" >
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des ministres</h2>
</th>
</tr>
<tr name="tr11" id="tr11">
<td class="row1">
  <span style="font-size:12px;">Merci de ne poster qu'une seule présence par jour.<br />(30 tâches au maximum)</span><br />
 
<label><span id="totalplus"></span><label>
<label for="datepicker">Date : <span style="color:red">*</span></label><br />
<input type="text" id="datepicker" name="datepicker" class="formulaire" required="required" /><br />
<label>Temps total de présence :<input id="total" name="total" class="formulaire court" readonly /> minutes</label>
<input type="hidden" id="presence1" name="presence1" />
<input type="hidden" id="presence2" name="presence2" />
<input type="hidden" id="presence3" name="presence3" />
<input type="hidden" id="presence4" name="presence4" />
<input type="hidden" id="presence5" name="presence5" />
<input type="hidden" id="presence6" name="presence6" />
<input type="hidden" id="presence7" name="presence7" />
<input type="hidden" id="presence8" name="presence8" />
<input type="hidden" id="presence9" name="presence9" />
<input type="hidden" id="presence10" name="presence10" />
<input type="hidden" id="presence11" name="presence11" />
<input type="hidden" id="presence12" name="presence12" />
<input type="hidden" id="presence13" name="presence13" />
<input type="hidden" id="presence14" name="presence14" />
<input type="hidden" id="presence15" name="presence15" />
<input type="hidden" id="presence16" name="presence16" />
<input type="hidden" id="presence17" name="presence17" />
<input type="hidden" id="presence18" name="presence18" />
<input type="hidden" id="presence19" name="presence19" />
<input type="hidden" id="presence20" name="presence20" />
<input type="hidden" id="presence21" name="presence21" />
<input type="hidden" id="presence22" name="presence22" />
<input type="hidden" id="presence23" name="presence23" />
<input type="hidden" id="presence24" name="presence24" />
<input type="hidden" id="presence25" name="presence25" />
<input type="hidden" id="presence26" name="presence26" />
<input type="hidden" id="presence27" name="presence27" />
<input type="hidden" id="presence28" name="presence28" />
<input type="hidden" id="presence29" name="presence29" />
<input type="hidden" id="presence30" name="presence30" />
<br />
<br />

<label class="court">Début : <span>*</span></label>
<select name="h_debut1" id="h_debut1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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>
</select>
h
<select name="m_debut1" id="m_debut1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select><br />
<label class="court">Fin : <span>*</span></label>
<select name="h_fin1" id="h_fin1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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>
</select>
h
<select name="m_fin1" id="m_fin1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select><br />
<div id="nuit1"><br /></div>
<label>Tâche :</label><br />
<span class="italic">Merci d'indiquer une seule tâche.</span><br />
<textarea id="tache1" name="tache1" class="formulaire" required="required" rows="8"></textarea>
</td></tr></table>
<br />
<div align="center"><input type="button" id="button_add" name="button_add"  onClick="add_horaire();" value="Ajouter un horaire" />
<input type="button" id="button_del" name="button_del" onClick="del_horaire();" value="Retirer le dernier horaire" />
</div>
<br />
<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 Jeu 25 Fév 2016 - 15:20

Merci, c'est bon pour la taille en bas sauf que maintenant, dès que je clique sur un champ du premier cadre, le calendrier de la date apparait à chaque fois...

Code:
http://i84.servimg.com/u/f84/19/30/46/94/captur14.png

Et "Merci d'indiquer une seule tâche" du premier cadre est écrit en rouge maintenant au lieu de blanc... ?

Merci beaucoup.

J'ai oublié un autre formulaire, celui des notes qui fonctionne à peu près de la même manière mais pas en fonction de la durée. Je m'explique.

Il faut :
- Un champ input par pseudo (comme les autres formulaires) suivi d'un petit champ input (sur la même ligne) pour indiquer la note.
- Une liste pour indiquer le barème (sur 5, sur 10 ou sur 20)
- En fonction de la note, l'étudiant gagne un certain nombre de notes (monnaie comme les étoiles) selon le principe suivant :

- 0/20 à 4/20 - 0/10 à 2/10 - 0/5 à 1/5 : 0 notes
- 5/20 à 9/20 - 3/10 à 4/10 / 2/5 : 1 note
- 10/20 à 14/20 - 5/10 à 7/10 / 3/5 : 2 notes
- 15/20 à 20/20 - 8/10 à 10/10 / 4/5 à 5/5 : 3 notes

- De même, un cadre jaune avec les récompenses dessous selon ce principe :

- Entre 1 et 5 étudiants notés : 1 étoile et 1 soleil
- Entre 6 et 10 étudiants notés : 2 étoiles et 2 soleils
- Plus de 10 étudiants notés : 3 étoiles et 3 soleils

Exemple de ce que ça devrait donné :


BBCODE :
Code:
[table class="bleu" align="center" width="70%"][tr][td][size=13]:cr: Devoir d'informatique
:dt: 20 février au 25 février
:ps: Liste des notes :
Pseudo1 - 12/20 - 2 :no:
Pseudo2 - 18/20 - 3 :no:
Pseudo3 - 16/20 - 3 :no:
Pseudo4 - 4/20 - 0 :no:
Pseudo5 - 8/20 - 1 :no:
Pseudo6 - 14/20 - 2 :no: [/size][/td]
[/tr]
[/table]
[table class="jaune" align="center" width="70%"][tr][td][size=13]:av: Récompenses :
Professeur : 2 :e: - 2 :s:
[/size][/td]
[/tr]
[/table]

Image de la note : http://r35.imgfast.net/users/3513/13/24/26/smiles/2864734591.png

Code:
<script type="text/javascript">
function envoiMessage(form)
{
if(form.activite.value==' ')
{
alert('Vous devez indiquer une matière');
return false;
}
else if(form.d_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.presence.value=='')
{
alert('Vous devez indiquer une note');
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.d_debut.value + " " + form.d_fin.value + '\n'
+ ":ps: Liste des notes :" + '\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="930" />

<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Relevé des notes</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 le barème du devoir.</span><br /><br />
 
<label for="activite"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Matière :</strong> <font color="red">*</font></span></label>
<br />
<select name="activite" id="activite" class="formulaire" style="height:30px;">
<option value=" "></option>
<option value="Devoir d'art">Art</option>
<option value="Devoir d'astronomie">Astronomie</option>
<option value="Devoir de bienséance">Bienséance</option>
<option value="Devoir de botanique">Botanique</option>
<option value="Devoir de cinéma">Cinéma</option>
<option value="Devoir de cuisine">Cuisine</option>
<option value="Devoir d'écriture">Écriture</option>
<option value="Devoir d'esthétique">Esthétique</option>
<option value="Devoir de géographie">Géographie</option>
<option value="Devoir d'habbologie">Habbologie</option>
<option value="Devoir d'histoire">Histoire</option>
<option value="Devoir d'informatique">Informatique</option>
<option value="Devoir de journalisme">Journalisme</option>
<option value="Devoir de langues">Langues</option>
<option value="Devoir de littérature">Littérature</option>
<option value="Devoir de mathématiques">Mathématiques</option>
<option value="Devoir de médecine">Médecine</option>
<option value="Devoir de mode">Mode</option>
<option value="Devoir de musique">Musique</option>
<option value="Devoir de philosophie">Philosophie</option>
<option value="Devoir de psychologie">Psychologie</option>
<option value="Devoir de sciences">Sciences</option>
<option value="Devoir de société">Société</option>
<option value="Devoir de technologie">Technologie</option>
</select>
<br />
<br />
<label for="d_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="d_debut" id="d_debut" class="formulaire" style="height:30px;">
<option value=" ">Date</option>
<option value="01 février">01 février</option>
<option value="02 février">02 février</option>
<option value="03 février">03 février</option>
<option value="04 février">04 février</option>
<option value="05 février">05 février</option>
<option value="06 février">06 février</option>
<option value="07 février">07 février</option>
<option value="08 février">08 février</option>
<option value="09 février">09 février</option>
<option value="10 février">10 février</option>
<option value="11 février">11 février</option>
<option value="12 février">12 février</option>
<option value="13 février">13 février</option>
<option value="14 février">14 février</option>
<option value="15 février">15 février</option>
<option value="16 février">16 février</option>
<option value="17 février">17 février</option>
<option value="18 février">18 février</option>
<option value="19 février">19 février</option>
<option value="20 février">20 février</option>
<option value="21 février">21 février</option>
<option value="22 février">22 février</option>
<option value="23 février">23 février</option>
<option value="24 février">24 février</option>
<option value="25 février">25 février</option>
<option value="26 février">26 février</option>
<option value="27 février">27 février</option>
<option value="28 février">28 février</option>
<option value="29 février">29 février</option>
</select>
<br />
<br />
<label for="d_fin"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Fin :</strong></span>
<br /><span style="font-family: ubuntu, verdana;font-size:10px;margin-left:15px;"><center><em><strong>À remplir uniquement si le devoir dure plusieurs jours.</strong></em></center></span></label>
<br />
<select name="d_fin" id="d_fin" class="formulaire" style="height:30px;">
<option value=" ">Date</option>
<option value="au 01 février">01 février</option>
<option value="au 02 février">02 février</option>
<option value="au 03 février">03 février</option>
<option value="au 04 février">04 février</option>
<option value="au 05 février">05 février</option>
<option value="au 06 février">06 février</option>
<option value="au 07 février">07 février</option>
<option value="au 08 février">08 février</option>
<option value="au 09 février">09 février</option>
<option value="au 10 février">10 février</option>
<option value="au 11 février">11 février</option>
<option value="au 12 février">12 février</option>
<option value="au 13 février">13 février</option>
<option value="au 14 février">14 février</option>
<option value="au 15 février">15 février</option>
<option value="au 16 février">16 février</option>
<option value="au 17 février">17 février</option>
<option value="au 18 février">18 février</option>
<option value="au 19 février">19 février</option>
<option value="au 20 février">20 février</option>
<option value="au 21 février">21 février</option>
<option value="au 22 février">22 février</option>
<option value="au 23 février">23 février</option>
<option value="au 24 février">24 février</option>
<option value="au 25 février">25 février</option>
<option value="au 26 février">26 février</option>
<option value="au 27 février">27 février</option>
<option value="au 28 février">28 février</option>
<option value="au 29 février">29 février</option>
</select>
<br />
<br />
<label for="presence"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Liste des notes :</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" placeholder="Exemple : Pseudo 12/20" 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="center" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

Merci beaucoup de votre aide. J'essaie de faire les quatre autres formulaires maintenant (j'ai du mal à comprendre le système pour ajouter un pseudo à chaque fois, ce dont quelle ligne correspond à quoi).

Phyliono
*****

Messages : 921
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 Jeu 25 Fév 2016 - 15:54

oups ! mauvais copier-coller ...

Code:
<style type="text/css">
#form_minister label{
font:bold 11px ubuntu, verdana;
display:inline-block;
}
#form_minister label span{
color:red;
}
#form_minister span{
font-size:12px;
}
#form_minister .italic{
font:bold italic 10px ubuntu, verdana;
}
#form_minister .court{
height:25px;
width:120px;
margin:2px 5px;
}
#form_minister textarea{
height:50px;
width:400px;
resize:none;
}
#form_minister .forumline td{
text-align:center;padding:10px 0;
font:bold 11px ubuntu, verdana;
}
#form_minister .modgen{
padding:0px!important;
}
#button_add,#button_del{
height:30px;
width:195px;
background:url(http://i18.servimg.com/u/f18/18/72/44/21/catego14.png);
font-weight:bold;
}
#button_add:hover,#button_del:hover{
background:url(http://i18.servimg.com/u/f18/18/72/44/21/catego15.png);
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://jqueryui.com/resources/demos/datepicker/datepicker-fr.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
dateFormat:"DD dd MM"
});
$( "#datepicker" ).datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$( "#datepicker" ).datepicker( "getDate" );
});
</script>
<script type="text/javascript">
var nb_lignes="";
nb_lignes=2;
var listheure = new Array("00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23");
var listheurevalue = listheure;
var listminut = new Array("00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59");
var listminutvalue = listminut;
// script du bouton d'ajout et de suppression
function add_horaire()
{
var tab1 = document.getElementById('tab1');
var tr1 = document.createElement('tr');
tr1.id = 'tr1'+nb_lignes;
var td1 = document.createElement('td');
td1.className = 'row1';
var label1 = document.createElement('label');
label1.className = 'court';
var txtdeb = document.createTextNode("Début : ");
var span1 = document.createElement('span');
var txtspan1 = document.createTextNode("*");
var select11 = document.createElement("select");
select11.className = 'formulaire court';
select11.setAttribute("name", "h_debut"+nb_lignes);
select11.setAttribute("id", "h_debut"+nb_lignes);
select11.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <24; i++)
{
select11.options[i] = new Option(listheure[i], listheurevalue[i],false);
}
var txth1 = document.createTextNode("h");
var select12 = document.createElement("select");
select12.className = 'formulaire court';
select12.setAttribute("name", "m_debut"+nb_lignes);
select12.setAttribute("id", "m_debut"+nb_lignes);
select12.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <60; i++)
{
select12.options[i] = new Option(listminut[i], listminutvalue[i],false);
}
var br1 = document.createElement('br');
+
tab1.appendChild(tr1);
tr1.appendChild(td1);
td1.appendChild(label1);
label1.appendChild(txtdeb);
label1.appendChild(span1);
span1.appendChild(txtspan1);
td1.appendChild(select11);
td1.appendChild(txth1);
td1.appendChild(select12);
td1.appendChild(br1);

var label2 = document.createElement('label');
label2.className = 'court';
var txtfin = document.createTextNode("Fin : ");
var span2 = document.createElement('span');
var txtspan2 = document.createTextNode("*");
var select21 = document.createElement("select");
select21.className = 'formulaire court';
select21.setAttribute("name", "h_fin"+nb_lignes);
select21.setAttribute("id", "h_fin"+nb_lignes);
select21.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <24; i++)
{
select21.options[i] = new Option(listheure[i], listheurevalue[i],false);
}
var txth2 = document.createTextNode("h");
var select22 = document.createElement("select");
select22.className = 'formulaire court';
select22.setAttribute("name", "m_fin"+nb_lignes);
select22.setAttribute("id", "m_fin"+nb_lignes);
select22.setAttribute("onChange", "add_total()");
/* liste des options */
for (i =0; i <60; i++)
{
select22.options[i] = new Option(listminut[i], listminutvalue[i],false);
}
var br2 = document.createElement('br');

td1.appendChild(label2);
label2.appendChild(txtfin);
label2.appendChild(span2);
span2.appendChild(txtspan2);
td1.appendChild(select21);
td1.appendChild(txth2);
td1.appendChild(select22);
td1.appendChild(br2);

var input3 = document.createElement('input');
input3.setAttribute("name", "presence"+nb_lignes);
input3.setAttribute("id", "presence"+nb_lignes);
input3.setAttribute("type", "hidden");
var div3 = document.createElement('div');
div3.setAttribute("id", "nuit"+nb_lignes);
var br31 = document.createElement('br');

td1.appendChild(input3);
td1.appendChild(div3);
div3.appendChild(br31);

var label4 = document.createElement('label');
var txttache = document.createTextNode("Tâche : ");
var br41 = document.createElement('br');
var span4 = document.createElement('span');
span4.className = 'italic';
var txtspan4 = document.createTextNode("Merci d'indiquer une seule tâche.");
var br42 = document.createElement('br');
var input4 = document.createElement('textarea');
input4.className = 'formulaire';
input4.setAttribute("name", "tache"+nb_lignes);
input4.setAttribute("id", "tache"+nb_lignes);
input4.setAttribute("required", "required");
var br5 = document.createElement('br');

td1.appendChild(label4);
label4.appendChild(txttache);
td1.appendChild(br41);
td1.appendChild(span4);
span4.appendChild(txtspan4);
td1.appendChild(br42);
td1.appendChild(input4);
td1.appendChild(br5);
 
nb_lignes++;
}
function del_horaire()
{
if(nb_lignes>2)
{
nb_lignes--;
var tab1 = document.getElementById('tab1');
var tr1 = document.getElementById('tr1'+nb_lignes);
tab1.removeChild(tr1);
}
}
function add_total(form)
{
for (var i = 1; i < nb_lignes; i++)
{
var h_debut = Number(document.getElementById('h_debut'+i).value);
var m_debut = Number(document.getElementById('m_debut'+i).value);
var h_fin = Number(document.getElementById('h_fin'+i).value);
var m_fin = Number(document.getElementById('m_fin'+i).value);
var h_total = ((h_fin*60) + m_fin) - ((h_debut*60) + m_debut)  ;
if(h_debut>h_fin||h_debut==h_fin&&m_debut>m_fin)
{
h_total+=1440 ;
document.getElementById('nuit'+i).innerHTML='" Début " supérieur à " Fin "';
}
else
{
document.getElementById('nuit'+i).innerHTML="<br />";
}
document.getElementById('presence'+i).value = h_total;
var total ="";
total = Number(document.getElementById('presence1').value)
+Number(document.getElementById('presence2').value)
+Number(document.getElementById('presence3').value)
+Number(document.getElementById('presence4').value)
+Number(document.getElementById('presence5').value)
+Number(document.getElementById('presence6').value)
+Number(document.getElementById('presence7').value)
+Number(document.getElementById('presence8').value)
+Number(document.getElementById('presence9').value)
+Number(document.getElementById('presence10').value)
+Number(document.getElementById('presence11').value)
+Number(document.getElementById('presence12').value)
+Number(document.getElementById('presence13').value)
+Number(document.getElementById('presence14').value)
+Number(document.getElementById('presence15').value)
+Number(document.getElementById('presence16').value)
+Number(document.getElementById('presence17').value)
+Number(document.getElementById('presence18').value)
+Number(document.getElementById('presence19').value)
+Number(document.getElementById('presence20').value)
+Number(document.getElementById('presence21').value)
+Number(document.getElementById('presence22').value)
+Number(document.getElementById('presence23').value)
+Number(document.getElementById('presence24').value)
+Number(document.getElementById('presence25').value)
+Number(document.getElementById('presence26').value)
+Number(document.getElementById('presence27').value)
+Number(document.getElementById('presence28').value)
+Number(document.getElementById('presence29').value)
+Number(document.getElementById('presence30').value);
document.getElementById('total').value = total;
if (total>1440){
document.getElementById('totalplus').innerHTML="Les journées n'ont que 24h (ou 1440')";
document.getElementById('totalplus').style.display="block";
}else{
document.getElementById('totalplus').innerHTML="";
document.getElementById('totalplus').style.display="none";
}
}
}
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='t_planning' width='80%' align='center'][tr][td]"
+"[center][size=14]"+ form.datepicker.value + "[/size][/center]\n"
+ "[center][size=13][u]Total :[/u] " + form.total.value + " minutes[/size][/center]\n"
+ "[/td]\n[/tr]\n[/table]";
for (var nb = 1; nb < nb_lignes; nb++)
{
var h_debut = document.getElementById('h_debut'+nb).value;
var m_debut = document.getElementById('m_debut'+nb).value;
var h_fin = document.getElementById('h_fin'+nb).value;
var m_fin = document.getElementById('m_fin'+nb).value;
var tache = document.getElementById('tache'+nb).value;
txt_message += "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:hr: "
+ h_debut + "h" + m_debut + " à " + h_fin + "h" + m_fin + '\n'
+ ":nm: " + tache  + "[/size][/td]\n[/tr]\n[/table]\n";
}
txt_message += "\n";
// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)" id="form_minister">
<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="934" />
<table class="forumline" style="width: 100%;border-spacing: 8px;padding:0;" border="0" id="tab1" name="tab1" >
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des ministres</h2>
</th>
</tr>
<tr name="tr11" id="tr11">
<td class="row1">
  <span style="font-size:12px;">Merci de ne poster qu'une seule présence par jour.<br />(30 tâches au maximum)</span><br />
<label for="datepicker">Date : <span style="color:red">*</span></label><br />
<input type="text" id="datepicker" name="datepicker" class="formulaire" required="required" /><br />
<label>Temps total de présence :<input id="total" name="total" class="formulaire court" readonly /> minutes</label>
<input type="hidden" id="presence1" name="presence1" />
<input type="hidden" id="presence2" name="presence2" />
<input type="hidden" id="presence3" name="presence3" />
<input type="hidden" id="presence4" name="presence4" />
<input type="hidden" id="presence5" name="presence5" />
<input type="hidden" id="presence6" name="presence6" />
<input type="hidden" id="presence7" name="presence7" />
<input type="hidden" id="presence8" name="presence8" />
<input type="hidden" id="presence9" name="presence9" />
<input type="hidden" id="presence10" name="presence10" />
<input type="hidden" id="presence11" name="presence11" />
<input type="hidden" id="presence12" name="presence12" />
<input type="hidden" id="presence13" name="presence13" />
<input type="hidden" id="presence14" name="presence14" />
<input type="hidden" id="presence15" name="presence15" />
<input type="hidden" id="presence16" name="presence16" />
<input type="hidden" id="presence17" name="presence17" />
<input type="hidden" id="presence18" name="presence18" />
<input type="hidden" id="presence19" name="presence19" />
<input type="hidden" id="presence20" name="presence20" />
<input type="hidden" id="presence21" name="presence21" />
<input type="hidden" id="presence22" name="presence22" />
<input type="hidden" id="presence23" name="presence23" />
<input type="hidden" id="presence24" name="presence24" />
<input type="hidden" id="presence25" name="presence25" />
<input type="hidden" id="presence26" name="presence26" />
<input type="hidden" id="presence27" name="presence27" />
<input type="hidden" id="presence28" name="presence28" />
<input type="hidden" id="presence29" name="presence29" />
<input type="hidden" id="presence30" name="presence30" />
<br /><label><span id="totalplus"> </span></label>
<br />

<label class="court">Début : <span>*</span></label>
<select name="h_debut1" id="h_debut1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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>
</select>
h
<select name="m_debut1" id="m_debut1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select><br />
<label class="court">Fin : <span>*</span></label>
<select name="h_fin1" id="h_fin1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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>
</select>
h
<select name="m_fin1" id="m_fin1" class="formulaire court" required="required" onChange="add_total(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</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="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select><br />
<div id="nuit1"><br /></div>
<label>Tâche :</label><br />
<span class="italic">Merci d'indiquer une seule tâche.</span><br />
<textarea id="tache1" name="tache1" class="formulaire" required="required" rows="8"></textarea>
</td></tr></table>
<br />
<div align="center"><input type="button" id="button_add" name="button_add"  onClick="add_horaire();" value="Ajouter un horaire" />
<input type="button" id="button_del" name="button_del" onClick="del_horaire();" value="Retirer le dernier horaire" />
</div>
<br />
<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>

je regarde le formulaire des notes ...

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 Jeu 25 Fév 2016 - 16:17

Ca fonctionne, c'est parfait. Merci

Phyliono
*****

Messages : 921
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 26 Fév 2016 - 16:35

J'ai trouvé un petit défaut sur les anciens formulaires à partir du calcul des récompenses...



Le marchand a fait 40 minutes (23h50 à 00h30), il devrait donc gagner 4 étoiles en débutant, sauf que c'est l'inverse là... Comment faire ?

Merci !

Phyliono
*****

Messages : 921
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 27 Fév 2016 - 22:32

J'ai refait un test directement d'après votre page HTML h16- , aveec les mêmes valeurs , et je n'ai pas votre résultat ...

le calcul a l'air correct ...

[image servimg]

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 27 Fév 2016 - 23:04

Bizarre en effet...

Phyliono
*****

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

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

Page 4 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