Mini problème à l'envoi du formulaire

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

Résolu Mini problème à l'envoi du formulaire

Message par Phyliono le Ven 10 Juin 2016 - 12:22

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
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,

J'ai ajouté un script à mon formulaire de sorte à ce que si les champs ne sont pas tous remplis, le formulaire ne s'envoie pas et une pop-up s'affiche. Sauf que ça mène sur une autre page avec ce message (voir capture d'écran) et je voudrais que ça reste sur la page du formulaire, sans modifier les champs déjà remplis.

Code:
Code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">

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

monTableau[0] = ["Guide"];
monTableau[0][1] = [
["Médecin",""],
["Cuisinier",""],
["Bibliothécaire",""],
["Surveillant",""]
];
 
monTableau[1] = ["Professeur"];
monTableau[1][1] = [
["Art",""],
["Astronomie",""],
["Bienséance",""],
["Botanique",""],
["Cinéma",""],
["Cuisine",""],
["Écriture",""],
["Esthétique",""],
["Géographie",""],
["Habbologie",""],
["Histoire",""],
["Informatique",""],
["Journalisme",""],
["Langues",""],
["Littérature",""],
["Mathématiques",""],
["Médecine",""],
["Mode",""],
["Musique",""],
["Philosophie",""],
["Psychologie",""],
["Sciences",""],
["Société",""],
["Technologie",""]
];
 
monTableau[2] = ["Marchand"];
monTableau[2][1] = [
["Employé",""],
["Propriétaire",""]
];
 
monTableau[3] = ["Animateur"];
monTableau[3][1] = [
["Pas de spécialité ",""]
];
 
/* changement d'options */
function jeu_onchange(strChoix)
{
document.post.specialite.options.length = 0;
for(var x=0;x<monTableau.length;x++)
  {
  if (monTableau[x][0] == strChoix)
      {
      for(var y=0;y<monTableau[x][1].length;y++)
        {
        opt = y===0?
        new Option(monTableau[x][1][y][0],monTableau[x][1][y][0]+monTableau[x][1][y][1],true,true):
        new Option(monTableau[x][1][y][0],monTableau[x][1][y][0]+monTableau[x][1][y][1],false,false);
        document.post.specialite.options[y] = opt;
        }
      }
  }
}
</script>
<script type="text/javascript">
function envoiMessage(form)
{if(form.role.value==' ')
{
alert('Vous devez indiquer un rôle');
return false;
}
else if(form.specialite.value==' ')
{
alert('Vous devez indiquer une spécialité');
return false;
}
else if(form.jour.value==' ')
{
alert('Vous devez indiquer une date valide');
return false;
}
else if(form.mois.value==' ')
{
alert('Vous devez indiquer une date valide');
return false;
}
else if(form.heure.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.minute.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else
{
  var couleur_txt="";
  if(form.role.value=="Guide")
  couleur_txt = "[table class='vert' align='center' width='90%'][tr][td]:rl: " + form.role.value + " (" + form.specialite.value +  ") " + '\n' + ":dt: " + form.jour.value + " " + form.mois.value + '\n' + ":hr: " + form.heure.value + "h" + form.minute.value + " ";
  if(form.role.value=="Professeur")
  couleur_txt = "[table class='fonce' align='center' width='90%'][tr][td]:rl: " + form.role.value + " (" + form.specialite.value +  ") " + '\n' + ":dt: " + form.jour.value + " " + form.mois.value + '\n' + ":hr: " + form.heure.value + "h" + form.minute.value + " ";
  if(form.role.value=="Marchand")
  couleur_txt = "[table class='rouge' align='center' width='90%'][tr][td]:rl: " + form.role.value + " (" + form.specialite.value +  ") " + '\n' + ":dt: " + form.jour.value + " " + form.mois.value + '\n' + ":hr: " + form.heure.value + "h" + form.minute.value + " ";
  if(form.role.value=="Animateur")
  couleur_txt = "[table class='violet' align='center' width='90%'][tr][td]:rl: " + form.role.value + '\n' + ":dt: " + form.jour.value + " " + form.mois.value + '\n' + ":hr: " + form.heure.value + "h" + form.minute.value + " ";
 
  var txt_message = couleur_txt + "[/td][/tr][/table]\n";
  form.message.value = txt_message;
  form.subject.value = "Demander un test" ;
return true;
}
}
</script>
<form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="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="1624" />
  <table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
    <tr>
      <th nowrap="nowrap" width="100%" class="secondarytitle">
        <h2>Demander un test</h2>
      </th>
    </tr>
    <tr>
      <td height="6">
      </td>
    </tr>
    <tr>
      <td class="row1">
        <br />
        <div align="center">
          <span style="font-size:12px;">Ce formulaire est à remplir pour demander à passer un test si votre candidature au recrutement a été acceptée.</span><br /><br />
          <label for="role"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Rôle :</strong> <font color="red">*</font></span></label>
          <br />
          <select name="role" id="role" class="formulaire" style="height:25px" onchange="jeu_onchange(this[this.selectedIndex].value)">
            <option value=" "></option>
            <option value="Guide">Guide</option>
            <option value="Professeur">Professeur</option>
            <option value="Marchand">Marchand</option>
            <option value="Animateur">Animateur</option>
          </select>
          <br />
          <br />
          <label for="specialite"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Spécialité :</strong> <font color="red">*</font></span></label><br />
          <span style="font:bold italic 10px ubuntu, verdana;">Indiquer le service pour un guide ou la matière pour un professeur</span>
          <br />
          <select name="specialite" id="specialite" class="formulaire court" style="height:25px;">
     <option value=" ">Choisissez un rôle</option></select>
          <br />
          <br />
          <label for="date"><span style="font-family: ubuntu, verdana;font-size:11px;"><strong>Date :</strong> <font color="red">*</font></span></label>
          <br />
          <select name="jour" id="date" class="formulaire" style="height:25px;width:195px;">
            <option value=" ">Jour</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>
          </select>
          <select name="mois" id="date" class="formulaire" style="height:25px;width:195px;margin-left:5px;">
            <option value=" ">Mois</option>
            <option value="janvier">Janvier</option>
            <option value="février">Février</option>
            <option value="mars">Mars</option>
            <option value="avril">Avril</option>
            <option value="mai">Mai</option>
            <option value="juin">Juin</option>
            <option value="juillet">Juillet</option>
            <option value="août">Août</option>
            <option value="septembre">Septembre</option>
            <option value="octobre">Octobre</option>
            <option value="novembre">Novembre</option>
            <option value="décembre">Décembre</option>
          </select>
          <br />
          <br />
          <label for="horaire"><span style="font-family: ubuntu, verdana;font-size:11px;"><strong>Horaire :</strong> <font color="red">*</font></span></label>
          <br />
          <select name="heure" id="horaire" class="formulaire" style="height:25px;width:195px">
            <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="minute" id="horaire" class="formulaire" style="height:25px;width:195px;margin-left:5px;">
            <option value=" ">Minutes</option>
            <option value="00">00</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
          </select>
          <br />
          <br />
        </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.


Dernière édition par Phyliono le Ven 10 Juin 2016 - 12:50, édité 1 fois

Phyliono
*****

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

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

Résolu Re: Mini problème à l'envoi du formulaire

Message par Toryudo le Ven 10 Juin 2016 - 12:44

Bonjour,

On a bien les "return false;" et "return true;" dans le javascript, donc la fonction renvoie bien un résultat. En revanche, il faut également retourner cette valeur retour dans le onsubmit, comme ceci :

onsubmit="return envoiMessage(this)"

Le code modifié :
Code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">

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

monTableau[0] = ["Guide"];
monTableau[0][1] = [
["Médecin",""],
["Cuisinier",""],
["Bibliothécaire",""],
["Surveillant",""]
];
 
monTableau[1] = ["Professeur"];
monTableau[1][1] = [
["Art",""],
["Astronomie",""],
["Bienséance",""],
["Botanique",""],
["Cinéma",""],
["Cuisine",""],
["Écriture",""],
["Esthétique",""],
["Géographie",""],
["Habbologie",""],
["Histoire",""],
["Informatique",""],
["Journalisme",""],
["Langues",""],
["Littérature",""],
["Mathématiques",""],
["Médecine",""],
["Mode",""],
["Musique",""],
["Philosophie",""],
["Psychologie",""],
["Sciences",""],
["Société",""],
["Technologie",""]
];
 
monTableau[2] = ["Marchand"];
monTableau[2][1] = [
["Employé",""],
["Propriétaire",""]
];
 
monTableau[3] = ["Animateur"];
monTableau[3][1] = [
["Pas de spécialité ",""]
];
 
/* changement d'options */
function jeu_onchange(strChoix)
{
document.post.specialite.options.length = 0;
for(var x=0;x<monTableau.length;x++)
  {
  if (monTableau[x][0] == strChoix)
      {
      for(var y=0;y<monTableau[x][1].length;y++)
        {
        opt = y===0?
        new Option(monTableau[x][1][y][0],monTableau[x][1][y][0]+monTableau[x][1][y][1],true,true):
        new Option(monTableau[x][1][y][0],monTableau[x][1][y][0]+monTableau[x][1][y][1],false,false);
        document.post.specialite.options[y] = opt;
        }
      }
  }
}
</script>
<script type="text/javascript">
function envoiMessage(form)
{if(form.role.value==' ')
{
alert('Vous devez indiquer un rôle');
return false;
}
else if(form.specialite.value==' ')
{
alert('Vous devez indiquer une spécialité');
return false;
}
else if(form.jour.value==' ')
{
alert('Vous devez indiquer une date valide');
return false;
}
else if(form.mois.value==' ')
{
alert('Vous devez indiquer une date valide');
return false;
}
else if(form.heure.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else if(form.minute.value==' ')
{
alert('Vous devez indiquer un horaire valide');
return false;
}
else
{
  var couleur_txt="";
  if(form.role.value=="Guide")
  couleur_txt = "[table class='vert' align='center' width='90%'][tr][td]:rl: " + form.role.value + " (" + form.specialite.value +  ") " + '\n' + ":dt: " + form.jour.value + " " + form.mois.value + '\n' + ":hr: " + form.heure.value + "h" + form.minute.value + " ";
  if(form.role.value=="Professeur")
  couleur_txt = "[table class='fonce' align='center' width='90%'][tr][td]:rl: " + form.role.value + " (" + form.specialite.value +  ") " + '\n' + ":dt: " + form.jour.value + " " + form.mois.value + '\n' + ":hr: " + form.heure.value + "h" + form.minute.value + " ";
  if(form.role.value=="Marchand")
  couleur_txt = "[table class='rouge' align='center' width='90%'][tr][td]:rl: " + form.role.value + " (" + form.specialite.value +  ") " + '\n' + ":dt: " + form.jour.value + " " + form.mois.value + '\n' + ":hr: " + form.heure.value + "h" + form.minute.value + " ";
  if(form.role.value=="Animateur")
  couleur_txt = "[table class='violet' align='center' width='90%'][tr][td]:rl: " + form.role.value + '\n' + ":dt: " + form.jour.value + " " + form.mois.value + '\n' + ":hr: " + form.heure.value + "h" + form.minute.value + " ";
 
  var txt_message = couleur_txt + "[/td][/tr][/table]\n";
  form.message.value = txt_message;
  form.subject.value = "Demander un test" ;
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="1624" />
  <table style="width: 100%;" cellpadding="0" cellspacing="1" border="0" class="forumline">
    <tr>
      <th nowrap="nowrap" width="100%" class="secondarytitle">
        <h2>Demander un test</h2>
      </th>
    </tr>
    <tr>
      <td height="6">
      </td>
    </tr>
    <tr>
      <td class="row1">
        <br />
        <div align="center">
          <span style="font-size:12px;">Ce formulaire est à remplir pour demander à passer un test si votre candidature au recrutement a été acceptée.</span><br /><br />
          <label for="role"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Rôle :</strong> <font color="red">*</font></span></label>
          <br />
          <select name="role" id="role" class="formulaire" style="height:25px" onchange="jeu_onchange(this[this.selectedIndex].value)">
            <option value=" "></option>
            <option value="Guide">Guide</option>
            <option value="Professeur">Professeur</option>
            <option value="Marchand">Marchand</option>
            <option value="Animateur">Animateur</option>
          </select>
          <br />
          <br />
          <label for="specialite"><span style="font-family: ubuntu, verdana;font-size:11px;margin-left:15px;"><strong>Spécialité :</strong> <font color="red">*</font></span></label><br />
          <span style="font:bold italic 10px ubuntu, verdana;">Indiquer le service pour un guide ou la matière pour un professeur</span>
          <br />
          <select name="specialite" id="specialite" class="formulaire court" style="height:25px;">
    <option value=" ">Choisissez un rôle</option></select>
          <br />
          <br />
          <label for="date"><span style="font-family: ubuntu, verdana;font-size:11px;"><strong>Date :</strong> <font color="red">*</font></span></label>
          <br />
          <select name="jour" id="date" class="formulaire" style="height:25px;width:195px;">
            <option value=" ">Jour</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>
          </select>
          <select name="mois" id="date" class="formulaire" style="height:25px;width:195px;margin-left:5px;">
            <option value=" ">Mois</option>
            <option value="janvier">Janvier</option>
            <option value="février">Février</option>
            <option value="mars">Mars</option>
            <option value="avril">Avril</option>
            <option value="mai">Mai</option>
            <option value="juin">Juin</option>
            <option value="juillet">Juillet</option>
            <option value="août">Août</option>
            <option value="septembre">Septembre</option>
            <option value="octobre">Octobre</option>
            <option value="novembre">Novembre</option>
            <option value="décembre">Décembre</option>
          </select>
          <br />
          <br />
          <label for="horaire"><span style="font-family: ubuntu, verdana;font-size:11px;"><strong>Horaire :</strong> <font color="red">*</font></span></label>
          <br />
          <select name="heure" id="horaire" class="formulaire" style="height:25px;width:195px">
            <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="minute" id="horaire" class="formulaire" style="height:25px;width:195px;margin-left:5px;">
            <option value=" ">Minutes</option>
            <option value="00">00</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
          </select>
          <br />
          <br />
        </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>

Toryudo
**

Masculin
Messages : 53
Inscrit(e) le : 09/06/2016

http://www.deus-academia.com
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mini problème à l'envoi du formulaire

Message par Phyliono le Ven 10 Juin 2016 - 12:50

Merci beaucoup.

Rapide et efficace Smile

Phyliono
*****

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

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

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


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