Textfeld per Dropdownlist aktivieren und deaktivieren

[lakul]

Hallo,

ich wollte das SELFHTML Beispiel http://de.selfhtml.org/javascript/objekte/elements.htm#disabled für meine Zwecke abändern. Ich möchte gerne, dass ein Textfeld je nach Auswahl in einer nebenstehenden Dropdown List aktiviert bzw. deaktiviert wird.

Mein Ansatz ist bisher folgender:

...  
  
function wechsle_art () {  
  if (document.autoSumForm.auto[0].checked == true) {  
    var deaktiviert = false;  
  } else {  
    var deaktiviert = true;  
  }  
  for (var i = 0; i < document.autoSumForm.autoart.length; i++) {  
    document.autoSumForm.autoart[i].disabled = deaktiviert;  
  }  
}  
  
...  
  
<form name="autoSumForm">  
  
<p><input type="radio" name="auto" value="ja" onclick="wechsle_art();"> ja<br>  
<input type="radio" name="auto" value="nein" onclick="wechsle_art();"> nein</p>  
  
<p><input type="radio" name="autoart"> Kleinwagen<br></p>  
<p>  
  <input type="text" name="autoart" disabled="disabled"/>  
</p>  
</form>

Ich weiß, dass ist noch keine Auswahl per Dropdown, sondern ein Radiobutton, ich wollte mich aber erstmal langsam vortasten und habe zuerst das Textfeld erstellt. So wie das Skript jetzt zu sehen ist, funktioniert es, d.h. je nach Wahl wird das Feld aktiviert oder deaktiviert. Wenn ich jetzt aber die Zeile <p><input type="radio" name="autoart"> Kleinwagen<br></p> lösche, funktioniert es nicht mehr. Ich verstehe aber nicht warum, wo ist hier der Zusammenhang?

Danke schon mal im Voraus.

lakul

[Joachim]

Hi,

Wenn ich jetzt aber die Zeile <p><input type="radio" name="autoart"> Kleinwagen<br></p> lösche, funktioniert es nicht mehr.

Der Zugriff auf "length" kann nicht gehen, wenn es keine Länge gibt.

Gruesse, Joachim

[lakul]

Hi,

ok, ich habe jetzt folgendes probiert:

  
function wechsle_art () {  
  if (document.autoSumForm.auto[0].checked == true) {  
    var deaktiviert = false;  
  } else {  
    var deaktiviert = true;  
  }  
  if (i = 1) {  
    document.autoSumForm.autoart[i].disabled = deaktiviert;  
  }  
}

Das funktioniert auch, aber wieder nur, wenn ich <p><input type="radio" name="autoart"> Kleinwagen<br></p> nicht lösche.

[Joachim]

Hi,

Das funktioniert auch, aber wieder nur, wenn ich <p><input type="radio" name="autoart"> Kleinwagen<br></p> nicht lösche.

mit autoart[i] greifst Du auf das i-te Element des Array "autoart" zu. Ein einzelnes Inputfeld mit Namen autoart stellt aber kein Array dar, dazu brauchtest Du eine ganze Gruppe, z.B. von radios oder options.

Im Zweifel also auf length prüfen und entscheiden, ob auf ein Array oder ein Einzelelement zugegriffen wird.

Gruesse, Joachim

[lakul]

Hi,

ok, ich bin jetzt endlich in der Richtung, wo ich hin will:

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;

Body:

<label for="opt"> Dropdown-Element </label>  
          <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>  
      <label for="aussenopt">Option au&szlig;er der Dropdownliste </label>  
      <input type="text" id="aussenopt" name="Aussenoption" maxlength="40">

Ich habe hier nur aber das Problem, dass bei Auswahl von opt0 das Feld aktiviert wird, aber wenn ich die anderen opt's azswähle, wird das Feld nicht wieder deaktiviert.
Sorry, bin leider nicht so fitt in JS, kannst Du mir da eventuell sagen, wie ich das machen muss?

Gruß und Danke!

[lakul]

OK, hab die Lösung selber gefunden:

Es kann beispielsweise so aussehen:

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);  
  }  
}  
  
function startCalc(){  
  interval = setInterval("calc()",100);  
}

<select name="versandkosten" size="1" onchange="disable_input(this, 'versankosten_benutz', 'benutz');">  
    <option value="4.10">DHL Päckchen (4.10€)</option>  
    <option value="6.90">DHL Paket bis 10kg (6.90€)</option>  
    <option value = "benutz">Benutzerdefiniert</option>  
  </select></td>  
  <td><input type="text" id="versankosten_benutz" name="versankosten_benutz" disabled="disabled" /></td>