Mini problème à l'envoi du formulaire

[Phyliono]

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.

[Invité]

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>

[Phyliono]

Merci beaucoup.

Rapide et efficace