• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

onload oder window.onload macht nicht das was ich dachte

H

Harry4711

New member
Hallo an alle die das Lesen.

Ich habe ein kleines Problem ;-) sonnst würde ich ja nicht schreiben.

Ich habe diese kleine Funktion:

Code: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
</head>

<body>

<script language="JavaScript" type="text/javascript">

function switchControls(obj)
{
    if (obj.selectedIndex==1)
    {
        document.getElementById("schow_hide").style.display="block";
    }
    else
    {
        document.getElementById("schow_hide").style.display="none";
    }
}

</script>

<form name="myForm">


                <!-- Select Intern -->        
                <label class="form_label" id="" >Intern</label>
                <select name="input_intern" class="select_input" id="intern" onchange="switchControls(this)" onload="switchControls(this)" >
                  <option value=""</option>
                  <option value="Ja" >Ja</option>
                  <option value="Nein" >Nein</option>
                </select>


<div id="schow_hide" style="display:none">

                <!-- Select Intern -->        
                <label class="form_label" id="" >Intern</label>
                <select name="input_intern" class="select_input" id="intern" >
                  <option value=""</option>
                  <option value="Ja" >Ja</option>
                  <option value="Nein" >Nein</option>
                </select>


                <!-- Select Intern -->        
                <label class="form_label" id="" >Intern</label>
                <select name="input_intern" class="select_input" id="intern" >
                  <option value=""</option>
                  <option value="Ja" >Ja</option>
                  <option value="Nein" >Nein</option>
                </select>
</div>
                
                
</form> 
</body>
</html>

Diese Zeigt oder eben auch nicht 2 Selects das geht auch alles.

Mein Problem ist wenn die Seite neu geladen wird ( F5 bzw Formprüfung mit php ) ist noch das Element was die 2 Selects anzeigt da ( selected ) aber die 2 Selects sind erst wieder sichtbar bei neuer auswahl.

Das ist ja auch so weit klar weil die funktion nur ausgeführt wir bei onchange.

Wie bekomme ich es nun hin das sie sichtbat sind bei einem reload verausgesetzt sie sollen sichtbar sein ?

Ich habe es schon mit onload und window.onload im header versucht aber leider ohne erfolg.


Gruß
Harray4711
 
Hi,

das select-Element kennt keinen onload-Event. Stattdessen könntest du den onload-Event des Dokuments verwenden. Desweiteren ist es eventuell besser, der Funktion bereits den selektierten Index zu übergeben. So ist es einfach, diesen beim Laden des Dokuments der Funktion zu übergeben.

Beispiel:
HTML: 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Unbenanntes Dokument</title>

    <script language="JavaScript" type="text/javascript">
        function switchControls(selectedIndex) {
            if (selectedIndex == 1) {
                document.getElementById("schow_hide").style.display = "block";
            } else {
                document.getElementById("schow_hide").style.display = "none";
            }
        }

        if (document.addEventListener) {
            window.addEventListener("load", function() {
                switchControls(1);
            }, false);
        } else {
            window.attachEvent("onload", function() {
                switchControls(1);
            });
        }
    </script>
</head>

<body>
    <form name="myForm">

        <!-- Select Intern -->
        <label class="form_label" id="">Intern</label>
        <select name="input_intern" class="select_input" id="intern" onchange="switchControls(this.selectedIndex)">
            <option value="" </option>
                <option value="Ja">Ja</option>
                <option value="Nein">Nein</option>
        </select>

        <div id="schow_hide" style="display:none">
            <!-- Select Intern -->
            <label class="form_label" id="">Intern</label>
            <select name="input_intern" class="select_input" id="intern">
                <option value="" </option>
                    <option value="Ja">Ja</option>
                    <option value="Nein">Nein</option>
            </select>

            <!-- Select Intern -->
            <label class="form_label" id="">Intern</label>
            <select name="input_intern" class="select_input" id="intern">
                <option value="" </option>
                    <option value="Ja">Ja</option>
                    <option value="Nein">Nein</option>
            </select>
        </div>

    </form>
</body>

</html>
Ciao
Quaese
 
Zuletzt bearbeitet:
Quase hat dir ja bereits gezeigt, woran es liegt, dass es nicht funktioniert.
Noch einige Anmerkungen:

  • dein HTML ist invalide. So sind beispielsweise einige <option> nicht geschlossen oder besitzen keinen Inhalt. Desweiteren sind IDs - wie der Name schon sagt - eindeutig und so darf es nur ein Element mit der jeweiligen ID geben.
  • das language-Attribut ist veraltet -> weg damit! In HTML5 genügt übrigens sogar <script> alleine.
  • DOMContentLoaded feuert noch etwas früher als onload und wartet nicht auf Stylesheet, Bilder o.ä..

Hier mal ein sauberes Dokument:
HTML: 
<!doctype html>
<head>
	<meta charset="utf-8">
	<title>Unbenanntes Dokument</title>
	<script src="https://raw.githubusercontent.com/j-l-n/jln.js/master/jln.js"></script>
	<script>
		require(["jln.event"]);
		jln.event.bind("DOMContentLoaded", function(){
			switchControls();
			jln.event.bind("change", switchControls, document.getElementById("intern"));
		});
		function switchControls(){
			if(document.getElementById("intern").selectedIndex === 1){
				document.getElementById("show_hide").style.display = "block";
			}
			else{
				document.getElementById("show_hide").style.display = "none";
			}
		}
	</script>
</head>
<body>


	<form name="myForm">
    
        <label class="form_label" for="intern">Intern</label>
		<select name="input_intern" class="select_input" id="intern">
			<option>---</option>
			<option value="Ja">Ja</option>
			<option value="Nein">Nein</option>
		</select>

		<div id="show_hide" style="display:none;">
			<label class="form_label" for="intern2">Intern 2</label>
			<select name="input_intern" class="select_input" id="intern2">
				<option>---</option>
				<option value="Ja">Ja</option>
				<option value="Nein">Nein</option>
			</select>

			<label class="form_label" for="intern3">Intern 3</label>
			<select name="input_intern" class="select_input" id="intern3">
				<option>---</option>
				<option value="Ja">Ja</option>
				<option value="Nein">Nein</option>
			</select>
		</div>   
		
	</form> 
</body>
(Anmerkung: zur Vereinfachung von
Quaese schrieb:
Code: 
        if (document.addEventListener) {
            window.addEventListener("load", function() {
                switchControls(1);
            }, false);
        } else {
            window.attachEvent("onload", function() {
                switchControls(1);
            });
Zum Vergrößern anklicken....
habe ich mein Framework eingebunden.)


PS: für HTML bitte statt den [CODE]-Tags [HTML] benutzen!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben