plusieurs str=prompt et fonction non démarré

Version imprimable

bonjour

j'essaye de modifier un script dont j'avais cru comprendre le fonctionnement.
Mais apparemment ce n'est pas le cas.
dans 2 champs différents select d'un formulaire je veux une fenêtre prompt si une valeur est choisie.
la première fonction valeur(test1) fonctionne mais le deuxième prod(newprod) la console d'erreur firefox me dit qu'elle n'est pas démarré.

Et pour ma première fonction si j'affiche la fenêtre avec le résultat du prompt par le choix adéquat du select, je n'arrive pas à la ré-effacer si je fais un autre choix dans le select.

Code:

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
  <script type="text/javascript">
    function valeur(test1){
	i = document.getElementById("nouvoclient").options.length;
 
	if (test1=='autrec'){
		var str= prompt("Indiquer ici le nouveau client","");
		document.getElementById('newc1').value=str;
		document.getElementById('newclient').style.visibility="visible";
	}
 
	if (test1 != "autrec") document.getElementById("autre").options.length = i;
}
 
function prod(newprod){
i = document.getElementById("nprod").options.length;
 
	if (newprod=='autrep'){
		var str= prompt("Indiquer ici la nouvelle prod","");
		document.getElementById('newprod1').value=str;
		document.getElementById('newproduction').style.visibility="visible";
	}
 
	if (newprod != "autrep") document.getElementById("autreprod").options.length = i;
}
 
 
</script>

1er select qui fonctionne mais qui n'efface pas la fenêtre si je change mon choix

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 echo"Client<br><select name='client'div class='champselect' id='nouvoclient' onChange='valeur(this.value)'>";
  //insertion d'un champ vide (client indefini)
echo"<option value='non'>Ind&eacute;fini</option>";
echo"<option value='autrec'>Nouveau client &agrave; pr&eacute;ciser</option>";
$sql= 'SELECT *  FROM `list_client`  ORDER BY client';
$resultat=mysql_query($sql);
while ($listeclient = mysql_fetch_assoc($resultat)){
    if(!empty($listeclient['client'])){
        $selected = ($listeclient['client']==$client)? ' selected="selected"' : '';
 echo '<option value="'.$listeclient['client'].'"'.$selected.'">'.$listeclient['client'].'</option>';
}}
<font style='visibility: hidden' id='newclient'>nouveau client:<br><input name='newc2' id='newc1'></font>

2e select non démarré

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <?php
  echo"<select name='prod'div class='champselect' id='nprod' onChange='prod(this.value)'>";
 
  //insertion d'un champ vide (prod indefini)
echo"<option value='non d&eacute;fini'>Ind&eacute;fini</option>";
echo"<option value='autrep'>Nouvelle prod &agrave; pr&eacute;ciser</option>";
$sql= 'SELECT *  FROM `list_prod`  ORDER BY prod';
$resultat=mysql_query($sql);
while ($listeprod = mysql_fetch_assoc($resultat)){
    if(!empty($listeprod['prod'])){
        $selected = ($listeclient['prod']==$producteur)? ' selected="selected"' : '';
 echo '<option value="'.$listeprod['prod'].'"'.$selected.'">'.$listeprod['prod'].'</option>';
}
}
?>
 <font style='visibility: hidden' id='newproduction'>nouvelle prod:<br><input name='newprod' id='newprod1'></font>
</td>

03/11/2012, 09h52
NoSmoking

Bonjour,
merci de mettre le code HTML généré et non le code PHP
:fleche: http://www.developpez.net/forums/d73...isation-forum/

voici donc le script

Code:

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
   <script type="text/javascript">
    function valeur(test1){
	i = document.getElementById("nouvoclient").options.length;
 
	if (test1=='autrec'){
		var str= prompt("Indiquer ici le nouveau client","");
		document.getElementById('newc1').value=str;
		document.getElementById('newclient').style.visibility="visible";
	}
 
	if (test1 != "autrec") document.getElementById("autre").options.length = i;
}
 
