Valeur maximum à entrer pour un input

**Medenor** · 07/04/2010, 09h26

Bonsoir

J'ai créé ceci avec l'aide de membres d'ici:

http://img402.imageshack.us/img402/1433/genscreen.png

J'aurai souhaité que dans les cases de la 2e ligne, on ne puisse pas entrer un chiffre plus grand que 3.

De plus, dans le système de jeu que nous utilisons, nous voudrions qu'au total, la somme des valeurs entrées dans toutes les cases de la ligne 2 ne puisse pas dépasser 5 (en effet, cette ligne est là pour que la personne attribue 5 points répartis comme elle le souhaite, mais elle ne peut jamais allouer plus de 3 points dans la même case)

Le code:

1) presentation.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Warhammer JDR: Jeu de r&ocirc;le par forum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylegenprez.css" rel="stylesheet" type="text/css" />
<!-- script FOR --> 
		<script type="text/javascript">
		function computeResult1() 
		{
			var elmt_form = document.getElementById('form1');
			var resultfor = elmt_form.elements['resultfor'];
 
			var value1 = elmt_form.elements['for1'].value;
			var value2 = elmt_form.elements['for2'].value;
			var value3 = elmt_form.elements['for3'].value;
 
			if (testInt(value1) && testInt(value2) && testInt(value3)) {
				resultfor.value = parseInt(value1) + parseInt(value2) + parseInt(value3);
			}
			else {
				alert('Une valeur a mal &eacute;t&eacute; enregistr&eacute;e ou il manque une valeur');
			}
		}
 
		function testInt(value) 
		{
			return value == parseInt(value);
		}
 
		</script>
<!-- script END --> 
		<script type="text/javascript">
		function computeResult2() 
		{
			var elmt_form = document.getElementById('form1');
			var resultend = elmt_form.elements['resultend'];
 
			var value4 = elmt_form.elements['end1'].value;
			var value5 = elmt_form.elements['end2'].value;
			var value6 = elmt_form.elements['end3'].value;
 
			if (testInt(value4) && testInt(value5) && testInt(value6)) {
				resultend.value = parseInt(value4) + parseInt(value5) + parseInt(value6);
			}
			else {
				alert('Une valeur a mal &eacute;t&eacute; enregistr&eacute;e ou il manque une valeur');
			}
		}
 
		function testInt(value) 
		{
			return value == parseInt(value);
		}
 
		</script>
<!-- script HAB --> 
		<script type="text/javascript">
		function computeResult3() 
		{
			var elmt_form = document.getElementById('form1');
			var resulthab = elmt_form.elements['resulthab'];
 
			var value7 = elmt_form.elements['hab1'].value;
			var value8 = elmt_form.elements['hab2'].value;
			var value9 = elmt_form.elements['hab3'].value;
 
			if (testInt(value7) && testInt(value8) && testInt(value9)) {
				resulthab.value = parseInt(value7) + parseInt(value8) + parseInt(value9);
			}
			else {
				alert('Une valeur a mal &eacute;t&eacute; enregistr&eacute;e ou il manque une valeur');
			}
		}
 
		function testInt(value) 
		{
			return value == parseInt(value);
		}
 
		</script>
<!-- script CHAR --> 
		<script type="text/javascript">
		function computeResult4() 
		{
			var elmt_form = document.getElementById('form1');
			var resultchar = elmt_form.elements['resultchar'];
 
			var value10 = elmt_form.elements['char1'].value;
			var value11 = elmt_form.elements['char2'].value;
			var value12 = elmt_form.elements['char3'].value;
 
			if (testInt(value10) && testInt(value11) && testInt(value12)) {
				resultchar.value = parseInt(value10) + parseInt(value11) + parseInt(value12);
			}
			else {
				alert('Une valeur a mal &eacute;t&eacute; enregistr&eacute;e ou il manque une valeur');
			}
		}
 
		function testInt(value) 
		{
			return value == parseInt(value);
		}
 
		</script>
 
<!-- script INT --> 
		<script type="text/javascript">
		function computeResult5() 
		{
			var elmt_form = document.getElementById('form1');
			var resultint = elmt_form.elements['resultint'];
 
			var value13 = elmt_form.elements['int1'].value;
			var value14 = elmt_form.elements['int2'].value;
			var value15 = elmt_form.elements['int3'].value;
 
			if (testInt(value13) && testInt(value14) && testInt(value15)) {
				resultint.value = parseInt(value13) + parseInt(value14) + parseInt(value15);
			}
			else {
				alert('Une valeur a mal &eacute;t&eacute; enregistr&eacute;e ou il manque une valeur');
			}
		}
 
		function testInt(value) 
		{
			return value == parseInt(value);
		}
 
		</script>
 
 <!-- script INI --> 
		<script type="text/javascript">
		function computeResult6() 
		{
			var elmt_form = document.getElementById('form1');
			var resultini = elmt_form.elements['resultini'];
 
			var value16 = elmt_form.elements['ini1'].value;
			var value17 = elmt_form.elements['ini2'].value;
			var value18 = elmt_form.elements['ini3'].value;
 
			if (testInt(value16) && testInt(value17) && testInt(value18)) {
				resultini.value = parseInt(value16) + parseInt(value17) + parseInt(value18);
			}
			else {
				alert('Une valeur a mal &eacute;t&eacute; enregistr&eacute;e ou il manque une valeur');
			}
		}
 
		function testInt(value) 
		{
			return value == parseInt(value);
		}
 
		</script>
 
<!-- script PAR --> 
		<script type="text/javascript">
		function computeResult7() 
		{
			var elmt_form = document.getElementById('form1');
			var resultpar = elmt_form.elements['resultpar'];
 
			var value19 = elmt_form.elements['par1'].value;
			var value20 = elmt_form.elements['par2'].value;
			var value21 = elmt_form.elements['par3'].value;
 
			if (testInt(value19) && testInt(value20) && testInt(value21)) {
				resultpar.value = parseInt(value19) + parseInt(value20) + parseInt(value21);
			}
			else {
				alert('Une valeur a mal &eacute;t&eacute; enregistr&eacute;e ou il manque une valeur');
			}
		}
 
		function testInt(value) 
		{
			return value == parseInt(value);
		}
 
		</script>
 
<!-- script ATT --> 
		<script type="text/javascript">
		function computeResult8() 
		{
			var elmt_form = document.getElementById('form1');
			var resultatt = elmt_form.elements['resultatt'];
 
			var value22 = elmt_form.elements['att1'].value;
			var value23 = elmt_form.elements['att2'].value;
			var value24 = elmt_form.elements['att3'].value;
 
			if (testInt(value22) && testInt(value23) && testInt(value24)) {
				resultatt.value = parseInt(value22) + parseInt(value23) + parseInt(value24);
			}
			else {
				alert('Une valeur a mal &eacute;t&eacute; enregistr&eacute;e ou il manque une valeur');
			}
		}
 
		function testInt(value) 
		{
			return value == parseInt(value);
		}
 
		</script>
 
</head>
<body><?php
        require("presentation_generator.php");
        form_meta("presentationfinale.php");
?>

