Eingabefeld per Dropdown aktivieren/deaktivieren

[Ray]

Hallo Forum Fans.

Ich bin HTML- / JavaScript-Anfänger. Ich habe ein kleines Problem, und zwar folgendes:

Ich möchte folgende Situation haben, dass das Eingabefeld "Option außer der Dropdownliste" NUR AKTIVIERT ist, NUR WENN ich die Auswahl "--------" ausgewählt habe. Sonstige Auswähle in der Dropdownliste verursachen das Eingabefeld IMMER DEAKTIVIERT.

Hier ist der HTML-Code:

<form name="Dropdown" action = "" methode = "" enctype="text/plain">

<table>

<tr>  </tr>

<tr>

<td><label for="opt"> Dropdown-Element </label></td>

<td></td>

<td>
          <select name="optionsauswahl" size="1" onchange="">

<option value = "sbez0"> - - - - - - - - - - </option>

<option value = "opt1"> Option 1 </option>
            <option value = "opt2"> Option 2 </option>
            <option value = "opt3"> Option 3 </option>
            <option value = "opt4"> Option 4 </option>
            <option value = "opt5"> Option 5 </option>

</select>

</tr>

<tr>  </tr>

<tr>

<td><label for="aussenopt">Option au&szlig;er der Dropdownliste </label></td>

<td></td>

<td><input type="text" id="aussenopt" name="Aussenoption" maxlength="40"></td>

</tr>

</table>

</form>

Vielen Dank schon mal im Voraus.

• Ray -

[Samoht]

Gudn!

Das geht nur mit Javascript und mit onchange bist Du auf dem richtigen Weg. Hast Du schon nach irgendwas _gesucht_? Hast Du schon irgendwas _probiert_?

Suche z.B. nach "javascrip input toggle" oder ähnlichem

Gruß, Samoht

[Kaster]

...

<select name="optionsauswahl" size="1" onchange="check(this); return false;">

...

<script type="text/javascript">
//<!--
function check(obj){
 var aussenopt = document.Dropdown.Aussenoption;
 if (obj.value == "sbez0") {
  aussenopt.disabled = false;
 } else {
  aussenopt.disabled = true;
 }
}
// -->
</script>

Kaster

[EKKi]

Mahlzeit,

<select name="optionsauswahl" size="1" onchange="check(this); return false;">

<script type="text/javascript">
//<!--

Die Auskommentierung von Javascript-Code ist in aktuellen Browsern absolut überflüssig.

Ansonsten würde ich die Funktion sinnvoller benennen und variabler gestalten, damit man sie auch für andere Kombinationen von <select>-Boxen und <input>-Feldern verwenden kann:

<select name="optionsauswahl" size="1" onchange="disable_input(this, 'aussenopt', 'sbez0');">  
  
<script type="text/javascript">  
[code lang=javascript]  
  
function disable_input(obj, input_id, option_value) {  
  var input_obj = document.getElementById(input_id);  
  
  if (input_obj) {  
    input_obj.disabled = !(obj.value == option_value);  
  }  
}

</script>[/code]

MfG,
EKKi

[Kaster]

Ich würde sagen- wir haben doch klare Anforderungen gehabt und warum mit Kanonen auf Spatzen schiessen. Das alles und immer besser gemacht werden kann ist klar. Mann soll die richtige Konstellation erkennen zw. Anforderungen, dem nötigen Aufwand und denn Zukunftsanforderungen (die übrigens hier nicht existieren).

Mahlzeit auch,
Kaster

[EKKi]

Mahlzeit,

warum mit Kanonen auf Spatzen schiessen.

Ich sehe meinen Verbesserungsvorschlag nicht als Kanone an.

Mann soll die richtige Konstellation erkennen zw. Anforderungen, dem nötigen Aufwand und denn Zukunftsanforderungen (die übrigens hier nicht existieren).

Noch nicht. Aber sie werden kommen. Da gebe ich Dir Brief und Siegel drauf. Das war bisher bei allem, was ich gemacht habe, so.

Deshalb mache ich mir - bevor ich Code schreibe - lieber einmal mehr Gedanken, um ihn gleich so zu strukturieren, dass er flexibel genug für eventuelle zukünftige Änderungen ist bzw. so wie er ist oder mit wenigen kleinen Änderungen auch woanders wiederverwendet werden kann.

