Personnalisation d'un formulaire HTML

3 participants

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

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

Résolu Personnalisation d'un formulaire HTML

Message par Phyliono 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

Phyliono
Membre habitué

Messages : 1304
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 Sam 27 Fév 2016 - 23:25

On va tester différemment ...

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]";
par :
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]";
... et refaites un essai .
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 Dim 28 Fév 2016 - 3:11

Ca fonctionne correctement, merci !

Une idée pour les notes ?
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Lun 29 Fév 2016 - 15:48

up
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Lun 29 Fév 2016 - 18:41

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

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 Lun 29 Fév 2016 - 19:17

Pas de soucis merci !
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Mar 1 Mar 2016 - 7:20

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

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

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 Mar 1 Mar 2016 - 18:49

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 :
- 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 !
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Mer 2 Mar 2016 - 19:44

Phyliono 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é.
D'après votre sujet : http://www.universiteuniverselle.com/t1133-presences-des-animateurs-mars
Il y a quand même une limite entre 1 et 10 Like a Star @ heaven par participants ...

Vous voulez donc un champs sans limites ? de 0 à l'infini ? Shocked


Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 Mer 2 Mar 2016 - 20:42

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 !
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Mer 2 Mar 2016 - 21:47

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 Like a Star @ heaven
pseudo2 - 1 Like a Star @ heaven
pseudo3
pseudo4 - 2 Like a Star @ heaven
pseudo5 - 1 Like a Star @ heaven
pseudo6 - 4 Like a Star @ heaven
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 Mer 2 Mar 2016 - 22:35

ah non il s'affiche pas, mais le champ doit être obligatoire un nombre supérieur ou égal à 1
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Mer 2 Mar 2016 - 23:17

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

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 Jeu 3 Mar 2016 - 4:12

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 !
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Sam 5 Mar 2016 - 16:38

up
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Lun 7 Mar 2016 - 17:41

up
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Jeu 10 Mar 2016 - 23:39

up
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Dim 13 Mar 2016 - 17:57

up
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Mar 15 Mar 2016 - 20:09

up
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Mer 16 Mar 2016 - 23:34

up
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Sam 19 Mar 2016 - 16:37

up
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Lun 21 Mar 2016 - 18:33

up
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Jeu 24 Mar 2016 - 21:47

up
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Sam 26 Mar 2016 - 22:58

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 ?
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 Mar 29 Mar 2016 - 21:36

Je ne comprends pas, comment ça ?

Merci d'avance.
Phyliono

Phyliono
Membre habitué

Messages : 1304
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 Mar 29 Mar 2016 - 21:44

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

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 Ven 1 Avr 2016 - 9:46

Au niveau du champ Evenement, à côté de la liste.

Merci d'avance !!
Phyliono

Phyliono
Membre habitué

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Scoubifitz Dim 3 Avr 2016 - 18:27

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

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 Scoubifitz Dim 10 Avr 2016 - 23:01

Merci à un modérateur d'archiver ce topic en attendant le retour du demandeur ...

Scoubifitz

Scoubifitz
Membre actif

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

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

Résolu Re: Personnalisation d'un formulaire HTML

Message par Chacha Lun 11 Avr 2016 - 9:58

Scoubifitz a écrit:Merci à un modérateur d'archiver ce topic en attendant le retour du demandeur ...
Bonjour @Scoubifitz,

C'est fait. Wink


Cordialement.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

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

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

- Sujets similaires

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