Activer bouton submit selon liste déroulante

**zephben** · 02/06/2009, 11h57

Bonjour à tous !

Merci d'avance à tous ceux qui essayeront de comprendre ou résoudre mon problème.

Mon besoins :
Je souhaite faire un petit formulaire avec deux listes déroulantes liées, et un bouton qui ne s'active que si la personne a fait son choix dans la liste 2.

Grâce à un bon tuto trouvé ici même les listes liées fonctionnent très bien...

choix liste n°1 ---> génère la liste n°2 via bdd + ajax
choix liste n°2 ---> choix dans la liste2 ---> active le bouton submit

Pour l'instant mon bouton submit est toujours actif, même si on n'a pas sélectionné une des valeurs de la liste n°2 ce qui pose évidemment problème...

J'ai essayé d'adapter un petit bout de code qui fonctionne très bien sur un bouton check pour mon formulaire mail mais que malheureusement je n'arrive pas à adapter ici!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
function ChangeStatut(formulaire) {
if(formulaire.okok.checked == true) {formulaire.okokok.disabled = false }
if(formulaire.okok.checked == false) {formulaire.okokok.disabled = true }
}
</script> 
<input type="checkbox" name="okok" value="valeur" onclick="ChangeStatut(this.form)" tabindex="14" /> 
 
<input type="submit" name="okokok" id="submit" tabindex="15" value="Envoyer" disabled="disabled" />

En gros il me faudrait un petit bout de code qui active mon bouton uniquement quand le visiteur aura séléctionner un élément de la liste 2!

Grand merci d'avance à ceux qui auront une idée !!!

**E.Bzz** · 02/06/2009, 12h16

Bonjour et bienvenue sur Developpez.com

a priori, dans la 2° liste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select ... onchange="document.getElementById('submit').disabled = (this.value=='');">

En supposant que tu ais bien une valeur pas défaut du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<option value='' selected='selected'>-- Faire un choix --</option>

EDIT : A noter : "submit" est un mauvais choix comme ID.
Il faut éviter d'utiliser comme identifiant (name, id, variable, fonction etc) les termes déjà utilisés dans le langage.

A+

**andry.aime** · 02/06/2009, 12h19

Salut

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function fonction(obj)
{
  if(obj.options[obj.selectedIndex].value=='-1'){formulaire.okokok.disabled=true}
  else {formulaire.okokok.disabled=false}
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<select onchange='fonction(this)'/>
<option value='-1'>choisir dans la liste</option>
<option value='1'>1</option>
<option value='2'>2</option>
</select>

**zephben** · 02/06/2009, 12h30

Je viens de tester mais je n'y arrive pas...

Page marque.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('LISTEmodele').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","inc-ajaxVehicule.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'LISTEmarque
				sel = document.getElementById('LISTEmarque');
				idmarque = sel.options[sel.selectedIndex].value;
				xhr.send("idMarque="+idmarque);
			}
 
		</script>
		<form method="post" action="rechercheModele.php">
 
			  <select name='LISTEmarque' id='LISTEmarque' onchange='go()' style="width: 400px;" size="1" >
			    <option value='-1'>Choisissez une marque</option>
			    <?
						mysql_connect("xxx","xxx","xxx");
						mysql_select_db("xxx");
						$res = mysql_query("SELECT * FROM LISTEmarque ORDER BY nom");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
		      </select>
              <br /><br />
			  <div id='LISTEmodele' style='display:inline'>
			    <select disabled="disabled" name='LISTEmodele' style="width: 400px;" size="1" >
			      <option value='-1' selected='selected'>Choisissez un modèle</option>
		        </select>
			  </div>
              <br /><br />
              <input name="validation" type="submit" value="Lancer la recherche" title="Lancer ma recherche"  />
		</form>

Page ajaxVehicule.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?php
        echo "<select style=\"width:400px;\" size=\"1\" name=\"ChercheModele\" onchange=\"document.getElementById('submit').disabled = (this.value=='-1');\" >";
        if(isset($_POST["idMarque"])){
                mysql_connect("xxx","xxx","xxx");
                mysql_select_db("xxx");
                $res = mysql_query("SELECT id,lemodele,url FROM LISTEmodele 
                        WHERE idMarque=".$_POST["idMarque"]." ORDER BY lemodele");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='-1' selected='selected'>Choisissez un mod&egrave;le</option>";
                        echo "<option value='".$row["url"]."'>".$row["lemodele"]."</option>";
                }
        }
        echo "</select><br /><br />";
?>

Page rechercheModele.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<?php
/* on vérifie que l'information "menu_destination" existe ET qu'elle n'est pas vide : */
if ( isset($_POST['ChercheModele']) && !empty($_POST['ChercheModele']) ) 
 
/* si c'est bien le cas (existe ET non-vide à la fois), on redirige le visiteur vers sa valeur choisie de l'information "menu_direction" : */
     {header("Location: ".$_POST['ChercheModele']."");}
 
/* sinon, on le redirige vers une autre page utile : */
else 
     {header("Location: http://www.google.com/");}
?>

Vois tu d'où peut venir le problème ?

Peux du au chargement ajax ?

**zephben** · 02/06/2009, 12h35

Mouarf idem pour ta solution andry.aime, ça ne fonctionne pas non plus...

Est-ce que ca aiderait que je mette cela en ligne pour vous montrer ??!!

**andry.aime** · 02/06/2009, 12h48

1-Fait sortir le premier option avec la valeur -1 de la boucle while.
2-Ton submit n'a pas d'id 'submit'.

document.getElementById('submit').disabled

**E.Bzz** · 02/06/2009, 13h43

Envoyé par andry.aime

1-Fait sortir le premier option avec la valeur -1 de la boucle while.
2-Ton submit n'a pas d'id 'submit'.

+1

... et poste le code généré.

D'une part tu as plus de voir les problèmes par toi même, et d'autre part, ça nous aidera à t'aider

A+

**zephben** · 02/06/2009, 13h50

J'suis désolé mais pouvez-vous me fournir un exemple de page complète....

Car là j'ai beau jongler dans tous les sens depuis une heure et demi,
pas moyen de faire avance le chmilblique....

EDIT : Un exemple avec une simple liste déroulante qui active le bouton suffirait !!! Pas besoin de reprendre toute ma fioriture...

Mon code actuel généré :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
            		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('LISTEmodele').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxVehicule.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'LISTEmarque
				sel = document.getElementById('LISTEmarque');
				idmarque = sel.options[sel.selectedIndex].value;
				xhr.send("idMarque="+idmarque);
			}
 
		</script>
		<form method="post" action="rechercheModele.php">
 
			  <select name='LISTEmarque' id='LISTEmarque' onchange='go()' style="width: 400px;" size="1" >
 
			    <option value='-1'>Choisissez une marque</option>
			    <option value='1'>Citroen</option><option value='2'>Fiat</option><option value='3'>Ford</option><option value='4'>Hyundai</option><option value='5'>Iveco</option><option value='6'>Mercedes</option><option value='7'>Nissan</option><option value='8'>Opel</option><option value='9'>Peugeot</option><option value='10'>Renault</option><option value='11'>Toyota</option><option value='12'>Volkswagen</option>		      </select>
 
              <br /><br />
			  <div id='LISTEmodele' style='display:inline'>
			    <select disabled="disabled" name='LISTEmodele' style="width: 400px;" size="1" onchange='fonction(this)' >
			      <option value='-1'>Choisissez un modèle</option>
		        </select>
			  </div>
              <br />
              <script type="text/javascript">
		function fonction(obj)
		{
		  if(obj.options[obj.selectedIndex].value=='-1'){formulaire.validation.disabled=true}
		  else {formulaire.validation.disabled=false}
		}
			</script> 
              <input name="validation" id="validation" type="submit" value="Lancer la recherche" title="Lancer ma recherche" />
 
		</form>

**andry.aime** · 02/06/2009, 13h58

Si tu as suivi les conseils

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function fonction(obj)
{
 if(obj.options[obj.selectedIndex].value=='-1')
    {document.getElementById('submit').disabled=true}
else 
    {document.getElementById('submit').disabled=false}
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<input name="validation" id="submit" type="submit" value="Lancer la recherche" title="Lancer ma recherche"  />

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
	echo "<select style=\"width:400px;\" size=\"1\" name=\"ChercheModele\" onchange=\"fonction(this)\" >";
	echo "<option value='-1' selected='selected'>Choisissez un mod&egrave;le</option>";
	if(isset($_POST["idMarque"])){
		mysql_connect("xxx","xxx","xxx");
		mysql_select_db("xxx");
		$res = mysql_query("SELECT id,lemodele,url FROM LISTEmodele 
			WHERE idMarque=".$_POST["idMarque"]." ORDER BY lemodele");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["url"]."'>".$row["lemodele"]."</option>";
		}
	}
	echo "</select><br /><br />";
?>

**E.Bzz** · 02/06/2009, 13h59

Ton select n'a qu'une seule option => tu ne peux pas déclencher le onchange.
Sinon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

else {formulaire.validation.disabled=false}

Synthaxe incorrecte
==>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

obj.form.elements['validation'].disabled

A+

**zephben** · 02/06/2009, 14h21

Je vous remercie de vos efforts mais même en suivant rigoureusement
vos conseils cela ne paye toujours pas!

A peine nouveau sur ce forum j'suis déjà un boulet ^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
            		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('LISTEmodele').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","inc-ajaxVehicule.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'LISTEmarque
				sel = document.getElementById('LISTEmarque');
				idmarque = sel.options[sel.selectedIndex].value;
				xhr.send("idMarque="+idmarque);
			}
 
			function fonction(obj)
			{
			 if(obj.options[obj.selectedIndex].value=='-1')
				{document.getElementById('submit').disabled=true}
			else 
				{document.getElementById('submit').disabled=false}
			}
		</script>
		<form method="post" action="inc-rechercheModele.php">
 
			  <select name='LISTEmarque' id='LISTEmarque' onchange='go()' style="width: 400px;" size="1" >
 
			    <option value='-1'>Choisissez une marque</option>
			    <option value='1'>Citroen</option><option value='2'>Fiat</option><option value='3'>Ford</option><option value='4'>Hyundai</option><option value='5'>Iveco</option><option value='6'>Mercedes</option><option value='7'>Nissan</option><option value='8'>Opel</option><option value='9'>Peugeot</option><option value='10'>Renault</option><option value='11'>Toyota</option><option value='12'>Volkswagen</option>		      </select>
 
              <br /><br />
			  <div id='LISTEmodele' style='display:inline'>
			    <select disabled="disabled" name='LISTEmodele' style="width: 400px;" size="1" onchange="fonction(this)" >
                  <option value='-1'>Choisissez un modèle</option>
		        </select>
			  </div><br /><br />
                <input name="validation" id="submit" type="submit" value="Lancer la recherche" title="Lancer ma recherche"  />
		</form>

