Formulier div aan/uit
Ik heb voor de site www.p i c e l.nl een formulier opgesteld. (klik op webdesign)
Ik wil dat als iemand een andere klasse heeft hij.zij het zelf aan kan geven in het formulier. Echter moet dit zo worden gemaakt dat:
- Als je op anders klikt, een tekstvak ontstaat;
- Als je toch van mening bent dat je in een andere klasse hoort, je die aan kan klikken en het tekstvak weer weg gaat.
Zoals het nu is: je klikt op het bolletje anders en typt in het vak, HAT VAK GAAT DAN WEG!
Ik heb het script (van Jan Koehoorn) aangepast op een andere pagina
http://www.p i c e l.nl/form.html
<-Zie broncode->
Wie kan mij helpen mijn doel te verwezenlijken? :P
M.v.g,
Jeffrey
Gewijzigd op 01/01/1970 01:00:00 door FRizZL isMijnUsername
Gesponsorde koppelingen:
Even tussendoor: het is een wonder dat je script op http://www.picel.nl/form.html werkt, want er staan geen html, geen head en geen body tags in.
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
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
<!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" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
#extra_inputs { display: none; }
</style>
<script type="text/javascript">
window.onload = init;
function init () {
var extra = document.getElementById ('extra_inputs');
document.getElementById ('anders1').onclick = function () {
if (this.checked) {
extra.style.display = 'block';
}
}
document.getElementById ('anders2').onclick = function () {
if (this.checked) {
extra.style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="container">
<h1>Jan Koehoorn | Extra inputs on a form</h1>
<form method="post" action="#">
<div>
<input id="anders1" name="anders" type="radio" value="anders1" />
<label>Anders 1:</label>
<input id="anders2" name="anders" type="radio" value="anders2" />
<label>Anders 2:</label>
</div>
<div id="extra_inputs">
<label>tekst 1:</label>
<input id="klasse_anders" name="klasse_anders" type="text" />
</div>
</form>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
#extra_inputs { display: none; }
</style>
<script type="text/javascript">
window.onload = init;
function init () {
var extra = document.getElementById ('extra_inputs');
document.getElementById ('anders1').onclick = function () {
if (this.checked) {
extra.style.display = 'block';
}
}
document.getElementById ('anders2').onclick = function () {
if (this.checked) {
extra.style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="container">
<h1>Jan Koehoorn | Extra inputs on a form</h1>
<form method="post" action="#">
<div>
<input id="anders1" name="anders" type="radio" value="anders1" />
<label>Anders 1:</label>
<input id="anders2" name="anders" type="radio" value="anders2" />
<label>Anders 2:</label>
</div>
<div id="extra_inputs">
<label>tekst 1:</label>
<input id="klasse_anders" name="klasse_anders" type="text" />
</div>
</form>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Bedankt! Bedankt voor die goeie site @ Arjan.
Bedankt Jan, voor je originele script en voor de verbeterde versie.
En ja, 't was een wonder, maar ik heb daar nog nooit problemen mee gehad dat als ik <html><head><body> weglaat, het script niet werkt!
TnX Dudes! Nog fijne vakantie!
Jeffrey
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<!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" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
