Hallo,
ich versuche mich seit kurzem an Javascript und wollte mir ein Script schreiben,
was beim ausfüllen prüft, ob ein Feld noch leer ist oder nicht und je nach Situation dann die Felder rot (für leer) bzw. grün (für voll) ändert.
Problem ist nun, dass er allerdings nicht die Farben ändert, wie ich es will. Wenn ich statt dem Befehl die CSS Daten zu ändern ein Fenster aufrufe geht es, ansonsten nicht.
Hier mal die Codes:
Javascript:
HTML:
CSS:
Danke schonmal für Eure Hilfe
)
ich versuche mich seit kurzem an Javascript und wollte mir ein Script schreiben,
was beim ausfüllen prüft, ob ein Feld noch leer ist oder nicht und je nach Situation dann die Felder rot (für leer) bzw. grün (für voll) ändert.
Problem ist nun, dass er allerdings nicht die Farben ändert, wie ich es will. Wenn ich statt dem Befehl die CSS Daten zu ändern ein Fenster aufrufe geht es, ansonsten nicht.
Hier mal die Codes:
Javascript:
HTML:
<script type="text/javascript">
<!--
function checkInput(inputname,divname) {
if(inputname == "") {
document.getElementById(divname).class = 'diverror';
} else {
document.getElementById(divname).class = 'divtrue';
}
}
// -->
</script>HTML:
HTML:
<form method="post" action="" name="checkform">
<label for="name" class="label">Name:</label>
<div id="in_name" class="divnorm" onclick="javascript:show_error('in_name');">
<input type="text" name="name" id="name" class="inputnorm" onblur="javascript:checkInput(this.value,'in_name');" />
</div>
<p style="clear:left"></p>
<label for="email" class="label">Email:</label>
<div id="in_email" class="divnorm">
<input type="text" name="email" id="email" class="inputnorm" onblur="javascript:checkInput(this.value,'in_email');" />
</div>
<p style="clear:left"></p>
<label for="homepage" class="label">Homepage:</label>
<div id="in_homepage" class="divnorm">
<input type="text" name="homepage" id="homepage" class="inputnorm" onblur="javascript:checkInput(this.value,'in_homepage');" />
</div>
<p style="clear:left"></p>
<input type="submit" name="send" id="send" class="inputsend" value="Senden" onclick="javascript:check_all();" />
</form>CSS:
HTML:
.label {
float:left;
width:70px;
margin-top:7px;
font-size:11px;
padding:0 7px;
}
.inputerror {
border:1px solid #ff0000;
background:#ffffff;
}
.diverror {
border:1px solid #ffffff;
background:#ffffff url(star.png) center right no-repeat;
padding:3px;
width:270px;
}
.inputtrue {
border:1px solid #009900;
background:#e8ffe8;
}
.divtrue {
border:1px solid #ffffff;
background:#ffffff url(star.png) center right no-repeat;
padding:3px;
width:270px;
}
.divnorm {
border:1px solid #ffffff;
background:#ffffff url(star.png) center right no-repeat;
padding:3px;
width:270px;
}
.inputnorm{
border:1px solid #999999;
background:#ffffff;
}
.inputsend {
margin-left:55px;
}Danke schonmal für Eure Hilfe
)
