Problem mit dynamischem Formular (onchange() und select

[Hanniball76]

Hiho,

ich hätte da gerne mal ein Problem. Ach ich hab ja schon eins. Ich bin jetzt nicht so der Javascript-Mensch (Ich weiß Asche auf mein Haupt und ich gelobe Besserung).

Ich habe ein Formular bei dem in einem Feld ein Datum via SELECT ausgewählt wird. Sobald dieses Feld geändert wird soll eine Funktion prüfen ob es sich bei dem gewählten Tag um einen Sonntag handelt. Ist das der Fall soll ein weiteres SELECT Feld mit den Daten eines Arrays gefüllt werden wobei der erste Wert des Arrays nicht mit ausgegeben werden soll. Handelt es sich um keinen Sonntag soll das komplette Array ausgegeben werden.

So weit zu dem was ich machen möchte. Und hier nun das was ich mir zusammengeschrieben habe, was allerdings nicht funktioniert (klar sonst wär ich ja nicht hier ;-) ):

Der HTML-Teil:

<form name="Reserv" method="post">  
	<input type="text" placeholder="Vorname" required="required" /><input type="text" placeholder="Nachname" required="required" /><br>  
	<input type="email" placeholder="EMail" required="required"/><input type="tel" placeholder="Telefon" required="required"/><br>  
	<select onchange="checksun('value')">  
		<?php datelist(); ?>  
	</select>  
	<select id="zeiten">  
    </select>  
	<input type="button" value="Absenden">	  
</form>

Und das Javascript dazu:

	function checksun(checker){  
		var day = checker.getday();  
		var times = new array ("10:00", "12:00", "14:00", "16:00", "18:00", "20:00")  
		if (day == 0){  
			for (i = 1; i <= zeiten.length; i++){  
				document.getElementById('zeiten').write('<option value"'+times[i]+'">'+times[i]+'</option>')  
			}  
		}else{  
			for (i = 0; i <= zeiten.length; i++){  
				document.getElementById('zeiten').write('<option value"'+times[i]+'">'+times[i]+'</option>')  
			}  
		}  
	}

Ich bin irgendwie zu blöd den Fehler zu sehen!

Einen fluffigen Abend,

Hanniball

[hanniball76]

Sorry ich vergaß das erste SELECT-Feld. Die Werte darin sehen so aus:

<option value='2012, 06, 10'>10. Jun 2012 / Sun</option>  
<option value='2012, 06, 11'>11. Jun 2012 / Mon</option>

[Jeena Paradies]

Hallo,

<select onchange="checksun('value')">

  
Dieses `checksun('value')`{:.language-javascript} übergibt den String "value" an die funktion `checksun()`{:.language-javascript}. Was du machen willst ist wohl eher `checksun(this.options[this.selectedIndex].value)`{:.language-javascript}. Das würde den String der in value des option das gerade selected ist an die funktion übergeben.  
  

> ~~~javascript

	function checksun(checker){  

> 		var day = checker.getday();  
  
Hier ist mir nicht klar was du da machen willst. Der String in der Variable checker hat sicherlich keine Methode namens getday(). Interessant wäre wie deine Strings in value bei den <option>-tags aussehen. Wenn es ein Datum im Format yyyy-mm-dd ist, also 2012-05-12 dann könntest du den Tag so herausbekommen:  
  
[code lang=javascript]function checksun(value) {  
    var date = new Date(value);  
    var weekDay = date.getDay();  
    var startIndex = weekDay == 0 ? 1 : 0; // hier ist der Großbustabe "D" wichtig.  
    var times = ["10:00", "12:00", "14:00", "16:00", "18:00", "20:00"]; // denn es gibt kein objekt mit dem namen "array" nur mit "Array" aber mit Objekt-Literal-Schreibweise ist es eh einfacher lesbar.  
    var select = document.getElementById("zeiten"); // den Pointer speichern wir in einer Variable damit der browser ihn nicht die ganze Zeit im DOM suchen muss.  
  
    for (var i = start; i <= times.length; i++) { // hier den richtigen Variablennamen times nicht "zeiten" benutzen und ein var vor das "i" setzen sonst wird das i eine globale Variable was man unbedingt vermeiden sollte.  
        var option = document.createElement("option"); // Wir machen ein neues option element und hängen das dann ins DOM, denn das element mit der ID "zeiten" hat keine Methode namens write().  
        option.innerText = times[i];  
        option.value = times[i];  
        select.appendChild(option); // Hier fügen wir das Objekt hinzu mit hilfe der normalen DOM methode [ref:self812;javascript/objekte/node.htm#append_child@title=appendChild()]  
    }  
}

Der code ist komplett ungetestet weil ich ihn hier nur aus dem Kopf geschrieben habe, aber mit den Kommentaren solltest du schon weiter kommen.

Jeena

[Hanniball76]

Vielen Dank für Deine Hilfe.

Ich habe mich anhand Deiner Kommentare und des Scripts weiter gehangelt. Doch ich bin wieder auf ein Problem gestossen

	function checksun(value){  
		var date = new Date(value);  
		var day = date.getDay();  
		var times = ["10:00", "12:00", "14:00", "16:00", "18:00", "20:00"];  
		var select = document.getElementById("zeiten");  
		if (day == 0){  
			for (var i = 1; i < times.length; i++){  
				var neu = new Option(times[i], times[i]);  
				select.options[select.length] = neu;  
			}  
		}else{  
			for (var i = 0; i < times.length; i++){  
				var neu = new Option(times[i], times[i]);  
				select.options[select.length] = neu;  
			}  
		}  
	}  
  </script>

Das Element "zeiten" wird immer wieder durch die neuen Zeiten verlängert wenn ich ein anderes Datum auswähle. Sämtliche Versuche das Element zu löschen/leeren schlugen fehl.

Das bisherige Ergebnis meiner Bemühungen könnt ihr hier sehen, inkl. Fehler: http://info.ici-paris.de/reserv/eintrag.php

[Jeena Paradies]

Hallo,

Das Element "zeiten" wird immer wieder durch die neuen Zeiten verlängert wenn ich ein anderes Datum auswähle. Sämtliche Versuche das Element zu löschen/leeren schlugen fehl.

Wie hast du denn versucht sie zu löschen? Die einfachste Methode wäre:

var select = document.getElementById("zeiten");  
select.innerHTML = "";

Die elegantere Methode wäre:

var select = document.getElementById("zeiten");  
var o;  
while(o = select.firstChild) {  
    select.removeChild(o);  
}

Beides ungetestet, aber es sollte dich auf die richtige Spur bringen.

Jeena