Liste déroulante et contrôle via Javascript
Liste déroulante et contrôle via Javascript - HTML/CSS - Programmation
Marsh Posté le 04-05-2010 à 12:06:09
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
Marsh Posté le 04-05-2010 à 13:29:06
tu mets un name, mais il faut aussi un id hein
getElementById fonctionne avec l'id
pas le name
---------------
Blablaté par Harko
Marsh Posté le 04-05-2010 à 13:58:29
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 :
|
Marsh Posté le 04-05-2010 à 17:47:47
| gatsu35 a écrit : tu mets un name, mais il faut aussi un id hein |
Putain, que je suis distrait. ![[:mister yoda]](https://forum-images.hardware.fr/images/perso/mister yoda.gif "[:mister yoda]")
Merci. 
Un grand merci également à fred pour les corrections.
---------------
Le site des BD d'HFR | Aurélien Amacker : Arnaque ? - Mongolien du Web
Marsh Posté le 23-10-2013 à 19:30:28
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 8 ml</strong></font><br />
<br />
<!-- --> <font face="Verdana, Arial, Helvetica, sans-serif" size="3"><strong>Qté </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'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é </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'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é </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'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 />
</form>
<!-- End of Form -->
</div>
</body>
</html>
Si quelqu'un a une idée, elle sera la bienvenue.
Merci d'avance.
Marsh Posté le 23-10-2013 à 20:12:46
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
Marsh Posté le 24-10-2013 à 09:49:42
Ma première idée c'est que tu aies le respect d'utiliser la balise code ![[:dawa]](https://forum-images.hardware.fr/images/perso/dawa.gif "[:dawa]")
Marsh Posté le 24-10-2013 à 21:49:06
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.
Marsh Posté le 25-10-2013 à 09:32:32
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 ...
Sujets relatifs:
- Stocker valeur du contrôle Checkbox
- javascript random image
- Liste déroulante de Tables
- [API google Maps javascript] affichage page html dans une infobulle
- [javascript]Appeler une fonction dans un iframe
- Controle d'un terminal Linux via PHP
- Selection date jour dans zone de liste
- Ajouter une liste a une autre
- Problème autocomplétion javascript
Marsh Posté le 04-05-2010 à 11:07:35
Bonjour à tous,![[:zero pm]](https://forum-images.hardware.fr/images/perso/zero pm.gif "[: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 :
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.
Message édité par zoukoufxxx le 04-05-2010 à 11:08:04
---------------
Le site des BD d'HFR | Aurélien Amacker : Arnaque ? - Mongolien du Web