Ratio-Button und onclick - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Ratio-Button und onclick

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Ratio-Button und onclick

Pages: [1]

geschrieben von AlexD am 06.02.2011 - 11:55

Hallo,

ich hab mal wieder ein Problemchen.
Und zwar kommt es doch häufiger auf der Seite vor, dass man bei Formulare Teile ein- bzw. ausblendet, was entsprechend ausgewählt wird.

Ich hab mir nun eine Funktion geschrieben, damit ich nicht für jeden Block etwas eigenes schreiben muss.
Bei Checkboxen funktioniert das auch sehr gut, nur bei den Radios steh ich grad voll auf der Leitung.

Das Szenario ist denkbar einfach:
z.B. Radio-Button zur Auswahl: o Ja o nein

Klickt der User auf Ja soll ein entsprechendes Formularfeld (einfach mit display=block) eingeblendet werden. Klickt er auf nein, so soll es wieder ausgeblendet werden.

Mein Verständnisproblem liegt im Moment darin, dass ich hier im prinzip 2 Buttons habe, die sich mit dem Value unterscheiden aber gleich heissen.

Hier die aktuelle Funktion. Ich weiß, so kann es nicht funktionieren, bin halt am rumprobieren.

HTML-Quelltext

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:

function display_block(feld,id,value){

    var feld;   // <- Name des Formularfeldes
    var id;      // <- ID des <div>, das ein- oder ausgeblendet werden soll
    var check;
    var value;
    
    if (typeof value == 'undefined') {
        check = 'checked == true';
    } else {

        switch(value){
            case 'individual':
            check = 'checked == false';
            break;
            case 'standard':
            check = 'checked == true'; 
            break;
        }
    }
    
    var tmp = eval("document.import."+feld+"."+check);

    if(tmp){
        document.getElementById(id).style.display='block';
     } else {
         document.getElementById(id).style.display='none';
     }
 }


// Aufruf der Funktion bei einer Checkbox (funktioniert einwandfrei!!!!)
<input type="checkbox" onclick="display_block('hin_rueck','hin_rueck_val')" name="hin_rueck" value="1">

// hier die Radio-Buttons
<input type="radio" onclick="display_block('track_type','indiv',this.value)" name="track_type" value="standard" checked> standard (Standardstrecke)<br>
<input type="radio" onclick="display_block('track_type','indiv',this.value)" name="track_type" value="individual"> individual (Individual-Eintrag)<br>

Hoffe Ihr könnt mir hier auf die Sprünge helfen.

Besten Gruß
Alex

geschrieben von Micha am 06.02.2011 - 17:59

Hi,

versuchs mal so

HTML-Quelltext

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:

<html>
<script>

/**
 *
 *@param el das geklickte Element
 *@param id die Id des Elements, dessen display Eigenschaft geandert werden soll
 */
function display_block(el,id){
	var idEl = document.getElementById(id);
	if (!idEl || !el || el.nodeName != "INPUT")
		return false;

	var makeVisible = false;

	if (el.type == "checkbox")	{
		makeVisible = !el.checked;
	}
	else if (el.type == "radio")	{
		switch(el.value){
            case 'individual':
				makeVisible = false;
            break;
            case 'standard':
				makeVisible = true;
            break;
        }
	}

	idEl.style.display=makeVisible?'block':'none';
	
	return true;
 }
</script>
<div id="hin_rueck_val">Inhalt hin_rueck_val</div>
<div id="indiv">Inhalt indiv</div>

<br><br>
<input type="checkbox" onclick="display_block(this,'hin_rueck_val')" name="hin_rueck" value="1">
<br><br>

<input type="radio" onclick="display_block(this,'indiv')" name="track_type" value="standard" checked> standard (Standardstrecke)<br>
<input type="radio" onclick="display_block(this,'indiv')" name="track_type" value="individual"> individual (Individual-Eintrag)<br>

</html>

Micha

geschrieben von AlexD am 07.02.2011 - 15:25

Hallo Micha,

so funktioniert das jetzt!!
War zwar alles umgedreht, die Felder wurden eingeblendet wenn man das Häkchen wieder entfernte, aber das waren nur kleine Veränderungen.
Funktioniert super!!

Vielen Dank für die Hilfe!!

Hier die Änderungen.

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17:

makeVisible = !el.checked;

zu

makeVisible = el.checked;

 ========================

else if (el.type == "radio")	{
		switch(el.value){
            case 'individual':
				makeVisible = true;          // <- nur true und false getauscht
            break;
            case 'standard':
				makeVisible = false;
            break;
        }