<table> zerstört <form>

[Bewahrer]

Hi mal wieder,

Ich benutze ein paar <form>'s, die ich mit <table> ordentlich positioniere. Funktionieren tut alles, ich kann Daten wunderbar in die DB eintragen. Nun hab ich aber folgendes Problem:

Ich hab eine Funktion in JS geschrieben, die dafür sorgen soll, dass bei Auswählen eines anderen Monats / Jahres in der <form> die <select> Liste der möglichen Tage neu geladen wird. Schließlich hat nicht jeder Monat 31 Tage. So wird das ganze aufgerufen:

<script type="text/javascript">  
     var Month = document.getElementById('InputMonth');  
     Month.onchange = function() {  
          updateTimePicker('Input');  
     }  
     var nYear = document.getElementById('InputYear');  
     Year.onchange = function() {  
          updateTimePicker('Input');  
     }  
</script>

Die Funktion ist folgende:

function updateTimePicker(id) {  
     // Gets the correct possible date range based on the picked month and picked year  
     var Form = document.getElementById(id);  
     console.log(Form);  
  
     if(Form !== null) {  
          alert(Form.getElementsByTagName('select')[1]);  
          var Month = Form.getElementsByTagName('select')[1].selectedIndex;  
          var Year = Form.getElementsByTagName('select')[2].selectedIndex;  
          var Days = new Date(Year,Month+1,0).getDate();  
  
          // Update day list  
          var TimeDay = Form.getElementsByTagName('select')[0];  
          TimeDay.innerHTML = ''; // Remove old day list  
  
          for(var i=0;i<Days;i++) {  
               // Add days  
               var TimeDayOption = document.createElement('option');  
               TimeDayOption.value = i + 1;  
               TimeDayOption.text = i + 1;  
               TimeDay.appendChild(TimeDayOption);  
          }  
          TimeDay.selectedIndex = 0; // Select the 1st of the new month / year  
     }  
     else {  
          return false;  
     }  
}

Soweit so gut. Das ist alles nur um sicherzustellen, dass keine nicht-existenten Daten eingetragen werden können. Wenn ich nun einen anderen Monat in der <select> Box auswähle, passieren 2 Dinge. Einmal wird console.log() aufgerufen und die <form> wird entsprechend geloggt. Andererseits wird mir beim alert() Testoutput einfach nur undefined ausgegeben. Kurzes Überprüfen der Element Struktur und schon war der Fehler gefunden:

<table>  
<form action="index.php?s=cinput" id="Input" method="POST"></form>  
<tbody>...</tbody>  
</table>

Laut den Chrome Developer Tools liegt tbody und damit die gesamten <select> Boxen AUSSERHALB der eigentlichen <form>. Daten können trotzdem eingetragen werden. Und wenn das Ding außerhalb der Form liegt, kann ich mit Form.getElementyByTagName('select')[0] natürlich nicht auf die <select> Boxen zugreifen. Ok. Soweit hab ich das verstanden. Wieso kann ich dann aber trotzdem Daten eintragen, und WIESO sieht mein .php File so aus:

<table>  
<form action="index.php?s=cinput" id="Input" method="POST">  
	<tr>  
		<td><select name="KDay" id="InputDay" size="1">  
          <?php  
		for($i=1;$i<=$PossibleDays;$i++) {  
			if($i == $Day) {  
                    ?>  
                    <option selected="selected" value="<?=$i?>"><?=$i?></option>  
                    <?php  
			}  
			else {  
                    ?>  
                    <option value="<?=$i?>"><?=$i?></option>  
                    <?php  
			}  
		}  
		?>  
		</select></td>  
  		<td><select name="KMonth" id="InputMonth"  size="1">  
          <?php  
		for($i=0;$i<12;$i++) {  
			if(($i+1) == $Month) {  
                    ?>  
                    <option selected="selected" value="<?=($i+1)?>"><?=$Months[$i]?></option>  
                    <?php  
			}  
			else {  
                    ?>  
                    <option value="<?=($i+1)?>"><?=$Months[$i]?></option>  
                    <?php  
			}  
		}  
		?>  
		</select></td>  
		<td><select name="KYear" id="InputYear" size="1">  
          <?php  
		for($i=2010;$i<=$Year;$i++) {  
			if($i == $Year) {  
                    ?>  
                    <option selected="selected" value="<?=$i?>"><?=$i?></option>  
                    <?php  
			}  
			else {  
                    ?>  
                    <option value="<?=$i?>"><?=$i?></option>  
                    <?php  
			}  
		}  
		?>  
		</select></td>  
		<td><input type="submit" value="Eintragen" /></td>  
	</tr>  
</form>  
</table>

Hieraus wird doch 100% ersichtlich, DASS ich die <select> Boxen INNERHALB der <form> Struktur anlege??? Was übersehe ich hier?

Vielen Dank!

[Matthias Apsel]

Om nah hoo pez nyeetz, Bewahrer!

form darf kein Kind von table sein. Layout-Tabellen sind doof.

Matthias

[MudGuard]

Hi,

<table>

<form action="index.php?s=cinput" id="Input" method="POST">
<tr>

[...]

</form>
</table>

  
Schwerer Verschachtelungsfehler. form kann niemals Kind eines table-Elements sein.  
  
Pack die Tabelle ins form-Element, nicht umgekehrt!  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[Matthias Apsel]

Om nah hoo pez nyeetz, MudGuard!

Pack die Tabelle ins form-Element, nicht umgekehrt!

Dann kann sie aber nicht die "forms ordentlich positionieren" ;-)

Matthias

[Baba]

Bezüglich form und table muss es heissen:

<form>  
  <table>  
    <tr>  
       <td></td>  
       <td></td>  
    </tr>  
  </table>  
</form>

Alternative ginge auch (valide) form in td, aber das macht keinen Sinn hier.

Dieses php <> html - Gewusel habe ich gerade noch keine Lust zu lesen.

Cheers,
Baba

[misterunknown]

Moin,

Laut den Chrome Developer Tools liegt tbody und damit die gesamten <select> Boxen AUSSERHALB der eigentlichen <form>.

Forms in Tabellen zu mauscheln ist nicht erlaubt. Da die meisten Browser aber raten, was du meintest, und was korrekt ist, haut dir Chrome selbiges durcheinander.

Hieraus wird doch 100% ersichtlich, DASS ich die <select> Boxen INNERHALB der <form> Struktur anlege??? Was übersehe ich hier?

Es wäre möglich, die Tabelle komplett (!) innerhalb des Forms zu setzen:

<form action="...">  
   <table> ...  
      ...  
   </table>  
</form>

Grüße Marco