Antworten zum Thema „JavaScript Formular Ausgeblendete Optionsfelder disable=true funktioniert im IE nicht“

Der_Ritter · 25.01.2009

Hallo zusammen.
Ich brauche Eure Hilfe beim Thema JavaScript.

Folgendes habe ich vor:

Es soll in einem Formular in einem Auswahlfeld (Select-Options) ein Tag (Montag-Freitag) auswählbar sein.

Daraufhin soll eine zweite Auswahl angezeigt werden, die je nach ausgewähltem Tag bestimmte Uhrzeiten anzeigt und bestimmte auch ausblendet.

Konkret sollen alle Uhrzeiten auswählbar sein, wenn es sich um Dienstag oder Donnerstag handelt.

Bei den anderen Wochentagen sollen alle Zeiten ab 14 Uhr nicht auswählbar sein.

Ruft man die Seite das erste mal auf bzw. nach einem Reload, soll nur das Auswahlfeld der Tage sichtbar sein mit dem Wert "- Tag waehlen -"

Nach Auswahl des Tages das zweite Feld mit den Uhrzeiten. Je nach Tag sollen bestimmte Uhrzeiten nicht anwählbar sein.

Der folgende Lösungsansatz funktioniert bestens im FF, Opera, und Chrome. Safari interessiert das JavaScript überhaupt nicht und beim InternetExplorer 6 wie 7 funktioniert zwar das anfängliche Ausblenden des zweiten Feldes, jedoch nicht das disablen der bestimmten Zeiten.

Habe jetzt stundenlang gegoogelt und alles an Tipps (onClick statt onChange, Cache mit META-Tags leeren, disable="disable" anstatt disable = true usw.) ausprobiert, allerdings ohne Erfolg.

Wichtig wäre in erster Linie für mich, dass das Ausblenden der Zeiten im IE funktioniert. in den anderen, abgesehen von Safari, geht's ja auch.

Wie schaffe ich es also, dass der IE mir die Auswahl der nichtzulässigen Zeiten ausblendet?
Eventuell sieht jemand von Euch eine Lösung.

Code:

function showhide(f,v){
 var t = f.elements['zeit'];
 if(v=='- Tag waehlen -'){t.style.visibility='hidden'}
 else{t.style.visibility='visible'}

 if((v=='Montag')||(v=='Mittwoch')||(v=='Freitag'))
     {
        document.getElementById("14").disabled = true;
        document.getElementById("1430").disabled = true;
        document.getElementById("15").disabled = true;
        document.getElementById("1530").disabled = true;
        document.getElementById("16").disabled = true;
        document.getElementById("1630").disabled = true;
        document.getElementById("17").disabled = true;
    }
 if((v=='Dienstag')||(v=='Donnerstag'))
     {
        document.getElementById("14").disabled = false;
        document.getElementById("1430").disabled = false;
        document.getElementById("15").disabled = false;
        document.getElementById("1530").disabled = false;
        document.getElementById("16").disabled = false;
        document.getElementById("1630").disabled = false;
        document.getElementById("17").disabled = false;
    }
 }
 onload = function(){document.forms[0].elements['zeit'].style.visibility='hidden'}

HTML:

<select name="tag" onClick="showhide(this.form,this.value)">
    <option>- Tag waehlen -</option>
    <option>Montag</option>
    <option>Dienstag</option>
    <option>Mittwoch</option>
    <option>Donnerstag</option>
    <option>Freitag</option>
</select>

<select name="zeit"  >
    <option>9:00 Uhr</option>
    <option>9:30 Uhr</option>
    <option>10:00 Uhr</option>
    <option>10:30 Uhr</option>
    <option>11:00 Uhr</option>
    <option>11:30 Uhr</option>
    <option>12:00 Uhr</option>
    <option id="14">14:00 Uhr</option>
    <option id="1430">14:30 Uhr</option>
    <option id="15">15:00 Uhr</option>
    <option id="1530">15:30 Uhr</option>
    <option id="16">16:00 Uhr</option>
    <option id="1630">16:30 Uhr</option>
    <option id="17">17:00 Uhr</option>
</select>

