✔ Dynamisch erstellte Radio's funktionieren im IE nicht

luke_the_duke

luke_the_duke

Erfahrenes Mitglied
Hallo,

ich habe folgendes Problem. Mit unten stehendem Script ersetze ich das erste Kind des Layers mit id="marge" durch einen Layer, der wiederum zwei Radiobuttons beinhaltet. Der zweite dieser Radiobuttons soll standardmässig aktiviert sein. Das funktioniert alles einwandfrei in Firefox 1.5 und Safari, beim Internet Explorer wird aber nicht nur die Standard-Einstellung nicht angezeigt, die Markierung erscheint auch bei erneutem Anklicken des Buttons nicht. Hat jemand eine Idee woran das liegen kann?

Was ich probiert habe:
- Attribute mit setAttribute zu setzen
- das Attribut checked auf true statt auf "checked" zu setzen

Javascript: 
        var ct = document.getElementById("marge");
	var cC = ct.firstChild;
	
	var nC = document.createElement("div");
	
	var input = document.createElement("input");
	input.id = "cn_marge";
	input.type = "radio";
	input.name = "Marge"
	input.value = "true";
	input.className = "combo";
	input.onclick = new Function ("str", "handleMarge(this.value);");
	input.tabIndex = 9;

	
	var t = document.createTextNode("Margenbesteuert");
	var br = document.createElement("br");
	
	nC.appendChild(input);
	nC.appendChild(t);
	nC.appendChild(br);
	
	var input_2 = document.createElement("input");
	input_2.id = "cn_regel";
	input_2.type = "radio";
	input_2.name = "Marge"
	input_2.value = "false";
	input_2.className = "combo";
	input_2.checked = "checked";
	input_2.onclick = new Function ("str", "handleMarge(this.value);");
	input_2.tabIndex	= 10;
	
	var t = document.createTextNode("Regelbesteuert");
	var br = document.createElement("br");
	
	nC.appendChild(input_2);
	nC.appendChild(t);
	nC.appendChild(br)
	
	ct.replaceChild(nC, cC);

danke und gruss
 
Zuletzt bearbeitet:
Hi,

vielleicht hilft es, wenn Du nach der replaceChild-Methode zum Schluss den zweiten Radiobutton nochmals gezielt setzt:
Code: 
ct.getElementsByTagName("input")[1].checked = "checked";

Ciao
Quaese
 
Hallo,

vielen Dank für die Antwort. Das hat geholfen, zumindest bis zu einem gewissen Grad. Es wird nun standardmässig der zweite Button markiert, jedoch ändert sich daran auch nach dem tausensten Klick auf irgendeinen der beiden Buttons nichts. Ich hab die Funktionalität nun halt "von Hand" gescriptet, aber das kanns ja nicht sein, oder?
 
Zuletzt bearbeitet:
Hi,

offensichtlich hat der IE Probleme, dem neu erstellten Element das name-Attribut zuzuweisen. Dafür
akzeptiert das Microsoft-Produkt jedoch die Möglichkeit, der Methode createElement einen Tag mit Attributen
zu übergeben. Damit kann das Problem umgangen werden.

Das Problem mit dem "Checken" eines Radiobuttons beim Anlegen kann beim IE mit Hilfe der Eigenschaft
defaultChecked gelöst werden.

Mein kompletter Lösungsvorschlag:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>www.tutorials.de</title>

<script type="text/javascript">
  <!--
// Radioarray:            id        , value   , checked, Text             , Name
var arrRadio = new Array(["cn_marge", "Wert 1", false  , "Margenbesteuert", "Marge_"],
                         ["cn_regel", "Wert 2", true   , "Regelbesteuert" , "Marge_"]);


function _newRadio(){
  var objParent = document.getElementById("marge");
  var objFirstChild = objParent.firstChild;
  var objDiv = document.createElement("div");

  for(var i=0; i<2; i++){
    // Radiobutton für IE erstellen
    if(document.all && !window.opera){
      var objFirstRadio = document.createElement("<input type='radio' name='"+arrRadio[i][4]+"'>");
    }else{
      var objFirstRadio = document.createElement("input");
      objFirstRadio.setAttribute("type", "radio");
      objFirstRadio.setAttribute("name", arrRadio[i][4]);
    }
    with(objFirstRadio){
      setAttribute("id", arrRadio[i][0]);
      setAttribute("value", arrRadio[i][1]);
      setAttribute("checked", arrRadio[i][2]);         // Checken für Non-IE
      setAttribute("defaultChecked", arrRadio[i][2]);  // Checken für IE
    }

    with(objDiv){
      appendChild(objFirstRadio);
      appendChild(document.createTextNode(arrRadio[i][3]));
      appendChild(document.createElement("br"));
    }
  }

  objParent.replaceChild(objDiv, objFirstChild);
}

window.onload = _newRadio;
 //-->
</script>
</head>
<body>
<form method="get" action="get_formdata.php">
<div id="marge">&nbsp;</div>
<input type="submit" />
</form>
</body>
</html>
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Zuletzt bearbeitet:
Hallo,

gut zu wissen, dass man dem IE wenigstens mit Tags beikommen kann. Dein Lösungsvorschlag ist auch wirklich toll, da verallgemeinert, danke für deine Mühe. Ich jedoch hab einen anderen, auf meine Situation angepassten Ansatz verfolgt und zwar hab ich nun einen onclick-Handler gescriptet, der die (grafische) Markierung in den jeweils aktiven Radiobutton setzt bzw. vom inaktiven entfernt. Nicht ganz so elegant, aber brutal pragmatisch ;).

Danke und gruss
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück