Javascript radio value
Ik heb een klein javascipt codetje en dat zorgt er voor dat er een div tevoorschijn komt als er op een bepaalde radio (nee geen luister radio maar een html element :P) geklikt word.
Code (php)
1
<input type="radio" name="tekst" value="2" id="two" onclick ="setCheckedValue('2')">
Zoals je ziet werkt het met onclick. Na op de submit button geklikt te hebben komt er een klein fout controle script (alles ingevuld etc.) en als dat dan niet zo is kan je op de link vorige drukken. Dan is de gekozen radio nog steeds geselecteerd maar dan wordt de div niet weergeven (opdat er niet op geklikt is).
Dus nu zoek ik iets wat kijkt wat de waarde is en dan doet wat de opdracht is (in dit geval een div laten zien)
Dit is wat ik nu heb:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function setCheckedValue(newValue) {
if(newValue == 6) {
document.getElementById("tekst22").style.display="block"
return;
}else{
document.getElementById("tekst22").style.display="none"
}
}
if(newValue == 6) {
document.getElementById("tekst22").style.display="block"
return;
}else{
document.getElementById("tekst22").style.display="none"
}
}
Ik weet verder niet heel veel van javascript.
Alvast bedankt voor de hulp
Gewijzigd op 01/01/1970 01:00:00 door Gaahtt
Edit:
Kan je hier mee voort?
To Do's voor jou:
*index.php is slechts als voorbeeld, je moet er absoluut niets van overnemen.
*js.js
setCheckedValue moet je uiteraard zelf aanpassen, maar die heb je zelf al.
Zorg dat je de juiste id's van de radio buttons als argument meegeeft met de constructor (js.js lijn 12) (en ook de juiste callback, maar die staat al zoals je ze wil).
Merk op:
* je moet niet overal meer onclick="setCheckedValue (... meer zetten.
* key is dus de plaats in de array. Dit komt niet overeen met enige id in de database.
EDIT (2): met IE geeft dit blijkbaar nog problemen, nog eens checken...
-----------------
index.php
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
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
<?php
$body = '
<div><label><input type="radio" name="product" id="product0"> probuct A</label></div>
<div><label><input type="radio" name="product" id="product1"> probuct B</label></div>
<div><label><input type="radio" name="product" id="product2"> probuct C</label></div>
<div><label><input type="radio" name="product" id="product3"> probuct D</label></div>
random link: <a href="?r='. rand(0, 100) .'">klik</a>. klik hierop en zie of het doet wat je wil, wanneer je op de Back button klikt.
<div id="grote_div"></div>
';
echo html($body);
function html($body)
{
return '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Radio button</title>
<script src="radio.js" language="javascript" type="text/javascript"></script>
<script src="js.js" language="javascript" type="text/javascript"></script>
<style>#grote_div {border: 1px solid #777777; min-height: 300px; margin: 4px; padding: 4px;}</style>
</head>
<body>
'. $body .'
</body>
</html>';
}
?>
$body = '
<div><label><input type="radio" name="product" id="product0"> probuct A</label></div>
<div><label><input type="radio" name="product" id="product1"> probuct B</label></div>
<div><label><input type="radio" name="product" id="product2"> probuct C</label></div>
<div><label><input type="radio" name="product" id="product3"> probuct D</label></div>
random link: <a href="?r='. rand(0, 100) .'">klik</a>. klik hierop en zie of het doet wat je wil, wanneer je op de Back button klikt.
<div id="grote_div"></div>
';
echo html($body);
function html($body)
{
return '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Radio button</title>
<script src="radio.js" language="javascript" type="text/javascript"></script>
<script src="js.js" language="javascript" type="text/javascript"></script>
<style>#grote_div {border: 1px solid #777777; min-height: 300px; margin: 4px; padding: 4px;}</style>
</head>
<body>
'. $body .'
</body>
</html>';
}
?>
js.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function onload() // van alles dat moet gebeuren nadat de pagina volledig geladen is
{
m_radio.init();
}
function setCheckedValue(key) // key van de array van radio buttons, bv. hier: key = 2 => 'product2'
{
var tekst = 'Geklikt op radiobutton '+ key +', of radiobutton '+ key +' was initieel ingesteld. Hier zou je dus een ajax request kunnen doen. Aan key weet je welke request je moet aanroepen';
document.getElementById( 'grote_div' ).innerHTML = tekst;
}
var m_radio; // Voorlopig is het script zo dat je de var m_radio moet noemen (of het aanpassen in Radio.clicked)
m_radio = new Radio(
Array('product0', 'product1', 'product2', 'product3')
, setCheckedValue
);
m_radio.addEvent(window, 'load', onload);
{
m_radio.init();
}
function setCheckedValue(key) // key van de array van radio buttons, bv. hier: key = 2 => 'product2'
{
var tekst = 'Geklikt op radiobutton '+ key +', of radiobutton '+ key +' was initieel ingesteld. Hier zou je dus een ajax request kunnen doen. Aan key weet je welke request je moet aanroepen';
document.getElementById( 'grote_div' ).innerHTML = tekst;
}
var m_radio; // Voorlopig is het script zo dat je de var m_radio moet noemen (of het aanpassen in Radio.clicked)
m_radio = new Radio(
Array('product0', 'product1', 'product2', 'product3')
, setCheckedValue
);
m_radio.addEvent(window, 'load', onload);
radio.js
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
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
// radio class
function Radio(ids, callBack) // array of id's
{
this.id = ids ; //
this.clickCallBack = callBack;
this.radioButtons = Array();
}
Radio.prototype.init = function()
{
var length = this.id.length
this.selected = null;
for (var i=0; i< length; i++)
{
this.radioButtons[i] = document.getElementById( this.id[i] );
if (this.radioButtons[i].checked )
this.selected = i;
this.addEvent(this.radioButtons[i], 'click', this.clicked);
}
if (this.selected)
this.clickCallBack(this.selected);
}
Radio.prototype.clicked = function()
{
var key = m_radio.object2key(this);
m_radio.clickCallBack(key);
}
Radio.prototype.object2key = function(obj)
{
var length = this.radioButtons.length
for (var i=0; i< length; i++)
{
if (obj == this.radioButtons[i])
return i;
}
return null;
}
Radio.prototype.addEvent = function(el, evname, func) {
if (el.attachEvent) { // IE
el.attachEvent("on" + evname, func);
} else if (el.addEventListener) { // Gecko / W3C
el.addEventListener(evname, func, true);
} else {
el["on" + evname] = func;
}
};
Radio.prototype.removeEvent = function(el, evname, func) {
if (el.detachEvent) { // IE
el.detachEvent("on" + evname, func);
} else if (el.removeEventListener) { // Gecko / W3C
el.removeEventListener(evname, func, true);
} else {
el["on" + evname] = null;
}
};
function Radio(ids, callBack) // array of id's
{
this.id = ids ; //
this.clickCallBack = callBack;
this.radioButtons = Array();
}
Radio.prototype.init = function()
{
var length = this.id.length
this.selected = null;
for (var i=0; i< length; i++)
{
this.radioButtons[i] = document.getElementById( this.id[i] );
if (this.radioButtons[i].checked )
this.selected = i;
this.addEvent(this.radioButtons[i], 'click', this.clicked);
}
if (this.selected)
this.clickCallBack(this.selected);
}
Radio.prototype.clicked = function()
{
var key = m_radio.object2key(this);
m_radio.clickCallBack(key);
}
Radio.prototype.object2key = function(obj)
{
var length = this.radioButtons.length
for (var i=0; i< length; i++)
{
if (obj == this.radioButtons[i])
return i;
}
return null;
}
Radio.prototype.addEvent = function(el, evname, func) {
if (el.attachEvent) { // IE
el.attachEvent("on" + evname, func);
} else if (el.addEventListener) { // Gecko / W3C
el.addEventListener(evname, func, true);
} else {
el["on" + evname] = func;
}
};
Radio.prototype.removeEvent = function(el, evname, func) {
if (el.detachEvent) { // IE
el.detachEvent("on" + evname, func);
} else if (el.removeEventListener) { // Gecko / W3C
el.removeEventListener(evname, func, true);
} else {
el["on" + evname] = null;
}
};
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay
Je hebt 4 radios, en als je 1 van die vier aanklikt moet er een div te voorschijn komen (bij de andere 3 moet er niks komen). Wat ik eerst had werkte met onclick maar dan heb je bij vorige pagina het probleem dat de radio wel geselecteerd is maar er geen div komt omdat het met onclick werkt. Dus ik zoek een script dat controleerd welke radio is geselecteerd zonder dat je gebruik maakt van onclick ofzo en als er een radio is geselecteerd er dus een div komt te staan, dus iets dat de waarde van de radio bekijkt.
Emmanuel Delay, ik snap helaas niet de hele code van je, maar als ik alles zo uit test gebeurd er niks als ik op een radio klik.
Als je het niet erg vindt, zal je wel jquery moeten includen.
* Download jquery (of haal de file uit mijn online voorbeeld, zie onderaan) en hernoem het bestand naar "jquery.js" (in de zelfde map als radio.js, uiteraard)
Verdere code
js.js mag je verwijderen
index.php -> onveranderd (js.js niet meer laden in de header )
De Head wordt dan
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<head>
...
<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script src="radio.js" language="javascript" type="text/javascript"></script>
...
</head>
...
<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script src="radio.js" language="javascript" type="text/javascript"></script>
...
</head>
radio.js
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
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
function setCheckedValue(key) // key van de array van radio buttons, bv. hier: key = 2 => 'product2'
{
var tekst = 'Geklikt op radiobutton '+ key +', of radiobutton '+ key +' was initieel ingesteld. Hier zou je dus een ajax request kunnen doen. Aan key weet je welke request je moet aanroepen';
document.getElementById( 'grote_div' ).innerHTML = tekst;
}
// jquery niet vergeten downloaden en toevoegen
var m_radio; // Voorlopig is het script zo dat je de var m_radio moet noemen (of het aanpassen in Radio.clicked)
m_radio = new Radio(
Array('product0', 'product1', 'product2', 'product3')
, setCheckedValue
);
$(document).ready(function(){
m_radio.init();
});
clicked = function(e) //
{
var obj = e.target;
var key = m_radio.object2key(obj);
m_radio.clickCallBack(key);
}
// radio class
function Radio(ids, callBack) // array of id's
{
this.id = ids ; //
this.clickCallBack = callBack;
this.radioButtons = null;
}
Radio.prototype.init = function()
{
if (this.radioButtons != null)
return null;
this.radioButtons = Array();
var length = this.id.length
this.selected = null;
for (var i=0; i< length; i++)
{
this.radioButtons[i] = document.getElementById( this.id[i] );
if (this.radioButtons[i].checked )
this.selected = i;
$( this.radioButtons[i] ).bind("click", function(e)
{
clicked(e);
});
}
if (this.selected)
this.clickCallBack(this.selected);
}
Radio.prototype.object2key = function(obj)
{
var length = this.radioButtons.length
for (var i=0; i< length; i++)
{
if (obj == this.radioButtons[i])
return i;
}
return null;
}
{
var tekst = 'Geklikt op radiobutton '+ key +', of radiobutton '+ key +' was initieel ingesteld. Hier zou je dus een ajax request kunnen doen. Aan key weet je welke request je moet aanroepen';
document.getElementById( 'grote_div' ).innerHTML = tekst;
}
// jquery niet vergeten downloaden en toevoegen
var m_radio; // Voorlopig is het script zo dat je de var m_radio moet noemen (of het aanpassen in Radio.clicked)
m_radio = new Radio(
Array('product0', 'product1', 'product2', 'product3')
, setCheckedValue
);
$(document).ready(function(){
m_radio.init();
});
clicked = function(e) //
{
var obj = e.target;
var key = m_radio.object2key(obj);
m_radio.clickCallBack(key);
}
// radio class
function Radio(ids, callBack) // array of id's
{
this.id = ids ; //
this.clickCallBack = callBack;
this.radioButtons = null;
}
Radio.prototype.init = function()
{
if (this.radioButtons != null)
return null;
this.radioButtons = Array();
var length = this.id.length
this.selected = null;
for (var i=0; i< length; i++)
{
this.radioButtons[i] = document.getElementById( this.id[i] );
if (this.radioButtons[i].checked )
this.selected = i;
$( this.radioButtons[i] ).bind("click", function(e)
{
clicked(e);
});
}
if (this.selected)
this.clickCallBack(this.selected);
}
Radio.prototype.object2key = function(obj)
{
var length = this.radioButtons.length
for (var i=0; i< length; i++)
{
if (obj == this.radioButtons[i])
return i;
}
return null;
}
Volgens mij werkt het hiermee met alle browsers.
online voorbeeld: klik
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay
PS. Trouwens echt bedankt voor alle hulp!
Gewijzigd op 01/01/1970 01:00:00 door gaahtt