Haetti · 26.01.2009

AW: JavaScript Formular Ausgeblendete Optionsfelder disable=true funktioniert im IE n

Hallo Ritter

Leider musste ich nach langem Recherchieren feststellen, dass IE 7 Options nicht disablen kann (Bug): SELFHTML Forumsarchiv / 2007 / März / <option disabled (unterster Eintrag)
So musst du halt nach dem Absenden des Formulars mit PHP oder was auch immer du nutzt überprüfen, dass keine ungültigen Zeiten übergeben wurden. Andere Möglichkeit ist, dass du per JS die ungültigen Zeiten einfach entfernst und bei Dienstag und Donnerstag wieder einfügst.

allerdings hab ich bei deinem Code noch andere Probleme im IE entdeckt. Ich hab dein Code mal folgendermassen angepasst:

Code:

<script type="text/javascript">
function showhide(f,v){
    var t = f.elements['zeit'];
    if(v=='-')
        t.style.display='none';
    else
        t.style.display='inline';
    
    if(v=='Montag' || v=='Mittwoch' || v=='Freitag') {
        document.getElementById("14").disabled = true;
        document.getElementById("1430").disabled = true;
        document.getElementById("15").disabled = true;
        document.getElementById("1530").disabled = true;
        document.getElementById("16").disabled = true;
        document.getElementById("1630").disabled = true;
        document.getElementById("17").disabled = true;
    }
    else if (v=='Dienstag' || v=='Donnerstag') {
        document.getElementById("14").disabled = false;
        document.getElementById("1430").disabled = false;
        document.getElementById("15").disabled = false;
        document.getElementById("1530").disabled = false;
        document.getElementById("16").disabled = false;
        document.getElementById("1630").disabled = false;
        document.getElementById("17").disabled = false;
    }
}
</script>

<body onload = "new function(){ document.forms[0].elements['zeit'].style.display = 'none';}">
<form>
<select name="tag" onchange="showhide(this.form,this.value)">
    <option value="-">- Tag waehlen -</option>
    <option value="Montag">Montag</option>
    <option value="Dienstag">Dienstag</option>
    <option value="Mittwoch">Mittwoch</option>
    <option value="Donnerstag">Donnerstag</option>
    <option value="Freitag">Freitag</option>
</select>

<select name="zeit">
    <option disabled="disabled">9:00 Uhr</option>
    <option>9:30 Uhr</option>
    <option>10:00 Uhr</option>
    <option>10:30 Uhr</option>
    <option>11:00 Uhr</option>
    <option>11:30 Uhr</option>
    <option>12:00 Uhr</option>
    <option id="14">14:00 Uhr</option>
    <option id="1430">14:30 Uhr</option>
    <option id="15">15:00 Uhr</option>
    <option id="1530">15:30 Uhr</option>
    <option id="16">16:00 Uhr</option>
    <option id="1630">16:30 Uhr</option>
    <option id="17">17:00 Uhr</option>
</select>
</form>
</body>