MfG,
EKKi

[Ray]

Servüß...!

Tolli...tolli...hab' jetzt anhand eurer Infos und paar eigener Modifikationen mein HTML/JS verbessert. Manche hab' ich bloß von dem Forum abgeschrieben.

Vielleicht ist auch für die anderen nützlich, schreib' ich auch das Programm hier hin.

Allerdings hab' noch "BUGs", und zwar:
1)
Nach der Auswahl von "-- Nicht in der Liste --" bleibt das Textfeld IMMER NOCH aktiv, obwohl ich eine andere Option ausgewählt hab', und außerdem  wurde die Eingabe in dem Textfeld NICHT gelöscht. Gewünscht ist eigentlich ein NICHT AKTIVES Eingabefeld und der INHALT SOLLTE GELÖSCHT WERDEN. Durch das Auffrischen (F5) wird zwar das Textfeld deaktiviert, allerdings der Inhalt wird nicht gelöscht.

Das passiert ebeneso ähnlich, wenn ich die Taste "Abbrechen" betätige. Diesmal wird zwar der Inhalt gelöscht, allerdings ist das Textfeld immer noch aktiv. Praktisch zu sagen, dass die Funktion Reset keine Wirkung auf die DEaktivierung des Textfeldes hat.

<html>
<head>
<script type="text/javascript">
function enableOther()
{
   if (!document.getElementById) return;
   var s = document.getElementById('optionsauswahl_list');
   if (!s) return;
   if (s.options[s.selectedIndex].value != 'opt0') return;
   var t = document.getElementById('aussenopt');
   if (!t) return;
   t.disabled = false;
}

function init()
{
   if (!document.getElementById) return;
   var s = document.getElementById('optionsauswahl_list');
   if (!s) return;
   s.onchange = enableOther;
   var t = document.getElementById('aussenopt');
   if (!t) return;
   t.disabled = true;
}
window.onload = init;

</script>

</head>
<body>
<form name="Dropdown" action = "" methode = "" enctype="text/plain">
  <table>
    <tr>  </tr>
    <tr>
      <td><label for="opt"> Dropdown-Element </label></td>
      <td></td>
      <td>
        <select name="optionsauswahl" id="optionsauswahl_list" size="1" onchange="init()">
          <option value = "opt1"> Option 1 </option>
          <option value = "opt2"> Option 2 </option>
          <option value = "opt3"> Option 3 </option>
          <option value = "opt4"> Option 4 </option>
          <option value = "opt5"> Option 5 </option>
          <option value = "opt0"> - - Nicht in de Liste - - </option>
        </select>
    </tr>
    <tr>  </tr>
    <tr>
      <td><label for="aussenopt">Option au&szlig;er der Dropdownliste </label></td>
      <td></td>
      <td><input type="text" id="aussenopt" name="Aussenoption" maxlength="40"></td>
    </tr>
  </table>

<br><br>

<table>
    <tr>
      <td>
        <input type="reset" name="abbrechen" value="Abbrechen">
      </td>
    </tr>
  </table>
</form>
</body>
</html>

Mercy,

• Ray -

[EKKi]

Mahlzeit,

Du musst nicht zwangsläufig auf jeden Lösungsvorschlag die gleiche Antwort mit haufenweise neuem Quellcode posten ... :-)

Allerdings hab' noch "BUGs", und zwar:

Nein, Bugs sind das nicht, sondern Auswirkungen von Mängeln in der Spezifikation/Problembeschreibung/Anforderung/Pflichtenheft.

Nach der Auswahl von "-- Nicht in der Liste --" bleibt das Textfeld IMMER NOCH aktiv, obwohl ich eine andere Option ausgewählt hab',

Der http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange@title=onchange-Event wird erst dann aufgerufen, wenn das Element den Fokus verliert. Kann es sein, dass Du das Feld noch nicht verlassen hattest?

und außerdem  wurde die Eingabe in dem Textfeld NICHT gelöscht.

Natürlich nicht. Wie auch? Schließlich steht das nirgendwo im Skript und Du hast auch nichts dergleichen geäußert. Erweitere den Code doch einfach entsprechend ...

