Regina Schaukrug: Wenn eine Bestimmte Nummer eingegeben wurde dann weiteres Feld = Pflichtfeld

Beitrag lesen

Für Dein Beispiel:

<html>
<form method="post" name="form_prio">

  <label for="nummer">Nummer</label>
	<input type="text" name="nummer" id="nummer" required>

  <label for="farbe">Farbe</label>
	<input type="text" name="farbe" id="farbe" value="">

	<button id="btn_eintragen" value="Eintragen">Eintragen</button>

</form>
  <script type="text/javascript">
    document.getElementById("nummer").addEventListener(
      "change",
      function () {
        var v = Number( document.getElementById("nummer").value );
        var o = document.getElementById("farbe");
        o.required = ( 100 <= v && 189 >= v );
      }
   );
</script>
</html>

(<input> für submit durch das aktuelleren <button> ersetzt.)

Die Schritte:

  • Mit document.getElementById("nummer").addEventListener wird eine Ereignisüberwachung hinzugefügt. Hier habe ich mich für "change" entschieden, das "feuert" wenn der Wert (value) des Formularfeldes geändert (und dieses also verlassen) wird.

  • Ich habe eine anonyme Funktion gewählt. function () {...}

  • Die Zeile var v = Number( document.getElementById("nummer").value ); sorgt dafür, dass der Text(!) im Input als Zahl bereit steht. Das ist für den nachfolgenden Vergleich wichtig.

  • Die Variablen o und v sind nur lokal, also innerhalb der anonymen Funktion gültig (deshalb var o = ...).

  • In Abhängigkeit vom Wert wird in der Zeile o.required = ( 100 <= v && 189 >= v ); für den zweiten Input die Eigenschaft required true oder false gesetzt.

Natives Javascript reicht. JQuery ist dafür völlig obsolet.