JavaScript - Objektreferenz- document - forms - elements

1. Das Objekt

Mit elements greift man auf die einzelnen Elemente eines Formulars zu. Dabei gibt es, wie könnte es auch anders sein, mehrere Möglichkeiten. Das funktioniert auch hier genau so wie bei forms. Mit elements und ohne, über den numerischen Index, über den Namen, mit Klammern und ohne.

form  = document.formularname;
blubb = form.elements[0]
blubb = form.elementname
blubb = form.elements.elementname
blubb = form.elements['elementname']

Ich persönlich arbeite eigentlich nur mit der zweiten Variante. In Ausnahmefällen auch mal mit der ersten und vierten, wenn ich dynamisch auf mehrere Formularelemente zugreifen muss.

2. Die Eigenschaften

Bei vielen der folgenden Eigenschaften kann man die Werte sowohl auslesen als auch ändern. Allerdings funktioniert Letzteres nicht immer im Internet Explorer. Darauf werde ich euch aber dann hinweisen.

checked, defaultChecked

Diese Eigenschaft kann man bei input-Elementen vom Typ radio oder checkbox anwenden. Dabei liest oder setzt man das HTML-Attribut checked. defaultChecked bezieht sich dabei auf den vorgegebenen Wert, daher ist es ziemlich sinnfrei, den zu ändern.

<form name="blubb">
  <input type="checked" name="blubber">
</form>
document.blubb.blubber.checked = true;

disabled, readonly

Hiermit kann man die gleichnamigen HTML-Attribute auslesen, setzen oder ändern. Daher ist diese Eigenschaft auf alle Formularelemente anwendbar.

<form name="blubb">
  <input type="text" name="blubber">
</form>
document.blubb.blubber.disabled = true;

name

Damit kann man das name-Attribut auslesen, setzen oder ändern. Ist meiner Meinung nach im praktischen Einsatz nicht von großer Bedeutung.

<form name="blubb">
  <input type="text" name="blubber">
</form>
alert (document.blubb[0].name);

type

Mit dieser Eigenschaft kann man den Typ eines Formularelementes auslesen und sogar ändern. Letzteres aber nicht im Internet Explorer, der will das nicht.

<form name="blubb">
  <input type="text" name="blubber">
</form>
document.blubb.blubber.type = 'radio';

value, defaultValue

Hier geht es um den Wert (value), den ein Formularelement haben kann. Dabei gibt es wieder die drei Möglichkeiten auslesen, setzen und ändern. Was defaultValue angeht, das funktioniert genau so wie defaultChecked.

<form name="blubb">
  <input type="text" name="blubber" value="laber">
</form>
document.blubb.blubber.value = 'jodelblah';

3. Die Methoden

blur

Damit kann man den Fokus/Cursor auf einem Element entfernen. Allerdings fällt mir im Moment kein vernünftiges Beispiel dazu sein. Wirkt ziemlich sinnfrei.

click

Hiermit besteht die Möglichkeit, ein Klick auf bestimmte Formularelemente zu simulieren. Allerdings kann man damit nur weitere JavaScript-Aktionen auslösen. Das Abschicken eines Formulars durch den simulierten Klick auf den submit-Button zum Beispiel funktioniert nicht. Diese Methode kann man aber nur bei allen Arten von Formular-Buttons und Checkboxen verwenden. Bei Letzteren wird das Element markiert.

<form name="test" action="">
  <input type="checkbox" name="blubb">
</form>
window.setTimeout ("document.test.blubb.click()", 3000);

focus

Das kennt ihr wahrscheinlich schon von Google her. Sobald man auf der Hauptseite ist, befindet sich der Cursor bereits im Suchfeld und man kann direkt lostippern. Und so was geschieht mit focus. Dies ist auf praktisch alle Formularelemente anwendbar.

form name="test" action="">
  <input type="text" size="6" name="blubb">
</form>
window.setTimeout ("document.test.blubb.focus()", 3000);

select

Diese Methode kann man nur auf alle Arten von Textfeldern anwenden. Denn damit markiert man den kompletten Textinhalt eines Feldes.

form name="test" action="">
  <input type="text" size="20" name="blubb" value="bla schwall">
</form>
document.test.blubb.select ();

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt