Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1630 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Liste déroulante et contrôle via Javascript

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Liste déroulante et contrôle via Javascript

n°1990101
zoukoufxxx
La bogossitude made in HFR
Posté le 04-05-2010 à 11:07:35  profilanswer
 

Bonjour à tous, [:zero pm]  
 
 
Étant un peu (beaucoup) une bite en JS, j'aurais besoin un peu de vos lumières.
 
J'ai une liste déroulante sur une page HTML :

Code :
  1. <select name="id_personne">
  2.           <option value="0">--------------</option>
  3.           <option value="1">Michel Dupont</option>
  4.           <option value="2">Alain Martin</option>
  5.           <option value="3">Yannick Noah</option>
  6.           <option value="4">Joss Whedon</option>
  7. </select>


 
Si la valeur sélectionnée est "--------------" lorsque l'Internaute clique sur le bouton submit du formulaire, je voudrais qu'une fenêtre d'alert Javascript s'ouvre et indique par exemple "Veuillez sélectionner une personne".
 
Je pense à un truc du genre if (form.select.value="--------------" ) { alert('Veuillez sélectionner une personne'); } avec un lien avec le bouton submit.
 
 
Merci par avance pour vos éclaircissements. [:shimay:1]


Message édité par zoukoufxxx le 04-05-2010 à 11:08:04

---------------
Le site des BD d'HFR | Aurélien Amacker : Arnaque ? - Mongolien du Web
mood
Publicité
Posté le 04-05-2010 à 11:07:35  profilanswer
 

n°1990107
fred777888​999
Posté le 04-05-2010 à 11:39:30  profilanswer
 

Tu trouvera une base de travail sur les objets de formulaire sur developpez.com ici et probablement dans de nombreux autres posts sur hardware.

n°1990123
zoukoufxxx
La bogossitude made in HFR
Posté le 04-05-2010 à 12:06:09  profilanswer
 

Merci pour cette piste de réflexion. Très intéressant le lien.
 
J'ai tenté cela, sans réel succès :
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Titre</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
      function VerificationDestinataire(formulaire) {
       if (document.getElementById('id_personne').options[0] == document.getElementById('id_personne').selectedIndex) {
        alert('Veuillez sélectionner un destinataire.');
       }
      }
    </script>    
  </head>
  <body>
    <form method="post" action="page2.php" enctype="multipart/form-data" onsubmit="return(VerificationDestinataire(this));">
      <select name="id_personne">
          <option value="0">--------------</option>
          <option value="1">Michel Dupont</option>
          <option value="2">Alain Martin</option>
          <option value="3">Yannick Noah</option>
          <option value="4">Joss Whedon</option>
       </select>
       <input name="suivant" type="submit" value="Suivant >" />
    </form>
  </body>
</html>
 


Message édité par zoukoufxxx le 04-05-2010 à 12:10:16

---------------
Le site des BD d'HFR | Aurélien Amacker : Arnaque ? - Mongolien du Web
n°1990145
gatsu35
Blablaté par Harko
Posté le 04-05-2010 à 13:29:06  profilanswer
 

tu mets un name, mais il faut aussi un id hein  
getElementById fonctionne avec l'id
 pas le name

Message cité 1 fois

---------------
Blablaté par Harko
n°1990167
fred777888​999
Posté le 04-05-2010 à 13:58:29  profilanswer
 

Ca pourrait etre pire.
1- Ta fonction doit retourner 'true' si tu ne fait pas l'alert, sinon tu ne pourra jamais poster ton formulaire.
2- Utilise la propriete selected de ta combo plutot que le selectedindex qui ne fonctionne pas bien avec certains navigateurs
3- Comme gatsu l'as dit, utilise plutot un id sur ton select.
Ca donne :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <title>Titre</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <script type="text/javascript">
  7.       function VerificationDestinataire(formulaire) {
  8.        if (document.getElementById('id_personne').options[0].selected) {
  9.         alert('Veuillez sélectionner un destinataire.');
  10.         return false;
  11.        }
  12.        return true;
  13.       }
  14.     </script>   
  15.   </head>
  16.   <body>
  17.     <form method="post" action="page2.php" enctype="multipart/form-data" onsubmit="return(VerificationDestinataire(this));">
  18.       <select id="id_personne">
  19.           <option value="0">--------------</option>
  20.           <option value="1">Michel Dupont</option>
  21.           <option value="2">Alain Martin</option>
  22.           <option value="3">Yannick Noah</option>
  23.           <option value="4">Joss Whedon</option>
  24.        </select>
  25.        <input name="suivant" type="submit" value="Suivant >" />
  26.     </form>
  27.   </body>
  28. </html>

n°1990229
zoukoufxxx
La bogossitude made in HFR
Posté le 04-05-2010 à 17:47:47  profilanswer
 

gatsu35 a écrit :

tu mets un name, mais il faut aussi un id hein  
getElementById fonctionne avec l'id
 pas le name


Putain, que je suis distrait. [:mister yoda]  
Merci. :jap:
 
Un grand merci également à fred pour les corrections. :jap:  


---------------
Le site des BD d'HFR | Aurélien Amacker : Arnaque ? - Mongolien du Web
n°2207855
deforel
Posté le 23-10-2013 à 19:30:28  profilanswer
 

Bonjour à tous,
Ce script fonctionne à merveille s'il n'y a qu'un seul formulaire dans la page.
Par contre s'il y en a plusieurs, l'alert déconne complètement à partir du 2ème (le premier fonctionne).
Exemple :
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<div align="center">
<script type="text/javascript">
      function verifFormul(Stylo) {
       if (document.getElementById('handling_cart').options[0].selected) {
        alert('Veuillez sélectionner un pays de destination.');
        return false;
       }
       return true;
      }
    </script>    
<!-- Start of Script --><script language="javascript">  
function CalculateOrderStylo(form)  
{  
if (form.os0.value == "Suisse" )  
{
form.shipping.value = "1.50"; form.shipping2.value = "";  
}  
if (form.os0.value == "UE" )  
{  
form.shipping.value = "2.70"; form.shipping2.value = "";  
}  
if (form.os0.value == "Autre" )  
{  
form.shipping.value = "3.50"; form.shipping2.value = "";  
}  
}  
</script><!-- End of Script --><!-- Start of Form -->
<form name="Stylo" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return (verifFormul(this));" method="post" target="paypal">
<table border="0" cellpadding="1" width="390">
 <tbody>
  <tr>
   <td height="114" width="258">
   <p align="center"><font face="Verdana" size="3"><strong>Vaporisateur Melt-em &nbsp;8 ml</strong></font><br />
   <br />
   <!-- --> <font face="Verdana, Arial, Helvetica, sans-serif" size="3"><strong>Qt&eacute; </strong> </font> <input name="quantity" size="3" type="text" value="1" width="50" /> <!-- --> <input name="cmd" type="hidden" value="_xclick" /> <input name="business" type="hidden" value="mon@dresseema.il" /> <input name="item_name" type="hidden" value="Vaporisateur Melt-em 8ml" /> <input name="amount" type="hidden" value="2.90" /> <input name="item_number" type="hidden" value="8" /> <input name="no_shipping" type="hidden" value="2" /> <input name="shipping" type="hidden" /> <input name="shipping2" type="hidden" /> <input name="return" type="hidden" value="http://www.melt-em.ch" /> <input name="cancel_return" type="hidden" value="http://www.yourwebsite.com/cancel.html" /> <input name="currency_code" type="hidden" value="CHF" /> <input name="lc" type="hidden" value="FR" /> <input name="cpp_header_image" type="hidden" value="http://cdwebdesign.ws/dav/c/cdwebdesign.ws//cachedImages/2556.png" /> <input name="bn" type="hidden" value="PP-ShopCartBF:btn_buynow_LG.gif:NonHosted" /> <input align="top" alt="Effectuer ses paiements avec Paypal - une solution rapide, gratuite et sûre !" border="0" onclick="CalculateOrderStylo(this.form)" src="https://www.paypal.com/fr_FR/i/btn/btn_buynow_LG.gif" type="image" /></p>
   </td>
   <td width="55">
   <div align="center"><img alt="" border="0" class="lightbox" src="http://217.196.177.129/wcms/ftp/c/cdwebdesign.ws/siteimages/2602.jpg" width="65" /></div>
   </td>
   <td width="63">
   <div align="center"><font face="Verdana" size="3"><strong>CHF 2.90</strong></font></div>
   </td>
  </tr>
 </tbody>
</table>
<input name="on0" type="hidden" value="Option d'envoi" /> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">Option d&#39;envoi : </font> <select id="handling_cart" name="os0"> <option value="">Sélectionner</option> <option value="Suisse">Suisse CHF 1.50</option> <option value="UE">UE CHF 2.70</option> <option value="Autre">Autre CHF 3.50</option> </select></form>
<!-- End of Form -->
<script type="text/javascript">
      function verifFormul(Bottle) {
       if (document.getElementById('handling_cart').options[0].selected) {
        alert('Veuillez sélectionner un pays de destination.');
        return false;
       }
       return true;
      }
    </script>  