function prod(newprod){
i = document.getElementById("nprod").options.length;
 
	if (newprod=='autrep'){
		var str= prompt("Indiquer ici la nouvelle prod","");
		document.getElementById('newprod1').value=str;
		document.getElementById('newproduction').style.visibility="visible";
	}
 
	if (newprod != "autrep") document.getElementById("autreprod").options.length = i;
}
 
 
</script>

et le code source généré par le navigateur

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <script type="text/javascript">
    function valeur(test1){
        i = document.getElementById("nouvoclient").options.length;
 
        if (test1=='autrec'){
                var str= prompt("Indiquer ici le nouveau client","");
                document.getElementById('newc1').value=str;
                document.getElementById('newclient').style.visibility="visible";
        }
 
        if (test1 != "autrec") document.getElementById("autre").options.length = i;
}
 
function prod(newprod){
i = document.getElementById("nprod").options.length;
 
        if (newprod=='autrep'){
                var str= prompt("Indiquer ici la nouvelle prod","");
                document.getElementById('newprod1').value=str;
                document.getElementById('newproduction').style.visibility="visible";
        }
 
        if (newprod != "autrep") document.getElementById("autreprod").options.length = i;
}
 
 
</script>
<title>insertion d'un nouveau master</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 
</style>
 
</head>
 
<body>
 
<!--en tï¿½te -->
<div class="container">
 
<form action="master-insert2.php" method="post">
 
 
    <table  cellspacing="3" cellpadding="3" width="100%">
 
   <!--CIENT-->
   <td width="10%">
   Client<br><select name='client'div class='champselect' id='nouvoclient' onChange='valeur(this.value)'>
<option value='non'>Ind&eacute;fini</option>
<option value='autrec'>Nouveau client &agrave; pr&eacute;ciser</option></td>
   <td width="40px"><font style='visibility: hidden' id='newclient'>nouveau client:<br><input name='newc2' id='newc1'></font></td>
 <td width="300px">
 
   <!--prod -->
   <td valign="top"><label >PRODUCTION</label><br>
       <select name='prod'div class='champselect' id='nprod' onChange='prod(this.value)'>
<option value='non d&eacute;fini'>Ind&eacute;fini</option>
<option value='autrep'>Nouvelle prod &agrave; pr&eacute;ciser</option> <font style='visibility: hidden' id='newproduction'>nouvelle prod:<br><input name='newprod' id='newprod1'></font>
</td>

il y a pas mal de maladresse dans ton code et je vais commencer par la première qui fait planter IE

Code:

<select name='prod'div class='champselect' id='nprod' onChange='prod(this.value)'>

fonction avec le même nom qu'un élément, IE n'aime pas!

Autre morceau choisi
Code:

1 2 3 4 5 6 <td width="10%"> Client<br> <select name='client'div class='champselect' id='nouvoclient' onChange='valeur(this.value)'> <option value='non'>Indéfini</option> <option value='autrec'>Nouveau client à préciser</option> </td>
le HTML n'est pas conforme, manque la balise fermant </select>

Juste à la suite on trouve
Code:

1 2 3 <td width="40px"> <font style='visibility: hidden' id='newclient'>nouveau client:<br><input name='newc2' id='newc1'></font> </td>
font n'est pas un élément mais un balisage de style OBSOLETE.
A remplacer par une DIV par exemple pour que le code puisse l'afficher/masquer.

Les mêmes remarques s'applique à ton deuxième SELECT.

Je pense qu'il est préférable de corriger ces points avant de continuer.

merci no smoking, j'ai corrigé les erreurs, désolé pour

Citation:

le HTML n'est pas conforme, manque la balise fermant </select>

si j'avais les yeux en face des trous je l'aurais vu :oops:
je code JS est donc maintenant.