Au chargement de la page le bouton est cliquable...

**E.Bzz** · 02/06/2009, 14h24

Envoyé par zephben

Au chargement de la page le bouton est cliquable...

Normal, tu n'as désactivé que le select

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input disabled="disabled" name="validation" id="submit" type="submit" value="Lancer la recherche" title="Lancer ma recherche"  />

A+

**zephben** · 02/06/2009, 14h30

Envoyé par E.Bzz

Normal, tu n'as désactivé que le select

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input disabled="disabled" name="validation" id="submit" type="submit" value="Lancer la recherche" title="Lancer ma recherche"  />

A+

Hi hi quand je fait cela, le bouton reste disabled quoi qu'il arrive !

**E.Bzz** · 02/06/2009, 14h36

Tu peux nous faire voir comment tu génères le 2° select, à présent ?

A+

**andry.aime** · 02/06/2009, 14h36

As tu mis

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

echo "<select style=\"width:400px;\" size=\"1\" name=\"ChercheModele\" onchange=\"fonction(this)\" >";

Sinon installe Firebug et montre nous le resultat du requête AJAX;

**zephben** · 02/06/2009, 14h46

Envoyé par E.Bzz

Tu peux nous faire voir comment tu génères le 2° select, à présent ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
        echo "<select style=\"width:400px;\" size=\"1\" name=\"ChercheModele\" onchange=\"fonction(this)\" >";
        if(isset($_POST["idMarque"])){
                mysql_connect("                                            ");
                mysql_select_db("    ");
                $res = mysql_query("SELECT id,lemodele,url FROM LISTEmodele 
                        WHERE idMarque=".$_POST["idMarque"]." ORDER BY lemodele");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["url"]."'>".$row["lemodele"]."</option>";
                }
        }
        echo "</select><br />";
?>

Envoyé par andry.aime

As tu mis
echo "<select style=\"width:400px;\" size=\"1\" name=\"ChercheModele\" onchange=\"fonction(this)\" >";

Oui c'est fait !

Sinon installe Firebug et montre nous le resultat du requête AJAX;

J'ai firebug mais je ne sais pas quoi en faire !

**E.Bzz** · 02/06/2009, 14h55

Envoyé par andry.aime

1-Fait sortir le premier option avec la valeur -1 de la boucle while.

Tu ne l'as pas "fait sortir", mais carrément supprimé

Du coup, plus d'option value="-1"
Du coup le test ne marche pas.

Rajoute-le, mais avant le while (comme suggéré par Andry)

A+

**zephben** · 02/06/2009, 14h56

J'essais cela de suite

**andry.aime** · 02/06/2009, 14h57

Tu as oublié de mettre

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

echo "<option value='-1' selected='selected'>Choisissez un mod&egrave;le</option>";

avant le boucle while.
Pour Firebug, dans le console regarde, tu développes le + devant le

POST http://localhost/...

Il y a ensuite 3 onglets et regarde ce qui se trouve dans l'onglet Réponse.

**zephben** · 02/06/2009, 15h05

Parfait parfait parfait !!!!

Un grand merci à vous tous ! Merci andry.aime, Merci E.Bzz !
Merci à RapotOR via le chat !

J'suis bien content de votre réactivité et de vos performances...
Si un jour je peux vous rendre l'appareil, hésiter pas à faire signe.

Activer bouton submit selon liste déroulante

JavaScript

Discussions similaires

Partager

Partager