2) presentation_generator.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<?php
function form_meta($wow)
{
echo'
	<form id="form1" method="post" action="'.$wow.'">
 
		<table width="600" border="0" cellspacing="0" cellpadding="0" class="table">
			<tr>
            <td valign="top" align="right" >Nom & Pr&eacute;nom du personnage: </td>
            <td valign="top"><input name="nomperso" type="text" id="nomperso" size="25" maxlength="255" /></td>
          </tr>
          <tr>
            <td valign="top" align="right" >&Acirc;ge du personnage: </td>
            <td valign="top"><input name="age" type="text" id="age" size="4" maxlength="4"> ans</td>
          </tr>
          <tr>
           <td valign="top" align="right" >Race </td>
            <td valign="top"><input name="race" type="text" id="race" size="15" maxlength="255"></td>
          </tr>
          <tr>
            <td valign="top" align="right" >Carri&egrave;re : <br /></td>
            <td valign="top"><input name="carriere" type="text" id="carriere" /></td>
          </tr>    
          <tr>
            <td valign="top" align="right" >Lieu de d&eacute;part: <br /></td>
            <td valign="top"><input name="depart" type="text" id="depart"></td>
          </tr>   
		  <tr>
            <td valign="top" align="right" >Fr&eacute;quence de jeu: <br /></td>
            <td valign="top"><input name="frequence" type="text" id="frequence"></td>
          </tr>  
          <tr>
            <td valign="top" align="right" >Description physique du personnage (minimum 10 lignes compl&egrave;tes)<br /></td>
            <td valign="top"><textarea name="physique" cols="50" rows="4" id="physique"></textarea></td>
          </tr>
		   <tr>
            <td valign="top" align="right" >Description psychologique du personnage (minimum 10 lignes compl&egrave;tes)<br /></td>
            <td valign="top"><textarea name="psycho" cols="50" rows="4" id="psycho"></textarea></td>
          </tr>
		   <tr>
            <td valign="top" align="right" >Histoire du personnage (avant qu\'il ne commence l\'aventure ici) (minimum 15 lignes compl&egrave;tes)<br /></td>
            <td valign="top"><textarea name="histoire" cols="50" rows="4" id="histoire"></textarea></td>
          </tr>
		  <tr>
            <td valign="top" align="right" >Vos 3 comp&eacute;tence de d&eacute;part (<a href="http://warhammer-jdr.kalikoba.com/wiki-v2/doku.php?id=1.5_competences" target=_blank>r&egrave;gles</a>):<br /></td>
            <td valign="top"><textarea name="comp" cols="50" rows="2" id="dot"></textarea></td>
          </tr>
		  <tr>
            <td valign="top" align="right" >Votre bourse de pistole et vos dotations initiales (<a href="x" target=_blank>r&egrave;gles</a>):<br /></td>
            <td valign="top"><textarea name="dot" cols="50" rows="2" id="dot"></textarea></td>
          </tr>
		  <tr>
            <td valign="top" align="right" >Autres (<a href="http://warhammer-jdr.kalikoba.com/wiki-v2/doku.php?id=3.7_regles_concernant_les_croyances" target=_blank>Points de croyances</a>, traits particuliers, notes, etc):<br /></td>
            <td valign="top"><textarea name="autre" cols="50" rows="2" id="autre"></textarea></td>
          </tr>
            </table>
<!-- debut demarche profil -->
			<table width="600" border="0" cellspacing="0" cellpadding="0" class="table" align="justify">
			<tr >
				<th scope="col"></th>
				<th scope="col">FOR</th>
				<th scope="col">END</th>
				<th scope="col">HAB</th>
				<th scope="col">CHAR</th>
				<th scope="col">INT</th>
				<th scope="col">INI</th>
				<th scope="col">PAR</th>
				<th scope="col">ATT</th>
			</tr>
			<tr>
				<th scope="row">Profil de base</th>
				<td align="left"><input name="for1" onchange="javascript:computeResult1();" value="0" size="2" maxlength="2" /></td>
				<td align="left"><input name="end1" onchange="javascript:computeResult2();" value="0" size="2" maxlength="2" /> 	</td>
				<td align="left"><input name="hab1" onchange="javascript:computeResult3();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="char1" onchange="javascript:computeResult4();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="int1" onchange="javascript:computeResult5();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="ini1" onchange="javascript:computeResult6();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="par1" onchange="javascript:computeResult7();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="att1" onchange="javascript:computeResult8();" value="0" size="2" maxlength="2" />  				</td>
 
 
			</tr>
			<tr>
				<th scope="row">Vos 5 PC</th>
				<td align="left"><input name="for2" onchange="javascript:computeResult1();" value="0" size="2" maxlength="2" /> 			</td>
				<td align="left"><input name="end2" onchange="javascript:computeResult2();" value="0" size="2" maxlength="2" /> 	</td>
				<td align="left"><input name="hab2" onchange="javascript:computeResult3();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="char2" onchange="javascript:computeResult4();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="int2" onchange="javascript:computeResult5();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="ini2" onchange="javascript:computeResult6();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="par2" onchange="javascript:computeResult7();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="att2" onchange="javascript:computeResult8();" value="0" size="2" maxlength="2" />  				</td
			</tr>
			<tr>
				<th scope="row">Bonus/malus de classe (malus = nombre pr&eacute;c&eacute;d&eacute; d\'un - !)</th>
				<td align="left"><input name="for3" onchange="javascript:computeResult1();" value="0" size="2" maxlength="2" />					</td>
				<td align="left"><input name="end3" onchange="javascript:computeResult2();" value="0" size="2" maxlength="2" />	</td>
				<td align="left"><input name="hab3" onchange="javascript:computeResult3();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="char3" onchange="javascript:computeResult4();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="int3" onchange="javascript:computeResult5();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="ini3" onchange="javascript:computeResult6();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="par3" onchange="javascript:computeResult7();" value="0" size="2" maxlength="2" />  				</td>
				<td align="left"><input name="att3" onchange="javascript:computeResult8();" value="0" size="2" maxlength="2" />  				</td
			</tr>
			<tr>
				<th scope="row">Profil final</th>
				<td align="left"><input id="resultfor" name="resultfor" size="2" maxlength="2" /></td>
				<td align="left"><input id="resultend" name="resultend" size="2" maxlength="2" /></td>
				<td align="left"><input id="resulthab" name="resulthab" size="2" maxlength="2" /></td>
				<td align="left"><input id="resultchar" name="resultchar" size="2" maxlength="2" /></td>
				<td align="left"><input id="resultint" name="resultint" size="2" maxlength="2" /></td>
				<td align="left"><input id="resultini" name="resultini" size="2" maxlength="2" /></td>
				<td align="left"><input id="resultpar" name="resultpar" size="2" maxlength="2" /></td>
				<td align="left"><input id="resultatt" name="resultatt" size="2" maxlength="2" /></td>
 
 
			</tr>
		</table><br \>
		<center><input type="submit" value="G&eacute;n&eacute;rer la pr&eacute;sentation" /></center>
 
    </form>';
}

Merci d'avance

**vermine** · 07/04/2010, 09h37

Bonjour,

Sur les <input> que vous voulez vérifier, vous pouvez ajouter sur le onchange (par exemple) une fonction de la sorte:

Code :

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

1
2
 
onchange="ma_verification(this);"

Cette fonction ferait deux choses, tout d'abord, elle vérifierait que la valeur entrée est bien comprise entre 0 et 3:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function ma_verification(champ)
{
     if(parseInt(champ.value,10) >= 0 && parseInt(champ.value,10) <= 3)
     {
          alert("Ok");
     }
     else
     {
          alert("Pas ok!");
          champ.value = "";
          champ.focus();
     }
}

Ensuite, elle vérifierait la somme totale. Alors soit vous recalculez tout à chaque fois, soit vous utilisez une variable globale que vous incrémentez/décrémentez au fur et à mesure.

Vous pouvez bien entendu vous servir d'une de vos fonctions déjà existante et lui rajouter ces deux vérifications.
Par contre, vous avez défini x fois la fonction: testInt(value). Sachez que seule sa dernière définition sera retenue et prise en compte. Donc, ne la définissez qu'une et une seule fois.

**Medenor** · 07/04/2010, 09h50

Bonjour

Donc

Code :

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

onchange="ma_verification(this);"

je le met dans par exemple

Code :

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

1
2
<td align="left"><input name="for2" onchange="javascript:computeResult1();" onchange="ma_verification(this);"
 value="0" size="2" maxlength="2" /> 			</td>

et la fonction:

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
<!-- script FOR --> 
		<script type="text/javascript">
		function computeResult1() 
		{
			var elmt_form = document.getElementById('form1');
			var resultfor = elmt_form.elements['resultfor'];
 
			var value1 = elmt_form.elements['for1'].value;
			var value2 = elmt_form.elements['for2'].value;
			var value3 = elmt_form.elements['for3'].value;
 
			if (testInt(value1) && testInt(value2) && testInt(value3)) {
				resultfor.value = parseInt(value1) + parseInt(value2) + parseInt(value3);
			}
			else {
				alert('Une valeur a mal &eacute;t&eacute; enregistr&eacute;e ou il manque une valeur');
			}
		}
 
		function ma_verification(champ)
{
     if(parseInt(champ.value,10) >= 0 && parseInt(champ.value,10) <= 3)
     {
          alert("Ok");
     }
     else
     {
          alert("Pas ok!");
          champ.value = "";
          champ.focus();
     }
}
 
 
		</script>

?

Mais pour la somme totale des valeurs de la 2e ligne, je ne vois pas :s
Je ne connais pas javascript (pas encore) donc je suis un peu largué

NB: merci pour la remarque du testInt, j'ai donc supprimé tout et remis une seule fois au dernier script

**vermine** · 07/04/2010, 09h57

Non, on ne définit qu'une fois l'évènement mais on peut lui préciser plusieurs actions:

Code :

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

1
2
 
onchange="javascript:computeResult1();, ma_verification(this);"

Vous organisez le code comme vous voulez. Personnellement, j'essaierai d'obtenir une seule fonction pour tout vos onchange car ils sont fort semblables. Mais bon, ce qu'il faut bien remarquer c'est que vos fonction computeResult joue sur les colonnes, or ma_verification joue sur les lignes. A vous de vous de voir l'organisation qui vous convient le mieux.

Variable globale:

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
 
var total_ligne_deux = 0;
 
function ma_verification(champ)
{
     if(parseInt(champ.value,10) >= 0 && parseInt(champ.value,10) <= 3)
     {
          alert("Ok");
          if(total_ligne_deux + champ.value > 5)
          {
               alert("Pas ok!");
               champ.value = "";
               champ.focus();
          }
          else
          {
               total_ligne_deux += champ.value;
          }
     }
     else
     {
          alert("Pas ok!");
          champ.value = "";
          champ.focus();
     }
}

Sauf que dans ce cas-là, on ne voit pas si la personne a modifié la valeur. Si il y avait 2 dans la case et qu'il a mis 1, la variable globale gardera en mémoire 3, au lieu de 1...

Donc je propose de recalculer à chaque fois:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
...
     if(parseInt(champ.value,10) >= 0 && parseInt(champ.value,10) <= 3)
     {
          alert("Ok");
 
          var champ1 = ...;
          var champ2 = ...;
          ...
 
          var total = champ1 +  champ2 + ...;
          if(total > 5)
                ...

Avec les éventuels parseInt.

Valeur maximum à entrer pour un input

JavaScript

Vue hybride

Discussions similaires

Partager

Partager