[JS] Event-Handler gesucht

[tobias-digital]

Hi!

Ich mal wieder in Sachen Javascript:

Ich habe ein Formular, dessen submit-Button erst aktiviert werden soll wenn alle Felder ausgefüllt sind.

<script type="text/javascript">

<!--

var an_email = false;

var nachricht = false;


function checkAll() {

  if (document.getElementById('an_email').value != '') {

    an_email = true;

  } else {

    an_email = false;

  }  

  if (document.getElementById('nachricht').value != '') {

    nachricht = true;

  } else {

    nachricht = false;

  }  

  if (an_email == true && nachricht == true) {

    document.getElementById('submit').disabled = false;

  } else {

    document.getElementById('submit').disabled = true;

  }

}

-->

</script>


<input type="text" name="an_email" size="50" maxlength="50" value"" id="an_email" onChange="javascript:checkAll();" />

<textarea name="nachricht" cols="50" rows="10" id="nachricht" onChange="javascript:checkAll();"></textarea>

<input type="submit" name="submit" value="senden" disabled="disabled" id="submit" />

OK, das funktioniert auch soweit. Am Anfang ist der submit-Button ausgegraut und wenn alle Felder ausgefüllt sind wird er aktiviert.

Das Problem: er wird erst aktiviert wenn man das letzte Textfeld verlässt.

Gibt es da nicht einen anderen Event-Handler den ich benutzen kann, oder eine elegantere Möglichkeit das zu lösen?

Danke und Gruß Tobias

[kills]

nimm doch anstatt von "onChange" "onKeyUp" oder "onKeyDown".

"onKeyPress" müsste auch gehen glaub ich

mehr dazu gibts hier:

@see http://de.selfhtml.org/javascript/sprache/eventhandler.htm

[tobias-digital]

Jup, onKeyup funktioniert superb ...

Danke

[geloescht_JesterDay]

function checkAll() {


    an_email = document.getElementById('an_email').value != '';


    nachricht = document.getElementById('nachricht').value != '';


    document.getElementById('submit').disabled = !(an_email && nachricht);


}

Hab mir mal erlaubt, deine Function was zu kürzen

[tobias-digital]

cool, erklär mal!

[kills]

cool, erklär mal!

was verstehst du net?

[geloescht_JesterDay]

cool, erklär mal!

hm... :confused:

ok:

  if (document.getElementById('an_email').value != '') {

    an_email = true;

  } else {

    an_email = false;

  } 

Was passiert hier? Mithilfe einer If-Bedingung setzt du eine Variable entweder auf True oder auf False. Wie sieht die Syntax einer If-Bedingnung aus? IF (Bedingung) { } Wobei Bedingung ein Whrheitswert sein muss (also True oder False). document.getElementById('an_email').value != '' liefert entweder True zurück (Wenn Value einen Wert enthält) oder eben False. True oder False soll aber auch in die Variable an_email. Da der Wert, der in an_email steht direkt von der Bedingung abhängt, kannst du auch einfach die Bedingung als Zuweisung für an_email nehmen: an_email = document.getElementById('an_email').value != '' Du weisst an_email das zu, was der Vergleich ergibt.

  if (an_email == true && nachricht == true) {

    document.getElementById('submit').disabled = false;

  } else {

    document.getElementById('submit').disabled = true;

  }

wie sieht die Bedingung hier aus? (an_email == true && nachricht == true) Das wiederrun besteht ja aus 2 Unterbedingungen. an_email == true Und nachricht == true. Beide Variablen können nur die Werte True oder False enthalten. Es steht also da: Entweder true == true oder false == true.

Wenn du einen Boolschen Wert mit true oder false vergleichst, kannst du auch gleich den Boolschen wert verwenden. Also:

if (an_email && nachricht ) {

Das benutzt du aber wieder nur um einen anderen boolschen Wert zu setzen. Also kannst du dasselbe wie oben machen. Da es hier aber der entgegengesetzte Wert ist der rauskommen soll verneinst du das ganze:

document.getElementById('submit').disabled = !(an_email && nachricht);

Jetzt klar?

[tobias-digital]

Aah, danke für die prima Erklärung!

Gruß Tobias