<!-- Start of Script --><script language="javascript">  
function CalculateOrderBottle(form)  
{  
if (form.os0.value == "Suisse" )  
{
form.shipping.value = "7.50"; form.shipping2.value = "";  
}  
if (form.os0.value == "UE" )  
{  
form.shipping.value = "15.50"; form.shipping2.value = "";  
}  
if (form.os0.value == "Autre" )  
{  
form.shipping.value = "18.00"; form.shipping2.value = "";  
}  
}  
</script><!-- End of Script --><!-- Start of Form -->
 
<form name="Bottle" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return (verifFormul(this));" method="post" target="paypal">
<table border="0" cellpadding="1" width="390">
 <tbody>
  <tr>
   <td height="114" width="258">
   <p align="center"><font face="Verdana" size="3"><strong>Vaporisateur Melt-em 75 ml</strong></font><br />
   <br />
   <!-- --> <font face="Verdana, Arial, Helvetica, sans-serif" size="3"><strong>Qt&eacute; </strong> </font> <input name="quantity" size="3" type="text" value="1" width="50" /> <!-- --> <input name="cmd" type="hidden" value="_xclick" /> <input name="business" type="hidden" value="mon@dresseema.il" /> <input name="item_name" type="hidden" value="Vaporisateur Melt-em 75ml" /> <input name="amount" type="hidden" value="9.90" /> <input name="item_number" type="hidden" value="75" /> <input name="no_shipping" type="hidden" value="2" /> <input name="shipping" type="hidden" /> <input name="shipping2" type="hidden" /> <input name="return" type="hidden" value="http://www.melt-em.ch" /> <input name="cancel_return" type="hidden" value="http://www.yourwebsite.com/cancel.html" /> <input name="currency_code" type="hidden" value="CHF" /> <input name="lc" type="hidden" value="FR" /> <input name="cpp_header_image" type="hidden" value="http://cdwebdesign.ws/dav/c/cdwebdesign.ws//cachedImages/2556.png" /> <input name="bn" type="hidden" value="PP-ShopCartBF:btn_buynow_LG.gif:NonHosted" /> <input align="top" alt="Effectuer ses paiements avec Paypal - une solution rapide, gratuite et sûre !" border="0" onclick="CalculateOrderBottle(this.form)" src="https://www.paypal.com/fr_FR/i/btn/btn_buynow_LG.gif" type="image" /></p>
   </td>
   <td width="55">
   <div align="center"><img alt="" border="0" class="lightbox" src="http://217.196.177.129/wcms/ftp/c/cdwebdesign.ws/siteimages/2601.jpg" width="35" /></div>
   </td>
   <td width="63">
   <div align="center"><font face="Verdana" size="3"><strong>CHF 9.90</strong></font></div>
   </td>
  </tr>
 </tbody>
</table>
<input name="on0" type="hidden" value="Option d'envoi" /> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">Option d&#39;envoi : </font> <select id="handling_cart" name="os0"><option value="">Sélectionner</option><option value="Suisse">Suisse CHF 7.50</option><option value="UE">UE CHF 15.50</option><option value="Autre">Autre CHF 18.00</option> </select></form>
<!-- End of Form -->
<script type="text/javascript">
      function verifFormul(Mix) {
       if (document.getElementById('handling_cart').options[0].selected) {
        alert('Veuillez sélectionner un pays de destination.');
        return false;
       }
       return true;
      }
    </script>  
<!-- Start of Script --><script language="javascript">  
function CalculateOrderMix(form)  
{  
if (form.os0.value == "Suisse" )  
{
form.shipping.value = "7.50"; form.shipping2.value = "";  
}  
if (form.os0.value == "UE" )  
{  
form.shipping.value = "15.50"; form.shipping2.value = "";  
}  
if (form.os0.value == "Autre" )  
{  
form.shipping.value = "18.00"; form.shipping2.value = "";  
}  
}  
</script><!-- End of Script --><!-- Start of Form -->
 
<form action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return (verifFormul(this));" method="post" target="paypal">
<table border="0" cellpadding="1" width="390">
 <tbody>
  <tr>
   <td height="114" width="258">
   <p align="center"><font face="Verdana" size="3"><strong>Vaporisateur Melt-em Mix</strong></font><br />
   <br />
   <!-- --> <font face="Verdana, Arial, Helvetica, sans-serif" size="3"><strong>Qt&eacute; </strong> </font> <input name="quantity" size="3" type="text" value="1" width="50" /> <!-- --> <input name="cmd" type="hidden" value="_xclick" /> <input name="business" type="hidden" value="mon@dresseema.il" /> <input name="item_name" type="hidden" value="Vaporisateur Melt-em Mix" /> <input name="amount" type="hidden" value="11.90" /> <input name="item_number" type="hidden" value="Mix" /> <input name="no_shipping" type="hidden" value="2" /> <input name="shipping" type="hidden" /> <input name="shipping2" type="hidden" /> <input name="return" type="hidden" value="http://www.melt-em.ch" /> <input name="cancel_return" type="hidden" value="http://www.yourwebsite.com/cancel.html" /> <input name="currency_code" type="hidden" value="CHF" /> <input name="lc" type="hidden" value="FR" /> <input name="cpp_header_image" type="hidden" value="http://cdwebdesign.ws/dav/c/cdwebdesign.ws//cachedImages/2556.png" /> <input name="bn" type="hidden" value="PP-ShopCartBF:btn_buynow_LG.gif:NonHosted" /> <input align="top" alt="Effectuer ses paiements avec Paypal - une solution rapide, gratuite et sûre !" border="0" onclick="CalculateOrderMix(this.form)" src="https://www.paypal.com/fr_FR/i/btn/btn_buynow_LG.gif" type="image" /></p>
   </td>
   <td width="55">
   <div align="center"><img alt="" border="0" class="lightbox" src="http://217.196.177.129/wcms/ftp/c/cdwebdesign.ws/siteimages/2603.jpg" width="65" /></div>
   </td>
   <td width="63">
   <div align="center"><font face="Verdana" size="3"><strong>CHF 11.90</strong></font></div>
   </td>
  </tr>
 </tbody>
</table>
<input name="on0" type="hidden" value="Option d'envoi" /> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">Option d&#39;envoi : </font> <select id="handling_cart" name="os0"><option value="">Sélectionner</option><option value="Suisse">Suisse CHF 7.50</option><option value="UE">UE CHF 15.50</option><option value="Autre">Autre CHF 18.00.</option> </select><br />
&nbsp;</form>
<!-- End of Form -->
</div>
 
</body>
</html>
 
Si quelqu'un a une idée, elle sera la bienvenue.
Merci d'avance.

n°2207861
MaybeEijOr​Not
but someone at least
Posté le 23-10-2013 à 20:12:46  profilanswer
 

Pourquoi passer en argument de ta fonction ton form grâce à l'objet "this" si tu ne l'utilises pas?
 
L'id est définie pour un unique objet.


Message édité par MaybeEijOrNot le 23-10-2013 à 20:14:56
n°2207909
Pablo Escr​obarbe
Retour d'exil
Posté le 24-10-2013 à 09:49:42  profilanswer
 

Ma première idée c'est que tu aies le respect d'utiliser la balise code [:dawa]

n°2208035
deforel
Posté le 24-10-2013 à 21:49:06  profilanswer
 

Eurêka, j'ai trouvé la réponse sur un autre forum !
 
Voici le script à utiliser (livré tel quel) :  
 
 <head>
 <script type="text/javascript">  
function test(f)  
 {  
 if (f.liste.selectedIndex == 0)  
 {  
 alert('Vous devez faire un choix!');  
 return false;  
 }  
 else  
 {  
 return true;  
 }  
 }  
 </script>  
 </head>  
 <body>  
 <form name="formulaire" action="Accueil.php" onSubmit="return test(this);" >  
 <select name="liste">  
 <option value="0">choisissez</option>  
 <option value="1">choix 1</option>  
 <option value="2">choix 2</option>  
 <option value="3">choix 3</option>  
 </select>  
 <input type="submit" value="Envoyer">  
 </form>  
 <form name="formulaire2" action="Accueil.php" onSubmit="return test(this);" >  
 <select name="liste">  
 <option value="0">choisissez</option>  
 <option value="1">choix 1</option>  
 <option value="2">choix 2</option>  
 <option value="3">choix 3</option>  
 </select>  
 <input type="submit" value="Envoyer">  
 </form>  
 </body>
 
La formule est juste un peu différente.
 
P.S. : je ne réagirai pas aux commentaires de quiconque utilise ce forum pour ergoter sans répondre à la question posée.
         Merci de votre compréhension.

mood
Publicité
Posté le 24-10-2013 à 21:49:06  profilanswer
 

n°2208052
Pablo Escr​obarbe
Retour d'exil
Posté le 25-10-2013 à 09:32:32  profilanswer
 

bah la balise code c'est un peu le minimum du respect pour ceux qui te lisent et t'aident bénévolement. Si tu comprends pas ça ...


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Liste déroulante et contrôle via Javascript

 

Sujets relatifs
Stocker valeur du contrôle Checkboxjavascript random image
Liste déroulante de Tables[API google Maps javascript] affichage page html dans une infobulle
[javascript]Appeler une fonction dans un iframeControle d'un terminal Linux via PHP
Selection date jour dans zone de listeAjouter une liste a une autre
Problème autocomplétion javascript 
Plus de sujets relatifs à : Liste déroulante et contrôle via Javascript

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.076 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR