Personnalisation d'un formulaire HTML
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 5 sur 5 • Partagez
Page 5 sur 5 • 1, 2, 3, 4, 5
Personnalisation d'un formulaire HTML
Rappel du premier message :
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Tous les navigateurs
Capture d'écran du problème :
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.universiteuniverselle.com
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 :
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
Re: Personnalisation d'un formulaire HTML
On va tester différemment ...
remplacez :
remplacez :
- 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]";
- Code:
var time = Number(form.duree.value)/10;
var star = time;
var sun = time;
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]";
Re: Personnalisation d'un formulaire HTML
Ca fonctionne correctement, merci !
Une idée pour les notes ?
Une idée pour les notes ?
Re: Personnalisation d'un formulaire HTML
Désolé pour le temps de réponse ...
Le formulaire est presque prêt , il me reste le message d'envoi à créer et faire quelques tests d'envoi ...
Le formulaire est presque prêt , il me reste le message d'envoi à créer et faire quelques tests d'envoi ...
Re: Personnalisation d'un formulaire HTML
Pas de soucis merci !
Re: Personnalisation d'un formulaire HTML
Alors ... il y a eu pas mal de modifs ...
Au HTML :
- Une liste supplémentaire pour choisir le barème .
- La liste de date de début est pareil à la liste de date de fin . Il y a une condition dans le script d'envoi pour le cas où la liste de fin est différente de "vide" .
- Les champs "pseudo" seront obligatoirement remplis .
- La liste des notes s'affichera en fonction du barème (un tableau dans le script)
Au script :
- Un tableau pour les notes
- une fonction pour les notes suivant le choix du barème
- une fonction ajout / suppression de lignes
- une fonction qui compte le nombre d’élèves et qui renseigne un champ caché pour la valeur de la récompense
- une fonction d'envoi message ...
Au HTML :
- Une liste supplémentaire pour choisir le barème .
- La liste de date de début est pareil à la liste de date de fin . Il y a une condition dans le script d'envoi pour le cas où la liste de fin est différente de "vide" .
- Les champs "pseudo" seront obligatoirement remplis .
- La liste des notes s'affichera en fonction du barème (un tableau dans le script)
Au script :
- Un tableau pour les notes
- une fonction pour les notes suivant le choix du barème
- une fonction ajout / suppression de lignes
- une fonction qui compte le nombre d’élèves et qui renseigne un champ caché pour la valeur de la récompense
- une fonction d'envoi message ...
- Code:
<style>
#form_prof label{
font:bold 11px ubuntu, verdana;
display:block;text-align:center;
}
#form_prof .italic{
font:bold italic 10px ubuntu, verdana;
}
#form_prof select,#form_prof input[type=text]{
height:25px!important;margin:5px 6px 5px 0;padding:0 5px;
}
#form_prof .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://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 barème */
mesNotes = [];
mesNotes[0] = ["5"];
mesNotes[0][1] = [
["0/5"," - 0 :no: "],
["1/5"," - 0 :no: "],
["2/5"," - 1 :no: "],
["3/5"," - 2 :no: "],
["4/5"," - 3 :no: "],
["5/5"," - 3 :no: "]
];
mesNotes[1] = ["10"];
mesNotes[1][1] = [
["0/10"," - 0 :no: "],
["1/10"," - 0 :no: "],
["2/10"," - 0 :no: "],
["3/10"," - 1 :no: "],
["4/10"," - 1 :no: "],
["5/10"," - 2 :no: "],
["6/10"," - 2 :no: "],
["7/10"," - 2 :no: "],
["8/10"," - 3 :no: "],
["9/10"," - 3 :no: "],
["10/10"," - 3 :no: "]
];
mesNotes[2] = ["20"];
mesNotes[2][1] = [
["0/20"," - 0 :no: "],
["1/20"," - 0 :no: "],
["2/20"," - 0 :no: "],
["3/20"," - 0 :no: "],
["4/20"," - 0 :no: "],
["5/20"," - 1 :no: "],
["6/20"," - 1 :no: "],
["7/20"," - 1 :no: "],
["8/20"," - 1 :no: "],
["9/20"," - 1 :no: "],
["10/20"," - 2 :no: "],
["11/20"," - 2 :no: "],
["12/20"," - 2 :no: "],
["13/20"," - 2 :no: "],
["14/20"," - 2 :no: "],
["15/20"," - 3 :no: "],
["16/20"," - 3 :no: "],
["17/20"," - 3 :no: "],
["18/20"," - 3 :no: "],
["19/20"," - 3 :no: "],
["20/20"," - 3 :no: "]
];
/* changement de barème */
function change_bareme(strChoix)
{
document.post.note1.options.length = 0;
for(var x=0;x<mesNotes.length;x++)
{
if (mesNotes[x][0] == strChoix)
{
for(var y=0;y<mesNotes[x][1].length;y++)
{
opt = y===0?
new Option(mesNotes[x][1][y][0],mesNotes[x][1][y][0]+mesNotes[x][1][y][1],true,true):
new Option(mesNotes[x][1][y][0],mesNotes[x][1][y][0]+mesNotes[x][1][y][1],false,false);
document.post.note1.options[y] = opt;
}
}
}
}
// script du bouton ajout et suppression
var nb_lignes=2;
function add_prez()
{
if(document.getElementById("bareme").value==="")
{
alert("Choisissez un barème !");
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.setAttribute("required", "required");
input1.className = 'formulaire court eleve';
var espace = document.createTextNode(" ");
var select1 = document.createElement('select');
select1.id = 'note'+nb_lignes;
select1.name = 'note'+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";
$( "#note1 Option" ).clone().appendTo( "#note"+nb_lignes );
$("#bareme").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)
{
$("#bareme").removeAttr('disabled');
document.getElementById("button_del1").style.display = "none";
}
}
function recompense()
{
var eleve = document.getElementsByClassName("eleve");
if(eleve.length <= 5)
{
document.getElementById("star_mess").value ="1";
}
else if(eleve.length <= 10)
{
document.getElementById("star_mess").value ="2";
}
else if(eleve.length > 10)
{
document.getElementById("star_mess").value ="3";
}
}
function envoiMessage(form)
{
if(form.bareme.value=='')
{
alert('Vous devez choisir un barème');
return false;
}
else
if(form.activite.value=='')
{
alert('Vous devez indiquer une matière');
return false;
}
else if(form.d_debut.value=='')
{
alert('Choisissez une date de début');
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 ? " au " + form.d_fin.value:"") + '\n'
+ ":ps: Liste des notes :" + '\n';
for (var nb = 1; nb < nb_lignes; nb++)
{
var present = document.getElementById('present'+nb).value;
var note = document.getElementById('note'+nb).value;
txt_message += present + " - " + note + "\n";
}
txt_message += "[/size][/td][/tr][/table]" + '\n';
var money = Number(form.star_mess.value);
txt_message += "[table class='jaune' align='center' width='70%']"
+ "[tr][td][size=13]:av: Récompenses :\n"
+ "Professeur : "+ money +" :e: - "+ money +" :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 ;
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="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="bareme">Barème : <span style="color:red">*</span></label>
<select name="bareme" id="bareme" class="formulaire" onchange="change_bareme(this[this.selectedIndex].value)">
<option value="" style="display:none"></option>
<option value="5">Notes /5</option>
<option value="10">Notes /10</option>
<option value="20">Notes /20</option>
</select>
<br />
<br />
<label for="activite">Matière :<span style="color:red">*</span></label>
<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">Début :<span style="color:red">*</span></label>
<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">Fin :<span style="color:red">*</span></label>
<span class="italic">À remplir uniquement si le devoir dure plusieurs jours</span>
<br />
<select name="d_fin" id="d_fin" 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 /><input id="star_mess" value="1" type="hidden"/>
<br />
<label>Liste des notes :<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 eleve" placeholder="Pseudo" required="required" />
<select name="note1" id="note1" class="formulaire court">
<option>choisissez un barème</option></select>
</div>
</td>
<td style="vertical-align:bottom;width:55px;padding:5px 0">
<input type="button" id="button_add1" name="button_add1" onClick="add_prez();recompense();" />
<input type="button" id="button_del1" name="button_del1" onClick="del_prez();recompense();" 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>
Re: Personnalisation d'un formulaire HTML
Super merci beaucoup !
Alors j'ai essayé de faire les 4 autres formulaires qu'il me restait, je n'ai pas réussi pour l'un et l'autre il me manque quelque chose.
Déjà pour celui-ci, il faut faire comme les autres formulaires de présences, sauf qu'il n'y a pas de limite d'étoiles supplémentaires, ni d'étoiles de base. L'animateur choisit le nombre d'étoiles qu'il donne donc un simple champ input suffit à côté.
Pour le cadre Récompenses, c'est selon ce principe :
Merci d'avance !
Alors j'ai essayé de faire les 4 autres formulaires qu'il me restait, je n'ai pas réussi pour l'un et l'autre il me manque quelque chose.
Déjà pour celui-ci, il faut faire comme les autres formulaires de présences, sauf qu'il n'y a pas de limite d'étoiles supplémentaires, ni d'étoiles de base. L'animateur choisit le nombre d'étoiles qu'il donne donc un simple champ input suffit à côté.
Pour le cadre Récompenses, c'est selon ce principe :
- Animateur débutant : 3 étoiles + 1 soleil / 10 minutes
- Animateur titulaire : 6 étoiles + 1 soleil / 10 minutes
- Animateur certifié : 9 étoiles + 1 soleil / 10 minutes
- Code:
<script type="text/javascript">
function envoiMessage(form)
{
if(form.activite.value==' ')
{
alert('Vous devez indiquer une émission');
return false;
}
else if(form.date.value==' ')
{
alert('Vous devez indiquer une date');
return false;
}
else if(form.h_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.h_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='t_planning' width='70%' align='center'][tr][td][size=13]:em: Émission de radio « " + 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'
+ ":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="1133" />
<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des animateurs</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 lors de vos émissions.</span><br /><br />
<label for="activite"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Émission :</strong> <font color="red">*</font></span></label>
<br />
<input name="activite" id="activite" type="text" class="formulaire" style="height:15px;" value=" ">
<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 mars">01 mars</option>
<option value="02 mars">02 mars</option>
<option value="03 mars">03 mars</option>
<option value="04 mars">04 mars</option>
<option value="05 mars">05 mars</option>
<option value="06 mars">06 mars</option>
<option value="07 mars">07 mars</option>
<option value="08 mars">08 mars</option>
<option value="09 mars">09 mars</option>
<option value="10 mars">10 mars</option>
<option value="11 mars">11 mars</option>
<option value="12 mars">12 mars</option>
<option value="13 mars">13 mars</option>
<option value="14 mars">14 mars</option>
<option value="15 mars">15 mars</option>
<option value="16 mars">16 mars</option>
<option value="17 mars">17 mars</option>
<option value="18 mars">18 mars</option>
<option value="19 mars">19 mars</option>
<option value="20 mars">20 mars</option>
<option value="21 mars">21 mars</option>
<option value="22 mars">22 mars</option>
<option value="23 mars">23 mars</option>
<option value="24 mars">24 mars</option>
<option value="25 mars">25 mars</option>
<option value="26 mars">26 mars</option>
<option value="27 mars">27 mars</option>
<option value="28 mars">28 mars</option>
<option value="29 mars">29 mars</option>
<option value="30 mars">30 mars</option>
<option value="31 mars">31 mars</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="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 !
Re: Personnalisation d'un formulaire HTML
D'après votre sujet : http://www.universiteuniverselle.com/t1133-presences-des-animateurs-marsPhyliono a écrit:Déjà pour celui-ci, il faut faire comme les autres formulaires de présences, sauf qu'il n'y a pas de limite d'étoiles supplémentaires, ni d'étoiles de base. L'animateur choisit le nombre d'étoiles qu'il donne donc un simple champ input suffit à côté.
Il y a quand même une limite entre 1 et 10 par participants ...
Vous voulez donc un champs sans limites ? de 0 à l'infini ?
Re: Personnalisation d'un formulaire HTML
Oui il n'y a pas de limites finalement car tant que c'est justifié c'est bon !
Finalement, vous allez comprendre tous nos systèmes comme un ministre lol !
Merci d'avance !
Finalement, vous allez comprendre tous nos systèmes comme un ministre lol !
Merci d'avance !
Re: Personnalisation d'un formulaire HTML
S'il y a 0 étoiles , vous voulez quand même un affichage ? ça peut être supprimé ...
exemple , pseudo3 n'a pas d'étoiles :
pseudo1 - 1
pseudo2 - 1
pseudo3
pseudo4 - 2
pseudo5 - 1
pseudo6 - 4
exemple , pseudo3 n'a pas d'étoiles :
pseudo1 - 1
pseudo2 - 1
pseudo3
pseudo4 - 2
pseudo5 - 1
pseudo6 - 4
Re: Personnalisation d'un formulaire HTML
ah non il s'affiche pas, mais le champ doit être obligatoire un nombre supérieur ou égal à 1
Re: Personnalisation d'un formulaire HTML
On passe aux tests ?
- Code:
<style>
#form_anim label{
font:bold 11px ubuntu, verdana;
display:block;
text-align:center;
}
#form_anim select,#form_anim input[type=text],#form_anim input[type=number]{
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 type="text/javascript">
function change_duree()
{
var h_debut = Number(document.getElementById("h_debut").value);
var m_debut = Number(document.getElementById("m_debut").value);
var m_fin = Number(document.getElementById("m_fin").value);
var h_fin = Number(document.getElementById("h_fin").value);
var heure = h_fin - h_debut;
var minute;
if(m_debut>m_fin)
{
minute = (m_fin + 60) - m_debut;
var temps = ((heure-1)*60) + minute;
}
else
{
minute = m_fin - m_debut;
temps = (heure*60) + minute;
}
document.getElementById("duree").value = temps;
}
var nb_lignes=2;
function add_prez()
{
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 input2 = document.createElement('input');
input2.name = 'star'+nb_lignes;
input2.id = 'star'+nb_lignes;
input2.type = 'text';
input2.className = 'formulaire court';
input2.placeholder = "Nombre minimum : 1";
tab2.appendChild(div1);
div1.appendChild(input1);
div1.appendChild(espace);
div1.appendChild(input2);
document.getElementById("button_del1").style.display = "inline";
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) {
document.getElementById("button_del1").style.display = "none";}
}
function envoiMessage(form)
{
if(form.activite.value=='')
{
alert('Vous devez indiquer une émission');
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 de début valide');
return false;
}
else if(form.m_debut.value=='')
{
alert('Vous devez indiquer un horaire de début valide');
return false;
}
else if(form.h_fin.value=='')
{
alert('Vous devez indiquer un horaire de fin valide');
return false;
}
else if(form.m_fin.value=='')
{
alert('Vous devez indiquer un horaire de fin valide');
return false;
}
else if(form.duree.value<0)
{
alert('Vous devez indiquer un horaire de fin supérieur au début');
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]:em: Émission de radio « " + form.activite.value + " »" + '\n'
+ ":dt: " + form.date.value + '\n'
+ ":hr: " + form.h_debut.value + "h" + form.m_debut.value + " à " + form.h_fin.value + "h" + form.m_fin.value + '\n'
+ ":ps: Liste des gagnants et des présents :\n";
for (var nb = 1; nb < nb_lignes; nb++)
{
var present = document.getElementById('present'+nb).value;
var star = Number(document.getElementById('star'+nb).value);
if (star<1)
{
alert("Indiquez un nombre d'étoiles supérieur à 1");
return false;
}
else if (isNaN(star)==true)
{
alert("Indiquez un nombre d'étoiles avec chiffres");
return false;
}
else
{
txt_message += (present ? present + " - " + star + " :e: \n":"\n");
}
}
txt_message += "[/size][/td][/tr][/table]" + '\n';
var point = Number(form.duree.value)/10;
txt_message += "[table class='jaune' align='center' width='70%']"
+ "[tr][td][size=13]:av: Récompenses :\n"
+ "Débutant : "+(point*3)+" :e: - "+point+" :s: \n"
+ "Titularisé : "+(point*6)+" :e: - "+point+" :s: \n"
+ "Certifié : "+(point*9)+" :e: - "+point+" :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 ;
return true;
}
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="return(envoiMessage(this))" id="form_anim">
<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="1133" />
<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences des animateurs</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 lors de vos émissions.</span><br /><br />
<label for="activite">Nom de l'émission : <span style="color:red">*</span></label>
<input name="activite" id="activite" type="text" class="formulaire" value="">
<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 mars">01 mars</option>
<option value="02 mars">02 mars</option>
<option value="03 mars">03 mars</option>
<option value="04 mars">04 mars</option>
<option value="05 mars">05 mars</option>
<option value="06 mars">06 mars</option>
<option value="07 mars">07 mars</option>
<option value="08 mars">08 mars</option>
<option value="09 mars">09 mars</option>
<option value="10 mars">10 mars</option>
<option value="11 mars">11 mars</option>
<option value="12 mars">12 mars</option>
<option value="13 mars">13 mars</option>
<option value="14 mars">14 mars</option>
<option value="15 mars">15 mars</option>
<option value="16 mars">16 mars</option>
<option value="17 mars">17 mars</option>
<option value="18 mars">18 mars</option>
<option value="19 mars">19 mars</option>
<option value="20 mars">20 mars</option>
<option value="21 mars">21 mars</option>
<option value="22 mars">22 mars</option>
<option value="23 mars">23 mars</option>
<option value="24 mars">24 mars</option>
<option value="25 mars">25 mars</option>
<option value="26 mars">26 mars</option>
<option value="27 mars">27 mars</option>
<option value="28 mars">28 mars</option>
<option value="29 mars">29 mars</option>
<option value="30 mars">30 mars</option>
<option value="31 mars">31 mars</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" onchange="change_duree()">
<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="24">00</option>
<option value="25">01</option>
<option value="26">02</option>
</select>
<select name="m_debut" id="m_debut" class="formulaire court" onchange="change_duree()">
<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="fin">Fin : <span style="color:red">*</span></label>
<select name="h_fin" id="h_fin" class="formulaire court" onchange="change_duree()">
<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="24">00</option>
<option value="25">01</option>
<option value="26">02</option>
</select>
<select name="m_fin" id="m_fin" class="formulaire court" onchange="change_duree()">
<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 /><input type="hidden" id="duree" />
<br />
<label>Liste des présences - nombre d'étoiles <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" />
<input type="text" name="star1" id="star1" placeholder="Nombre minimum : 1" class="formulaire court" />
</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>
Re: Personnalisation d'un formulaire HTML
Super, c'est nickel merci beaucoup.
Pour ce formulaire, c'est moins compliqué je pense.
Simplement, s'il s'agit d'une réunion, que ce soit une liste déroulante qui apparaisse à côté à la place du champ input c'est tout (je la complèterai).
Merci !
Pour ce formulaire, c'est moins compliqué je pense.
Simplement, s'il s'agit d'une réunion, que ce soit une liste déroulante qui apparaisse à côté à la place du champ input c'est tout (je la complèterai).
- Code:
<script type="text/javascript">
function envoiMessage(form)
{
if(form.activite.value==' ')
{
alert('Vous devez indiquer un événement');
return false;
}
else if(form.specialite.value==' ')
{
alert('Vous devez indiquer un événement');
return false;
}
else if(form.date.value==' ')
{
alert('Vous devez indiquer une date');
return false;
}
else if(form.h_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.h_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='bleu' width='70%' align='center'][tr][td][size=13]" + form.activite.value + "" + form.specialite.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'
+ ":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="1134" />
<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences aux événements</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 membres présents aux événements.</span><br /><br />
<label for="activite"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Événement :</strong> <font color="red">*</font></span></label>
<br />
<select name="activite" id="activite" class="formulaire" style="height:25px;width:195px;">
<option value=" "></option>
<option value=":tm: Événement ">Événement</option>
<option value=":rn: Réunion des ">Réunion</option>
<option value=":ma: Mariage de ">Mariage</option>
<option value=":dv: Divorce de ">Divorce</option>
<option value=":pc: Procès de ">Procès</option>
</select>
<input name="specialite" id="specialite" type="text" class="formulaire" style="height:15px;width:185px;margin-left:5px;" value=" ">
<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:25px;">
<option value=" ">Date</option>
<option value="01 mars">01 mars</option>
<option value="02 mars">02 mars</option>
<option value="03 mars">03 mars</option>
<option value="04 mars">04 mars</option>
<option value="05 mars">05 mars</option>
<option value="06 mars">06 mars</option>
<option value="07 mars">07 mars</option>
<option value="08 mars">08 mars</option>
<option value="09 mars">09 mars</option>
<option value="10 mars">10 mars</option>
<option value="11 mars">11 mars</option>
<option value="12 mars">12 mars</option>
<option value="13 mars">13 mars</option>
<option value="14 mars">14 mars</option>
<option value="15 mars">15 mars</option>
<option value="16 mars">16 mars</option>
<option value="17 mars">17 mars</option>
<option value="18 mars">18 mars</option>
<option value="19 mars">19 mars</option>
<option value="20 mars">20 mars</option>
<option value="21 mars">21 mars</option>
<option value="22 mars">22 mars</option>
<option value="23 mars">23 mars</option>
<option value="24 mars">24 mars</option>
<option value="25 mars">25 mars</option>
<option value="26 mars">26 mars</option>
<option value="27 mars">27 mars</option>
<option value="28 mars">28 mars</option>
<option value="29 mars">29 mars</option>
<option value="30 mars">30 mars</option>
<option value="31 mars">31 mars</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:25px;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:25px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<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 />
<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:25px;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:25px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<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 />
<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 !
Re: Personnalisation d'un formulaire HTML
Phyliono a écrit:Super, c'est nickel merci beaucoup.
Pour ce formulaire, c'est moins compliqué je pense.
Simplement, s'il s'agit d'une réunion, que ce soit une liste déroulante qui apparaisse à côté à la place du champ input c'est tout (je la complèterai).
- Code:
<script type="text/javascript">
function envoiMessage(form)
{
if(form.activite.value==' ')
{
alert('Vous devez indiquer un événement');
return false;
}
else if(form.specialite.value==' ')
{
alert('Vous devez indiquer un événement');
return false;
}
else if(form.date.value==' ')
{
alert('Vous devez indiquer une date');
return false;
}
else if(form.h_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_debut.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.h_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_fin.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else
{
// Créer un message à partir des informations fournies
var txt_message = "[table class='bleu' width='70%' align='center'][tr][td][size=13]" + form.activite.value + "" + form.specialite.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'
+ ":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="1134" />
<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences aux événements</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 membres présents aux événements.</span><br /><br />
<label for="activite"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Événement :</strong> <font color="red">*</font></span></label>
<br />
<select name="activite" id="activite" class="formulaire" style="height:25px;width:195px;">
<option value=" "></option>
<option value=":tm: Événement ">Événement</option>
<option value=":rn: Réunion des ">Réunion</option>
<option value=":ma: Mariage de ">Mariage</option>
<option value=":dv: Divorce de ">Divorce</option>
<option value=":pc: Procès de ">Procès</option>
</select>
<input name="specialite" id="specialite" type="text" class="formulaire" style="height:15px;width:185px;margin-left:5px;" value=" ">
<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:25px;">
<option value=" ">Date</option>
<option value="01 mars">01 mars</option>
<option value="02 mars">02 mars</option>
<option value="03 mars">03 mars</option>
<option value="04 mars">04 mars</option>
<option value="05 mars">05 mars</option>
<option value="06 mars">06 mars</option>
<option value="07 mars">07 mars</option>
<option value="08 mars">08 mars</option>
<option value="09 mars">09 mars</option>
<option value="10 mars">10 mars</option>
<option value="11 mars">11 mars</option>
<option value="12 mars">12 mars</option>
<option value="13 mars">13 mars</option>
<option value="14 mars">14 mars</option>
<option value="15 mars">15 mars</option>
<option value="16 mars">16 mars</option>
<option value="17 mars">17 mars</option>
<option value="18 mars">18 mars</option>
<option value="19 mars">19 mars</option>
<option value="20 mars">20 mars</option>
<option value="21 mars">21 mars</option>
<option value="22 mars">22 mars</option>
<option value="23 mars">23 mars</option>
<option value="24 mars">24 mars</option>
<option value="25 mars">25 mars</option>
<option value="26 mars">26 mars</option>
<option value="27 mars">27 mars</option>
<option value="28 mars">28 mars</option>
<option value="29 mars">29 mars</option>
<option value="30 mars">30 mars</option>
<option value="31 mars">31 mars</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:25px;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:25px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<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 />
<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:25px;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:25px;width:195px;margin-left:5px;">
<option value=" ">Minutes</option>
<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 />
<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 !
Coucou , bonsoir ,
Je reviens (enfin) vers vous pour la suite ...
Question : c'est bien en haut du formulaire qu'on modifie le input en liste d'options ?
... et en bas , on modifie avec 1 input ? 2 input ?
Ou alors c'est en haut , 2 inputs ? et la liste en bas , à coté de l'input ?
Re: Personnalisation d'un formulaire HTML
Je ne comprends pas, comment ça ?
Merci d'avance.
Merci d'avance.
Re: Personnalisation d'un formulaire HTML
Votre demande est de remplacer un input par un select ...
Ce remplacement devra-t-il être fait au niveau des champs "évènement" , ou au niveau des champs "présence" ?
Ce remplacement devra-t-il être fait au niveau des champs "évènement" , ou au niveau des champs "présence" ?
Re: Personnalisation d'un formulaire HTML
Au niveau du champ Evenement, à côté de la liste.
Merci d'avance !!
Merci d'avance !!
Re: Personnalisation d'un formulaire HTML
petit essai :
- Code:
<style>
#form_event label{
font:bold 11px ubuntu, verdana;
display:block;
text-align:center;
}
#form_event select,#form_event input[type=text],#form_event input[type=number]{
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://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 réunion - choix2 */
monEvent = [];
monEvent[0] = [":rn: Réunion "];
monEvent[0][1] = [
"des représentants",
"des ministres",
"des professeurs",
"des anciens",
"du clan des siciliens ?",
];
var choix22 ="de XXh00 à XXh00";
/* placeholder des champs suivant le choix */
var choix11 ="ex: Disney";
var choix12 ="ex: organisateur (facultatif)";
var choix32 ="ex: organisateur (facultatif)";
var choix31 ="de pseudo1 et pseudo2";
var choix42 ="ex: témoin (facultatif)";
var choix41 ="de pseudo1 et pseudo2";
var choix52 ="ex: invité (facultatif)";
var choix51 ="de pseudo1 et pseudo2";
var choix62 ="ex: avocat , juge ...";
var choix61 ="de pseudo1";
/* changement d'évènement */
function change_event(strChoix)
{
var star = document.getElementById("event");
var reunion = document.getElementById("reunion");
var spec = document.getElementById("star1");
for(var x=0;x<monEvent.length;x++)
{
if (monEvent[x][0] == strChoix)
{
for(var y=0;y<monEvent[x][1].length;y++)
{
opt = y===0?
new Option(monEvent[x][1][y],monEvent[x][1][y],true,true):
new Option(monEvent[x][1][y],monEvent[x][1][y],false,false);
if (post.activite.options[2].selected)
{
star.style.display = "none";
reunion.style.display = "inline-block";
spec.placeholder = choix22;
document.post.reunion.options[y] = opt;
}
}
}
}
if (post.activite.options[1].selected||
post.activite.options[3].selected||
post.activite.options[4].selected||
post.activite.options[5].selected||
post.activite.options[6].selected)
{
star.style.display = "inline-block";
reunion.style.display = "none";
}
if (post.activite.options[1].selected)
{star.placeholder = choix11;
spec.placeholder = choix12;}
else if (post.activite.options[3].selected)
{star.placeholder = choix31;
spec.placeholder = choix32;}
else if (post.activite.options[4].selected)
{star.placeholder = choix41;
spec.placeholder = choix42;}
else if (post.activite.options[5].selected)
{star.placeholder = choix51;
spec.placeholder = choix52;}
else if (post.activite.options[6].selected)
{star.placeholder = choix61;
spec.placeholder = choix62;}
}
/* Ajout de présences */
var nb_lignes=2;
function add_prez()
{
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 input2 = document.createElement('input');
input2.name = 'star'+nb_lignes;
input2.id = 'star'+nb_lignes;
input2.type = 'text';
input2.className = 'formulaire court';
input2.placeholder = "event";
if (document.getElementById("activite").value===""){
alert("Choisissez un évènement");
return false;
}
else
{tab2.appendChild(div1);
div1.appendChild(input1);
div1.appendChild(espace);
div1.appendChild(input2);
if (post.activite.options[1].selected)
{input2.placeholder = choix12;}
else if (post.activite.options[2].selected)
{input2.placeholder = choix22;}
else if (post.activite.options[3].selected)
{input2.placeholder = choix32;}
else if (post.activite.options[4].selected)
{input2.placeholder = choix42;}
else if (post.activite.options[5].selected)
{input2.placeholder = choix52;}
else if (post.activite.options[6].selected)
{input2.placeholder = choix62;}
}
document.getElementById("button_del1").style.display = "inline";
$("#activite").attr('disabled', 'disabled');
$( "#reunion Option" ).clone().appendTo( "#reunion"+nb_lignes );
nb_lignes++;
}
/* Retrait d'une présence */
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) {
$("#activite").removeAttr('disabled');
document.getElementById("button_del1").style.display = "none";}
}
function envoiMessage(form)
{
if(form.activite.value==='')
{
alert('Vous devez indiquer un événement');
return false;
}
else if(
(post.activite.options[1].selected||
post.activite.options[3].selected||
post.activite.options[4].selected||
post.activite.options[5].selected||
post.activite.options[6].selected)&&form.event.value==='')
{
alert("Vous devez indiquer quel genre d'événement");
return false;
}
else if(form.date.value==='')
{
alert('Vous devez indiquer une date');
return false;
}
else if(form.h_debut.value==='')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_debut.value==='')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.h_fin.value==='')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.m_fin.value==='')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else
{
// Créer un message à partir des informations fournies
var genre ="";
if (post.activite.options[3].selected)
{genre = form.reunion.value;}
else
{genre = form.event.value;}
var txt_message = "[table class='bleu' width='70%' align='center'][tr][td][size=13]" + form.activite.value + "" + genre + '\n'
+ ":dt: " + form.date.value + '\n'
+ ":hr: " + form.h_debut.value + "h" + form.m_debut.value
+ " à " + form.h_fin.value + "h" + form.m_fin.value + '\n'
+ ":ps: Liste des présences :" + '\n';
for (var iter = 1; iter < nb_lignes; iter++)
{
var present = document.getElementById('present'+iter).value;
var star = document.getElementById('star'+iter).value;
txt_message += (present ? present +" (- "+ star +' ) \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_event">
<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="1134" />
<table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
<tr>
<th nowrap="nowrap" width="100%" class="secondarytitle">
<h2>Présences aux événements</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 membres présents aux événements.</span><br /><br />
<label for="activite">Événement : <font color="red">*</font></label>
<select name="activite" id="activite" class="formulaire court" onchange="change_event(this[this.selectedIndex].value)">
<option value=""></option>
<option value=":tm: Événement ">Événement</option>
<option value=":rn: Réunion ">Réunion</option>
<option value=":ma: Mariage (fête) ">Mariage (fête)</option>
<option value=":ma: Mariage (cérémonie) ">Mariage (cérémonie)</option>
<option value=":dv: Divorce ">Divorce</option>
<option value=":pc: Procès ">Procès</option>
</select>
<input type="text" name="event" id="event" placeholder="Choisissez un évènement" class="formulaire court" />
<select name="reunion" id="reunion" class="formulaire court" style="display:none">
<option>choisissez un event</option></select>
<br />
<br />
<label for="date">Date : <font color="red">*</font></label>
<select name="date" id="date" class="formulaire">
<option value="">Date</option>
<option value="01 mars">01 mars</option>
<option value="02 mars">02 mars</option>
<option value="03 mars">03 mars</option>
<option value="04 mars">04 mars</option>
<option value="05 mars">05 mars</option>
<option value="06 mars">06 mars</option>
<option value="07 mars">07 mars</option>
<option value="08 mars">08 mars</option>
<option value="09 mars">09 mars</option>
<option value="10 mars">10 mars</option>
<option value="11 mars">11 mars</option>
<option value="12 mars">12 mars</option>
<option value="13 mars">13 mars</option>
<option value="14 mars">14 mars</option>
<option value="15 mars">15 mars</option>
<option value="16 mars">16 mars</option>
<option value="17 mars">17 mars</option>
<option value="18 mars">18 mars</option>
<option value="19 mars">19 mars</option>
<option value="20 mars">20 mars</option>
<option value="21 mars">21 mars</option>
<option value="22 mars">22 mars</option>
<option value="23 mars">23 mars</option>
<option value="24 mars">24 mars</option>
<option value="25 mars">25 mars</option>
<option value="26 mars">26 mars</option>
<option value="27 mars">27 mars</option>
<option value="28 mars">28 mars</option>
<option value="29 mars">29 mars</option>
<option value="30 mars">30 mars</option>
<option value="31 mars">31 mars</option>
</select>
<br />
<br />
<label for="debut">Début : <font color="red">*</font></label>
<select name="h_debut" id="h_debut" class="formulaire court">
<option value="">Heures</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
</select>
<select name="m_debut" id="m_debut" class="formulaire court">
<option value="">Minutes</option>
<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 />
<br />
<label for="fin">Fin : <font color="red">*</font></label>
<select name="h_fin" id="h_fin" class="formulaire court">
<option value="">Heures</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
</select>
<select name="m_fin" id="m_fin" class="formulaire court">
<option value="">Minutes</option>
<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 />
<br />
<label for="presence">Liste des présences</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" />
<input name="star1" id="star1" type="text" class="formulaire court" value="" placeholder="Choisissez un évènement" />
</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 />
<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>
Re: Personnalisation d'un formulaire HTML
Merci à un modérateur d'archiver ce topic en attendant le retour du demandeur ...
Re: Personnalisation d'un formulaire HTML
Bonjour @Scoubifitz,Scoubifitz a écrit:Merci à un modérateur d'archiver ce topic en attendant le retour du demandeur ...
C'est fait.
Cordialement.
Page 5 sur 5 • 1, 2, 3, 4, 5
Sujets similaires
» Formulaire HTML
» Formulaire HTML
» Formulaire HTML
» Formulaire HTML
» Formulaire de présentation [HTML]
» Formulaire HTML
» Formulaire HTML
» Formulaire HTML
» Formulaire de présentation [HTML]
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 5 sur 5
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum