Hallo Forum,
ich habe folgendes Problem:
es müssen sich ein <select> und ein <input type="text" ..> gegenseitig überwachen. D.h., wenn etwas selectiert wurde (selectedIndex != 0), soll das Input-Feld disabled werden. Das Input-Feld soll wieder freigegeben werden, wenn nichts selectiert wurde (selectedIndex == 0).
Umgekehrt soll das Input-Feld, wenn etwas drin steht, das <select> disablen. Ebenso soll das <select> wieder aktiviert werden, sobald das Input-Feld keinen Wert enthält.
Im Input-Feld versuche ich das per onFocus und OnBlur zu realisieren
und das <select> wird per onChange überwacht.
Jetzt tut sich folgendes Problem auf:
Wenn ich etwas selectiere, dann wird wie gewünscht das Input-Feld disabled. Hebe ich die Selection wieder auf, wird auch das Input-Feld wieder freigegeben. Und nun passiert es: Sobald ich in das Input-Feld klicke (onFocus), dann wird onBlur ausgeführt, und erst DANACH onFocus?!
Hier mein Quelltext:
Im <script> die Funktionen:
function chkField(s, z) {
if(document.getElementsByName(s)[0].selectedIndex != 0) {
document.getElementsByName(z)[0].disabled = true;
return;
}
else {
document.getElementsByName(z)[0].disabled = false;
return;
}
}
function chkInput(s, z) {
if(document.getElementsByName(z)[0].focus == true) {
document.getElementsByName(s)[0].disabled = true;
return;
}
else {
document.getElementsByName(s)[0].disabled = false;
return;
}
}
function chkLeer(s, z, wert) {
if(wert != '') {
document.getElementsByName(s)[0].disabled = true;
return;
}
else {
document.getElementsByName(s)[0].disabled = false;
document.getElementsByName(z)[0].disabled = true;
return;
}
}
Hier das HTML:
<tr>
<td style="background-color:#FFFFFF;">02
<select name="s2" size="1" style="width:12em;" style="padding-left:20px;" onChange="chkField('s2','z1')">
<option> </option>
{$data['s2']} </select>
</td>
<td style="background-color:#FFFFFF;">11
<select name="n2" size="1" style="width:12em;" style="padding-left:20px;" onChange="chkField('n2','z2')">
<option> </option>
{$data['n2']} </select>
</td>
</tr>
<tr>
<td style="background-color:#FFFFFF;">
03 <input type="text" name="z1" style="width:12em;" maxlenght="63" value="{$data['alt']['z1']}" onFocus="chkInput('s2','z1')" onBlur="chkLeer('s2','z1', this.value)">
</td>
<td style="background-color:#FFFFFF;">
12 <input type="text" name="z2" style="width:12em;" maxlenght="63" value="{$data['alt']['z2']}" onFocus="chkInput('n2','z2')" onBlur="chkLeer('n2','z2', this.value)">
</td>
</tr>
Anmerkung: das {$data['nx']} sind die von php erzeugten Optionen für die einzelnen <selects>. Diese sind richtig und können als Fehlerquelle ausgeschlossen werden.
Wo liegt mein Fehler?
Für Tipps wäre ich echt dankbar.
MfG
Chris Ross