geändert hab ich folgendes:
- fehlende ; gesetzt
- onload "function" in "new function" geändert
- überflüssige () in den if-Abfragen entfernt
- if (v == 'Dienstag' ... in else if umgeschrieben (nicht unbedingt nötig, aber ein paar Millisekunden schneller

)
- den Options eine value gegeben. Konnte mit dem IE sonst gar nicht auf die Values der Options zugreifen.
- das onClick in onChange geändert. Schliesslich muss erst, wenn der Wert geändert wurde, der JS-Code nochmals durchlaufen werden.
- style.visibility in style.display (mit Werten "none" oder "inline") geändert. Weiss nicht wieso, aber visibility funktionierte im IE nicht. Hab aber nicht gross recherchiert wieso das so ist.

Der_Ritter · 26.01.2009

AW: JavaScript Formular Ausgeblendete Optionsfelder disable=true funktioniert im IE n

Hallo Haetti!

Vielen Dank für deine Hilfe und vor allem die Mühe die du dir gemacht hast.
Dein Beitrag hilft mir sehr viel weiter und ich werde heute Abend, wenn die Kiddies im Bett sind, das Ganze einmal entsprechend anpassen.

Liebe Grüße
Der_Ritter

Der_Ritter · 31.01.2009

AW: JavaScript Formular Ausgeblendete Optionsfelder disable=true funktioniert im IE n

Hallo Haetti!

Habe den Code angepasst und funktioniert prima.

Ich könnte die Eingaben per PHP prüfen, aber das wäre nicht so komfortabel als wenn JavaScript mir das schon vor dem Absenden so anpasst, dass die Zeiten erst gar nicht an den entsprechenden Tagen auswählbar sind.

Da ich fast ausschließlich mit PHP arbeite und so gut wie gar nicht mit JavaScript, fehlen mir die entsprechenden Kenntnisse und Kniffe.

Wenn es vom Aufwand her nicht so viel ist, würde ich um einen Codeschnipsel bitten, der mir die gewünschte Aufgabe erfüllt oder einen Ansatz darstellt.

Nochmals vielen Dank für das bisherige Überarbeiten des JavaScript Codes

Gruß
Der_Ritter

Haetti · 31.01.2009

AW: JavaScript Formular Ausgeblendete Optionsfelder disable=true funktioniert im IE n

hab grad nicht so viel Zeit. Aber ich kann dir schon mal den Tipp geben, dass du das mit DOM machen kannst. Um zu entfernen benötigst du removeChild() und um hinzuzufügen appendChild()

Online Referenz:

Vielleicht kriegst du's selber schonmal hin. Ansonsten werd ich mir das später nochmals ansehen.

Gruss
Hätti

cebito · 31.01.2009

AW: JavaScript Formular Ausgeblendete Optionsfelder disable=true funktioniert im IE n

Wenn du deinen options andere id's verpaßt, kannst du noch einiges an code sparen. die zweite if-Abfrage bzw. else if
benötigst auch nicht, hier reicht ein else (sei denn du hättest noch SA/SO in der Auswahl).

Code:

<!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>Unbenanntes Dokument</title>
</head>

<script type="text/javascript">
function showhide(f,v) {
    var t = f.elements['zeit'];
    if(v=='-') {
        t.style.display='none';
        return;
    }
    else {
        t.style.display='inline';
        if(v=='Montag' || v=='Mittwoch' || v=='Freitag') {
            for (var i = 1; i <= 7; i++) {
                document.getElementById(i).disabled = true;
            }        
        }
        else {
            for (var i = 1; i <= 7; i++) {
                document.getElementById(i).disabled = false;
            }
        }
    }
}
</script>

<body onload = "new function(){ document.forms[0].elements['zeit'].style.display = 'none';}">
<form>
<select name="tag" onchange="showhide(this.form,this.value)">
    <option value="-">- Tag waehlen -</option>
    <option value="Montag">Montag</option>
    <option value="Dienstag">Dienstag</option>
    <option value="Mittwoch">Mittwoch</option>
    <option value="Donnerstag">Donnerstag</option>
    <option value="Freitag">Freitag</option>
</select>

<select name="zeit">
    <option disabled="disabled">9:00 Uhr</option>
    <option>9:30 Uhr</option>
    <option>10:00 Uhr</option>
    <option>10:30 Uhr</option>
    <option>11:00 Uhr</option>
    <option>11:30 Uhr</option>
    <option>12:00 Uhr</option>
    <option id="1">14:00 Uhr</option>
    <option id="2">14:30 Uhr</option>
    <option id="3">15:00 Uhr</option>
    <option id="4">15:30 Uhr</option>
    <option id="5">16:00 Uhr</option>
    <option id="6">16:30 Uhr</option>
    <option id="7">17:00 Uhr</option>
</select>
</form>
</body>
</html>

Edit: Habs noch ein wenig verschachtelt, dann kann er sich die ganze Abfragerei sparen, wenn das Zeitenfeld unsichtbar ist.

Chickenshooter · 01.02.2009

AW: JavaScript Formular Ausgeblendete Optionsfelder disable=true funktioniert im IE n

Moin,

oder Du nimmst Dir noch Ajax zu Hilfe

da gibt es auch schon richtig tolle

Frameworks in denen schon fast Alles

geregelt ist dann kannst Du fast die

komplette Logik mit PHP abbacken.

MfG Chick

Der_Ritter · 03.02.2009

AW: JavaScript Formular Ausgeblendete Optionsfelder disable=true funktioniert im IE n

@cebito:

Vielen Dank für die Optimierung des Codes. Werde bei Gelegenheit den Code nochmals anpassen.

Chickenshooter schrieb:
Moin,

oder Du nimmst Dir noch Ajax zu Hilfe

da gibt es auch schon richtig tolle

Frameworks in denen schon fast Alles

geregelt ist dann kannst Du fast die

komplette Logik mit PHP abbacken.

MfG Chick

@Chick: Danke für den Hinweis. An Ajax hatte ich noch gar nicht gedacht. Hast du da eventuell ne Seite, wo ein Fall, wie ich ihn beschrieben habe in ähnlicher Weise mit einer Ajax-PHP-Lösung beschrieben wird? Wobai mir der Ajax-Teil wichtig wäre. PHP ist weiter kein Problem.

Liebe Grüße
Der_Ritter

Chickenshooter · 03.02.2009

AW: JavaScript Formular Ausgeblendete Optionsfelder disable=true funktioniert im IE n

Moin,

Du brauchst 3 Dateien

die index.html so hab ich sie halt so genannt.
die check.php in dieser arbeitest Du deine Requests ab
und zu guter letzt die prototype-1.6.0.3.js

so nun die index.html:

HTML:

<!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=utf-8" />
    <title>Ajax Request</title>
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>

<script type="text/javascript">
    function showTimes()
    {
        var url = 'check.php?day=' + $('day').getValue();
        new Ajax.Request(url, {
              method: 'get',
              onSuccess: function(transport) {
                  var notice = $('dayTimes');
                  notice.update(transport.responseText);
            }
        });
    }
</script>
<div style="display:inline;">
    <select id="day" name="day" onchange="showTimes()">
        <option value="-1" selected="selected">- Tag waehlen -</option>
        <option style="background-color:#d0d0d0;" value="1">Montag</option>
        <option value="2">Dienstag</option>
        <option style="background-color:#d0d0d0;" value="3">Mittwoch</option>
        <option value="4">Donnerstag</option>
        <option style="background-color:#d0d0d0;" value="5">Freitag</option>
    </select>
</div>
<!-- Das ist der Div der dann geändert wird sprich nur sein "Inneres" -->
<div id="dayTimes" style="display:inline;">&nbsp;</div>

</body>
</html>

so nun die check.php

PHP:

<?php
$day = intval($_GET['day']);
$output="Bitte einen Tag ausw&auml;hlen";

if ($day>=0)
{
    //bei 1 für Monatg, 2 für Dienstag ....
    if ($day==2|$day==4) 
    {
        $output= '
            <select name="zeit">
                <option>9:00 Uhr</option>
                <option>9:30 Uhr</option>
                <option>10:00 Uhr</option>
                <option>10:30 Uhr</option>
                <option>11:00 Uhr</option>
                <option>11:30 Uhr</option>
                <option>12:00 Uhr</option>    
            </select>
        ';
    }
    //die Tage sind ungerade
    else
    {
        $output = '
            <select name="zeit">
                <option>14:00 Uhr</option>
                <option>14:30 Uhr</option>
                <option>15:00 Uhr</option>
                <option>15:30 Uhr</option>
                <option>16:00 Uhr</option>
                <option>16:30 Uhr</option>
                <option>17:00 Uhr</option>
            </select>
            ';
    }
}
echo $output;
?>

so ich hoffe ich konnte helfen.

MfG Chick

Der_Ritter · 04.02.2009

AW: JavaScript Formular Ausgeblendete Optionsfelder disable=true funktioniert im IE n

Vielen Dank für den Quellcode und die Mühe, die du dir gemacht hast.

Ich werde sicherlich zukünftig noch mehr Einsatzmöglichkeiten für diese Lösung haben. Nun ist das Ganze endlich Browser unabhängig.

Liebe Grüße
Der_Ritter