Personnalisation d'un formulaire HTML

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

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

Résolu Personnalisation d'un formulaire HTML

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

Rappel du premier message :

Détails techniques


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

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

Description du problème

Bonjour,

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

Merci d'avance!

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

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

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


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

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Sam 16 Jan 2016 - 0:45

up

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Sam 16 Jan 2016 - 23:33

Désolé pour le temps de réponse ...

En séparant les lignes dans le tableau et en appelant la première partie pour la liste et en cumulant les deux pour la value ...

Code:
<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 ",""]
];
 
/* 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;
         }
      }
   }
}

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

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

Scoubifitz
+ Hyperactif +

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Dim 17 Jan 2016 - 20:53

Merci super !

Je vais continuer d'autres formulaires... Smile

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

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

Bientôt (désolé)

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Dim 31 Jan 2016 - 1:35

Bonsoir, excusez-moi de cette attente, je n'avais pas le temps...

Pour ce formulaire, j'aimerais reprendre le même principe un champ input texte pour chaque pseudo avec le + mais à côté une petite liste à côté de chaque pseudo. C'est assez compliqué à expliquer, voici la règle (les cours durent 60 minutes maximum) :
Dans les cours de 10 ou 20 minutes : les étudiants gagnent seulement 1 étoile de présence.

Dans les cours de 30 ou 40 minutes : les étudiants gagnent 2 étoiles de présence et le professeur peut faire gagner 1 étoile supplémentaire à 3 étudiants (à indiquer dans la liste des présents).

Dans les cours de 50 ou 60 minutes : les étudiants gagnent 3 étoiles de présence et le professeur peut faire gagner entre 1 et 2 étoiles supplémentaires à 6 étudiants (à indiquer dans la liste des présents).

Il faudrait déjà que lorsqu'ils attribuent des étoiles supplémentaires (seulement pour les cours de 30 à 60 min), les champs sont bloqués lorsqu'ils ont déjà attribués au nombre maximum de personnes (3 ou 6). Ensuite, la liste s'adapte : si le cours dure entre 30 et 40 min, ils ne pourront choisir que 1 dans la liste, et si le cours dure entre 50 et 60 min, ils pourront choisir 1 et 2.

En plus de ça, j'aimerais que lorsqu'on envoie le formulaire, sur le message, cela affiche à côté de chaque pseudo entre parenthèses son nombre d'étoiles supplémentaires additionnées au nombre d'étoiles de base (1 pour un cours de 10 à 20min, 2 pour un cours de 30 à 40min et 3 pour un cours de 50 à 60min).

Je ne sais pas si vous comprenez... c'est peut-être trop difficile...

Code:
<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 ",""]
];
 
/* 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;
        }
      }
  }
}

function envoiMessage(form)
{
if(form.activite.value==' ')
{
alert('Vous devez choisir une matière');
return false;
}
else if(form.date.value==' ')
{
alert('Vous devez indiquer une date');
return false;
}
else if(form.h_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.h_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.lieu.value==' ')
{
alert('Vous devez indiquer un lieu');
return false;
}
else
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:cr: " + form.activite.value + '\n'
+ ":dt: " + form.date.value + '\n'
+ ":hr: " + form.h_debut.value + "" + form.m_debut.value + " à " + form.h_fin.value + "" + form.m_fin.value + '\n'
+ ":lu: " + form.lieu.value + '\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="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"><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;" onchange="jeu_onchange(this[this.selectedIndex].value)">
<option value=" "></option>
<option value="Cours d'art">Art</option>
<option value="Cours d'astronomie">Astronomie</option>
<option value="Cours de bienséance">Bienséance</option>
<option value="Cours de botanique">Botanique</option>
<option value="Cours de cinéma">Cinéma</option>
<option value="Cours de cuisine">Cuisine</option>
<option value="Cours d'écriture">Écriture</option>
<option value="Cours d'esthétique">Esthétique</option>
<option value="Cours de géographie">Géographie</option>
<option value="Cours d'habbologie">Habbologie</option>
<option value="Cours d'histoire">Histoire</option>
<option value="Cours d'informatique">Informatique</option>
<option value="Cours de journalisme">Journalisme</option>
<option value="Cours de langues">Langues</option>
<option value="Cours de littérature">Littérature</option>
<option value="Cours de mathématiques">Mathématiques</option>
<option value="Cours de médecine">Médecine</option>
<option value="Cours de mode">Mode</option>
<option value="Cours de musique">Musique</option>
<option value="Cours de philosophie">Philosophie</option>
<option value="Cours de psychologie">Psychologie</option>
<option value="Cours de sciences">Sciences</option>
<option value="Cours de société">Société</option>
<option value="Cours de technologie">Technologie</option>
</select>
<br />
<br />
<label for="date"><span style="font-family: ubuntu, verdana;font-size:11px;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 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select>
<br />
<br />
<label for="debut"><span style="font-family: ubuntu, verdana;font-size:11px;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 court" style="height:25px;">
<option value=" ">Choisissez une matière</option></select>
<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="center" nowrap="nowrap" class="modgen modadmin">
<input name="post" type="submit" value=" " class="formulaire bouton_envoyer" />
</td>
</tr>
</table>
</form>

Merci d'avance !

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Lun 1 Fév 2016 - 21:20

up

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mar 2 Fév 2016 - 22:16

up

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mer 3 Fév 2016 - 22:10

up

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Ven 5 Fév 2016 - 16:40

up

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Sam 6 Fév 2016 - 16:39

up

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Dim 7 Fév 2016 - 18:30

up

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Mer 10 Fév 2016 - 20:43

up

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Jeu 11 Fév 2016 - 20:53

up

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Ven 12 Fév 2016 - 23:41

up

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Lun 15 Fév 2016 - 20:36

up

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Mer 17 Fév 2016 - 0:11

@Phyliono a écrit:Bonsoir, excusez-moi de cette attente, je n'avais pas le temps...

Pour ce formulaire, j'aimerais reprendre le même principe un champ input texte pour chaque pseudo avec le + mais à côté une petite liste à côté de chaque pseudo. C'est assez compliqué à expliquer, voici la règle (les cours durent 60 minutes maximum) :
Dans les cours de 10 ou 20 minutes : les étudiants gagnent seulement 1 étoile de présence.

Dans les cours de 30 ou 40 minutes : les étudiants gagnent 2 étoiles de présence et le professeur peut faire gagner 1 étoile supplémentaire à 3 étudiants (à indiquer dans la liste des présents).

Dans les cours de 50 ou 60 minutes : les étudiants gagnent 3 étoiles de présence et le professeur peut faire gagner entre 1 et 2 étoiles supplémentaires à 6 étudiants (à indiquer dans la liste des présents).

Il faudrait déjà que lorsqu'ils attribuent des étoiles supplémentaires (seulement pour les cours de 30 à 60 min), les champs sont bloqués lorsqu'ils ont déjà attribués au nombre maximum de personnes (3 ou 6). Ensuite, la liste s'adapte : si le cours dure entre 30 et 40 min, ils ne pourront choisir que 1 dans la liste, et si le cours dure entre 50 et 60 min, ils pourront choisir 1 et 2.

En plus de ça, j'aimerais que lorsqu'on envoie le formulaire, sur le message, cela affiche à côté de chaque pseudo entre parenthèses son nombre d'étoiles supplémentaires additionnées au nombre d'étoiles de base (1 pour un cours de 10 à 20min, 2 pour un cours de 30 à 40min et 3 pour un cours de 50 à 60min).

Je ne sais pas si vous comprenez... c'est peut-être trop difficile...

Merci d'avance !

Bonsoir ,
j'ai eu très peu de temps pour ce projet ...

Presque tout est faisable , sauf cette partie :

Il faudrait déjà que lorsqu'ils attribuent des étoiles supplémentaires (seulement pour les cours de 30 à 60 min), les champs sont bloqués lorsqu'ils ont déjà attribués au nombre maximum de personnes (3 ou 6). Ensuite, la liste s'adapte : si le cours dure entre 30 et 40 min, ils ne pourront choisir que 1 dans la liste, et si le cours dure entre 50 et 60 min, ils pourront choisir 1 et 2.

Il est compliqué , voire impossible de "bloquer" par une fonction , des champs créés dynamiquement par une fonction , surtout que ces champs peuvent être retirés par une autre fonction ... Une usine à gaz ...

tout le reste est faisable ...

Pour l'affichage dans un message , on va prendre un (mauvais) exemple :
http://www.universiteuniverselle.com/t789p230-presences-des-professeurs-janvier#20203



On devrait donc avoir 2 étoiles par élève + 1 étoile pour 3 des élèves , puisque c'est un cours d'une demi-heure ...

lequel des deux serait le plus adapté ?





Scoubifitz
+ Hyperactif +

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Phyliono le Dim 21 Fév 2016 - 2:39

Bonsoir,

Merci de ta réponse, tu as compris le principe oui mais il n'y a pas besoin de rajouter l'image de l'étoile à chaque fois. On peut simplement mettre à droite du pseudo :

Sweetlly - 3
-Mezinho - 3
Kevinator. - 2
Meiika. - 2
taurine-241197 - 3

Si tu ne peux pas faire la partie du sujet qui bloque le champ, tant pis, ce n'est pas bien grave...

Merci beaucoup en espérant que ça se réalise!

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Lun 22 Fév 2016 - 0:39

voilà !^^

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_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 janvier">01 janvier</option>
<option value="02 janvier">02 janvier</option>
<option value="03 janvier">03 janvier</option>
<option value="04 janvier">04 janvier</option>
<option value="05 janvier">05 janvier</option>
<option value="06 janvier">06 janvier</option>
<option value="07 janvier">07 janvier</option>
<option value="08 janvier">08 janvier</option>
<option value="09 janvier">09 janvier</option>
<option value="10 janvier">10 janvier</option>
<option value="11 janvier">11 janvier</option>
<option value="12 janvier">12 janvier</option>
<option value="13 janvier">13 janvier</option>
<option value="14 janvier">14 janvier</option>
<option value="15 janvier">15 janvier</option>
<option value="16 janvier">16 janvier</option>
<option value="17 janvier">17 janvier</option>
<option value="18 janvier">18 janvier</option>
<option value="19 janvier">19 janvier</option>
<option value="20 janvier">20 janvier</option>
<option value="21 janvier">21 janvier</option>
<option value="22 janvier">22 janvier</option>
<option value="23 janvier">23 janvier</option>
<option value="24 janvier">24 janvier</option>
<option value="25 janvier">25 janvier</option>
<option value="26 janvier">26 janvier</option>
<option value="27 janvier">27 janvier</option>
<option value="28 janvier">28 janvier</option>
<option value="29 janvier">29 janvier</option>
<option value="30 janvier">30 janvier</option>
<option value="31 janvier">31 janvier</option>
</select>
<br />
<br />
<label for="debut">Début : <span style="color:red">*</span></label>
<select name="h_debut" id="h_debut" class="formulaire court">
<option value="" 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>
</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 Lun 22 Fév 2016 - 0:45

C'est superbe ! Juste, il n'y a pas possibilité de laisser le champ "Fin :" pour l'heure de fin et que ça calcule automatiquement la durée sans qu'on le voit ?

Merci d'avance!

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Lun 22 Fév 2016 - 1:03

?

L'heure de fin est calculée à partir de la durée et retransmise dans le message envoyé sous la forme :hr: 10h20 à 11h10 ...

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 - 1:06

Oui j'ai bien vu, mais s'ils pouvaient choisir plutôt l'heure de fin (ce qui revient au même certes) mais cela leur permettrait de s'y retrouver plus facilement (ils auront juste à retranscrire mot à mot ce qu'ils ont mis dans le planning). Disons que nous avons des utilisateurs "noob" donc il faut qu'ils puissent comprendre facilement...

Si vous ne pouvez pas tant pis, c'est le seul petit bémol de ce formulaire

Merci beaucoup

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Lun 22 Fév 2016 - 1:31

Comme le choix de la durée influence le nombre d'étoiles à distribuer , c'est difficile de faire autrement .

Je pense que même les plus "noob" comprendront le principe : durée => heure de fin ...

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 - 1:33

Donc ce n'est pas possible ? Ca peut pas calculer la durée (comme avant avec un autre formulaire) et ensuite adapter sans qu'elle s'affiche ?

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Lun 22 Fév 2016 - 1:41

Prenons le problème à l'envers ...

Imaginons que l'affichage du formulaire soit :
heure de début = heure + minutes
heure de fin = heure + minutes

Un script pourrait calculer la différence entre les 2 horaires et distribuer les étoiles en conséquence ...

Mais un "Noob" pourrait mettre une heure de fin plus grande que les 60 mn autorisées , ou pire , une heure de fin antérieure à l'heure de début ...

Il faudrait donc encore un script pour interdire cela , etc ...

Un formulaire se doit d'être efficace , non ?

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 - 1:42

Non ça ce n'est pas possible car ils ne peuvent pas faire des cours de + de 60 minutes car sur le planning ils sont limités à ça (ils postent déjà sur un autre formulaire avant leur cours) donc là ils ont juste à retranscrire.

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Lun 22 Fév 2016 - 1:50

Il y a quand même une différence entre ce qu'ils ne peuvent pas faire , par ce vous avez édicté des règles ou un planning ,
et ce que le formulaire les autorise à faire .

Je vais voir ce que je peux faire ...

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 - 1:51

Si tu ne peux vraiment pas le faire tant pis, je me débrouillerai autrement !

Tiens moi au courant.

Merci beaucoup pour ton investissement.

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Lun 22 Fév 2016 - 2:03

Tout le script est basé sur la durée , que ce soit le message d'information , le déclenchement des différentes listes d'options d'étoiles , ou le calcul de l'heure de fin ...

ça va être beaucoup plus compliqué de faire le chemin inverse ...

je ne vois pas encore comment mettre les listes d'options à coté du pseudo si l'heure et les minutes de fin ne sont pas activées (dans la bonne tranche horaire en plus) ...

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:12

Abandonnons alors ! Je m'en sortirai bien avec ça merci beaucoup, je suis en cours d'un autre formulaire, je vous tiens au courant (à peu près similaires à 2 anciens).

Il y a juste un défaut : ça affiche 14h0 ou 0h40 (il faudrait 14h00 et 00h40)...

Merci beaucoup.

Phyliono
*****

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz le Lun 22 Fév 2016 - 2:23

Remplacez cette partie :

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_fin = 24)
{
h_fin = 00;
}

par:

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 = 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.

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