Gewünscht ist eigentlich ein NICHT AKTIVES Eingabefeld und der INHALT SOLLTE GELÖSCHT WERDEN.

Wenn Du etwas wünschst, dann solltest Du das auch mitteilen - Glaskugeln funktionieren nur sehr unzuverlässig. :-)

Durch das Auffrischen (F5) wird zwar das Textfeld deaktiviert, allerdings der Inhalt wird nicht gelöscht.

Wie kommst Du jetzt auf einmal auf ein Neuladen der Seite? Und zum Thema "Inhalt wird nicht gelöscht": s.o.

Das passiert ebeneso ähnlich, wenn ich die Taste "Abbrechen" betätige. Diesmal wird zwar der Inhalt gelöscht, allerdings ist das Textfeld immer noch aktiv.

Welche Taste "Abbrechen"? Die vom Browser? Na sicher passiert da nichts so, wie es sein soll - schließlich zwingst Du den Browser ja dazu, die gerade durchgeführte Aktion mittendrin einfach abzubrechen. Komische Vorstellungen hast Du ...

Praktisch zu sagen, dass die Funktion Reset keine Wirkung auf die DEaktivierung des Textfeldes hat.

Welche Funktion "Reset"?

MfG,
EKKi

[Ray]

Servüß...!

Tolli...tolli...hab' jetzt anhand eurer Infos und paar eigener Modifikationen mein HTML/JS verbessert. Manche hab' ich bloß von dem Forum abgeschrieben.

Vielleicht ist auch für die anderen nützlich, schreib' ich auch das Programm hier hin.

Allerdings hab' noch "BUGs", und zwar:
1)
Nach der Auswahl von "-- Nicht in der Liste --" bleibt das Textfeld IMMER NOCH aktiv, obwohl ich eine andere Option ausgewählt hab', und außerdem  wurde die Eingabe in dem Textfeld NICHT gelöscht. Gewünscht ist eigentlich ein NICHT AKTIVES Eingabefeld und der INHALT SOLLTE GELÖSCHT WERDEN. Durch das Auffrischen (F5) wird zwar das Textfeld deaktiviert, allerdings der Inhalt wird nicht gelöscht.

Das passiert ebeneso ähnlich, wenn ich die Taste "Abbrechen" betätige. Diesmal wird zwar der Inhalt gelöscht, allerdings ist das Textfeld immer noch aktiv. Praktisch zu sagen, dass die Funktion Reset keine Wirkung auf die DEaktivierung des Textfeldes hat.

<html>
<head>
<script type="text/javascript">
function enableOther()
{
   if (!document.getElementById) return;
   var s = document.getElementById('optionsauswahl_list');
   if (!s) return;
   if (s.options[s.selectedIndex].value != 'opt0') return;
   var t = document.getElementById('aussenopt');
   if (!t) return;
   t.disabled = false;
}

function init()
{
   if (!document.getElementById) return;
   var s = document.getElementById('optionsauswahl_list');
   if (!s) return;
   s.onchange = enableOther;
   var t = document.getElementById('aussenopt');
   if (!t) return;
   t.disabled = true;
}
window.onload = init;

</script>

</head>
<body>
<form name="Dropdown" action = "" methode = "" enctype="text/plain">
  <table>
    <tr>  </tr>
    <tr>
      <td><label for="opt"> Dropdown-Element </label></td>
      <td></td>
      <td>
        <select name="optionsauswahl" id="optionsauswahl_list" size="1" onchange="init()">
          <option value = "opt1"> Option 1 </option>
          <option value = "opt2"> Option 2 </option>
          <option value = "opt3"> Option 3 </option>
          <option value = "opt4"> Option 4 </option>
          <option value = "opt5"> Option 5 </option>
          <option value = "opt0"> - - Nicht in de Liste - - </option>
        </select>
    </tr>
    <tr>  </tr>
    <tr>
      <td><label for="aussenopt">Option au&szlig;er der Dropdownliste </label></td>
      <td></td>
      <td><input type="text" id="aussenopt" name="Aussenoption" maxlength="40"></td>
    </tr>
  </table>

<br><br>

<table>
    <tr>
      <td>
        <input type="reset" name="abbrechen" value="Abbrechen">
      </td>
    </tr>
  </table>
</form>
</body>
</html>

Mercy,

• Ray -