waarde textvelden optellen met js
Met onderstaande code lukt het om de totaalwaarde van de 3 tekstvelden weer te geven in het input_tot veld. Als ik de tekstvelden niet handmatig invul maar indirect d.m.v een js-functie (via een select bijvoorbeeld) dan wordt het totaal niet meer weergegeven. Hoe moet ik de subtotaal_OD functie aanpassen om dit wel voor elkaar te krijgen?
Code (php)
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
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
<script type="text/javascript">
function subtotaal_OD()
{
var prijs_1 = parseInt(document.getElementById('input_1').value)||0;
var prijs_2 = parseInt(document.getElementById('input_2').value)||0;
var prijs_3 = parseInt(document.getElementById('input_3').value)||0;
var prijs_totaal = prijs_1+prijs_2+prijs_3;
document.getElementById('input_tot').value = prijs_totaal;
}
</script>
</head>
<body>
<form id="testje">
<input
type = "text"
class = ""
name = "input_1"
value = ""
id = "input_1"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<input
type = "text"
class = ""
name = "input_2"
value = ""
id = "input_2"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<input
type = "text"
class = ""
name = "input_3"
value = ""
id = "input_3"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<input
type = "text"
class = ""
name = "input_tot"
value = ""
id = "input_tot"
readonly
/>
</form>
function subtotaal_OD()
{
var prijs_1 = parseInt(document.getElementById('input_1').value)||0;
var prijs_2 = parseInt(document.getElementById('input_2').value)||0;
var prijs_3 = parseInt(document.getElementById('input_3').value)||0;
var prijs_totaal = prijs_1+prijs_2+prijs_3;
document.getElementById('input_tot').value = prijs_totaal;
}
</script>
</head>
<body>
<form id="testje">
<input
type = "text"
class = ""
name = "input_1"
value = ""
id = "input_1"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<input
type = "text"
class = ""
name = "input_2"
value = ""
id = "input_2"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<input
type = "text"
class = ""
name = "input_3"
value = ""
id = "input_3"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<input
type = "text"
class = ""
name = "input_tot"
value = ""
id = "input_tot"
readonly
/>
</form>
Gewijzigd op 15/05/2013 21:57:16 door Peter van den Dungen
Ik dacht dat dit met 'onchange' wel zou moeten lukken, maar na kort uitproberen bleek dit niet te werken. Het enige wat ik dan kan bedenken is dat je simpelweg 'subtotaal_OD' aanroept nadat je de waarde in je veld hebt bewerkt.
Code (php)
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
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
<script type="text/javascript">
function subtotaal_OD()
{
var prijs_1 = parseInt(document.getElementById('input_1').value)||0;
var prijs_2 = parseInt(document.getElementById('input_2').value)||0;
var prijs_3 = parseInt(document.getElementById('input_3').value)||0;
var prijs_totaal = prijs_1+prijs_2+prijs_3;
document.getElementById('input_tot').value = prijs_totaal;
}
</script>
<script type="text/javascript">
function test1()
{
var prijs_1 = parseInt(document.getElementById('select_1').value);
document.getElementById('input_1').value = prijs_1;
}
</script>
<script type="text/javascript">
function test2()
{
var prijs_2 = parseInt(document.getElementById('select_2').value);
document.getElementById('input_2').value = prijs_2;
}
</script>
<script type="text/javascript">
function test3()
{
var prijs_3 = parseInt(document.getElementById('select_3').value);
document.getElementById('input_3').value = prijs_3;
}
</script>
</head>
<body>
<form id="testje">
<select name="select_1" id="select_1" onChange="test1();"/>
<option value="10">10</option>
<option value="25">25</option>
<option value="40">40</option>
</select>
<input
type = "text"
class = ""
name = "input_1"
value = ""
id = "input_1"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<select name="select_2" id="select_2" onChange="test2();"/>
<option value="10">10</option>
<option value="25">25</option>
<option value="40">40</option>
</select>
<input
type = "text"
class = ""
name = "input_2"
value = ""
id = "input_2"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<select name="select_3" id="select_3" onChange="test3();"/>
<option value="10">10</option>
<option value="25">25</option>
<option value="40">40</option>
</select>
<input
type = "text"
class = ""
name = "input_3"
value = ""
id = "input_3"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<input
type = "text"
class = ""
name = "input_tot"
value = ""
id = "input_tot"
readonly
/>
</form>
function subtotaal_OD()
{
var prijs_1 = parseInt(document.getElementById('input_1').value)||0;
var prijs_2 = parseInt(document.getElementById('input_2').value)||0;
var prijs_3 = parseInt(document.getElementById('input_3').value)||0;
var prijs_totaal = prijs_1+prijs_2+prijs_3;
document.getElementById('input_tot').value = prijs_totaal;
}
</script>
<script type="text/javascript">
function test1()
{
var prijs_1 = parseInt(document.getElementById('select_1').value);
document.getElementById('input_1').value = prijs_1;
}
</script>
<script type="text/javascript">
function test2()
{
var prijs_2 = parseInt(document.getElementById('select_2').value);
document.getElementById('input_2').value = prijs_2;
}
</script>
<script type="text/javascript">
function test3()
{
var prijs_3 = parseInt(document.getElementById('select_3').value);
document.getElementById('input_3').value = prijs_3;
}
</script>
</head>
<body>
<form id="testje">
<select name="select_1" id="select_1" onChange="test1();"/>
<option value="10">10</option>
<option value="25">25</option>
<option value="40">40</option>
</select>
<input
type = "text"
class = ""
name = "input_1"
value = ""
id = "input_1"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<select name="select_2" id="select_2" onChange="test2();"/>
<option value="10">10</option>
<option value="25">25</option>
<option value="40">40</option>
</select>
<input
type = "text"
class = ""
name = "input_2"
value = ""
id = "input_2"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<select name="select_3" id="select_3" onChange="test3();"/>
<option value="10">10</option>
<option value="25">25</option>
<option value="40">40</option>
</select>
<input
type = "text"
class = ""
name = "input_3"
value = ""
id = "input_3"
onKeyUp="subtotaal_OD();"
/>
<br/><br/>
<input
type = "text"
class = ""
name = "input_tot"
value = ""
id = "input_tot"
readonly
/>
</form>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
function test1()
{
var prijs_1 = parseInt(document.getElementById('select_1').value);
document.getElementById('input_1').value = prijs_1;
subtotaal_OD()
}
function test2()
{
var prijs_2 = parseInt(document.getElementById('select_2').value);
document.getElementById('input_2').value = prijs_2;
subtotaal_OD()
}
function test3()
{
var prijs_3 = parseInt(document.getElementById('select_3').value);
document.getElementById('input_3').value = prijs_3;
subtotaal_OD()
}
</script>
function test1()
{
var prijs_1 = parseInt(document.getElementById('select_1').value);
document.getElementById('input_1').value = prijs_1;
subtotaal_OD()
}
function test2()
{
var prijs_2 = parseInt(document.getElementById('select_2').value);
document.getElementById('input_2').value = prijs_2;
subtotaal_OD()
}
function test3()
{
var prijs_3 = parseInt(document.getElementById('select_3').value);
document.getElementById('input_3').value = prijs_3;
subtotaal_OD()
}
</script>
Op deze manier word de functie subtotaal_OD() ook uitgevoerd bij test1/2/3
=> http://jsbin.com/itahow/1/edit
Gewijzigd op 16/05/2013 20:39:15 door Pieter R
Dankjewel!