Code:

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
  <script type="text/javascript">
    function valeur(test1){
	i = document.getElementById("nouvoclient").options.length;
 
	if (test1=='autrec'){
		var str= prompt("Indiquer ici le nouveau client","");
		document.getElementById('newc1').value=str;
		document.getElementById('newclient').style.visibility="visible";
	}
 
	if (test1 != "autrec") document.getElementById("autre").options.length = i;
}
 
function production(newprod){
i = document.getElementById("laprod").options.length;
 
	if (newprod=='autrep'){
		var str= prompt("Indiquer ici la nouvelle prod","");
		document.getElementById('newprod1').value=str;
		document.getElementById('newproduction').style.visibility="visible";
	}
 
	if (newprod != "autrep") document.getElementById("autreprod").options.length = i;
}
 
 
</script>

la source

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <!--CLIENT-->
   <td width="10%">
   Client<br><select name='client'div class='champselect' id='nouvoclient' onChange='valeur(this.value)'>
<option value='non'>Ind&eacute;fini</option>
<option value='autrec'>Nouveau client &agrave; pr&eacute;ciser</option></select>  </td>
   <td width="40px"><div style='visibility: hidden' id='newclient'>nouveau client:<br><input name='newc2' id='newc1'></div></td>
 
 <!--prod -->
   <td valign="top"><label >PRODUCTION</label><br>
       <select name='prod'div class='champselect' id='laprod' onChange='production(this.value)'>
<option value='non d&eacute;fini'>Ind&eacute;fini</option>
<option value='autrep'>Nouvelle prod &agrave; pr&eacute;ciser</option></select> 
<div style='visibility: hidden' id='newproduction'><input name='newprod' id='newprod1'></div>
</td>

ce qui ne fonctionne pas encore c'est la disparition du champ qui était en hidden au départ.
Lorsque je l'affiche par le bon sélect, si je change mon select il reste affiché.

La console de débuggage du navigateur me renvoie ça

Citation:

TypeError: 'null' is not an object (evaluating 'document.getElementById("autreprod").options')

si je comprend bien le JS ne récupère pas les variables PHP et ne peut donc pas changer l'état de l'affichage.

04/11/2012, 09h23
NoSmoking

Citation:

Envoyé par rvm31

La console de débuggage du navigateur me renvoie ça

Citation:

TypeError: 'null' is not an object (evaluating 'document.getElementById("autreprod").options')

Il n'existe simplement pas d'élément ayant autreprod comme ID dans ton document.

j'ai modifié le code du JS comme suit pour afficher et masquer les fenêtres affichant les valeurs du prompt.
le code est récupéré sur internet mais je n'ai pas compris a quoi servait les .options.length, ou on pourrait dire également que je n'ai pas compris comment les mettre en oeuvre.
j'ai donc rajouter un .style.visibility="hidden" pour masquer le fenêtre tout marche impeccable.

Code:

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
<script type="text/javascript">
    function valeur(test1){
	i = document.getElementById("nouvoclient");
 
	if (test1=='autrec'){
		var str= prompt("Indiquer ici le nouveau client","");
		document.getElementById('newc1').value=str;
		document.getElementById('newclient').style.visibility="visible";
	}
 
	if (test1 != "autrec") {
            document.getElementById("nouvoclient");
        document.getElementById('newclient').style.visibility="hidden";
    }
}
 
function production(newprod){
i = document.getElementById("laprod");
 
	if (newprod=='autrep'){
		var str= prompt("Indiquer ici la nouvelle prod","");
		document.getElementById('newprod1').value=str;
		document.getElementById('newproduction').style.visibility="visible";
	}
 
	if (newprod != "autrep") {
            document.getElementById("laprod");
           document.getElementById('newproduction').style.visibility="hidden";
        }
}
 
 
</script>

05/11/2012, 18h32
NoSmoking

Citation:

je n'ai pas compris a quoi servait les .options.length

je n'ai pas regardé vraiment le contexte mais cela permet de supprimer des OPTIONs d'un SELECT en en réduisant indirectement leur nombre.