Zur Navigation

Textfeld mit JavaScript "deaktivieren"

1 Marcel (Gast)

Morgen

Nach meinem Quadratwurzel-Ermittler, möchte mir jetzt einen Prozentrechner schreiben. Die Formel und die Ausarbeitung an sich sind kein Problem. Doch habe ich mit der Deaktivierung eines bestimmten Textfeldes Probleme.

Der Rechner soll so ablaufen:

Es gibt drei Felder: Gesamt, auszurechner Wert und Prozentsatz. Neben den Feldern gibt es drei Radiobuttons. Damit kann man bestimmen, was von den drei Optionen ermittelt werden soll. Bisher auch kein Problem. Nur möchte ich z. B. bei einem Klick auf "Gesamt" nur den Wert und Prozentsatz haben. Der Gesamtwert soll ignoriert werden. Damit es besser aussieht und ich mehr an JavaScript herankomme, möchte ich das Feld "deaktivieren". D.h. es soll "readonly" gesetzt werden.

Wie kann ich so etwas realisieren?


Ich freue mich über jede Antwort. Danke.


EDIT: Außer dem Schreibschutz möchte ich auch noch 'nen festen Value-Wert setzen. Z. B. "Darf nicht angegeben werden".

18.03.2006 11:29 | geändert: 18.03.2006 11:33

2 Jörg Kruse

Dazu müsstest du bei onclick die Eigenschaften value und disabled für das Formularelement ändern (siehe auch Erläuterungen in SELFHTML zu den Formularelementen), also z.B. so:

<form action="">
<p>Gesamt: <input type="text" size="30" name="Gesamt" onclick="this.form.Gesamt.value = 'Darf nicht angegeben werden'; this.form.Gesamt.disabled = true"></p>
<p>Wert: <input type="text" size="30" name="Wert"></p>
<p>Prozent: <input type="text" size="30" name="Prozent"></p>
</form>

18.03.2006 12:10 | geändert: 18.03.2006 12:14

3 Marcel (Gast)

Du hast es zwar nicht so aufgebaut, wie ich es haben wollte. Aber die JavaScript-Anweisung hat mir schon geholfen. Es scheint auch auf meine Variante zu funktionieren. Vielen Dank. :)


EDIT: Das Eintragen über eine Checkbox oder einen Radiobutton funktioniert. Wenn ich die Checkbox aber wieder deaktiviere, dann entfernt er mir den Text nicht. Was mache ich falsch? (Ich habe wirklich Null Ahnung von JavaScript.)

18.03.2006 12:18 | geändert: 18.03.2006 12:20

4 C)-(iLL@

Versuchs mal so:

...
</head>
<script type="text/javascript">
  function calcTypeClick(field) {
    switch(field.value) {
      case '1': 
          field.form.Gesamt.disabled = true;
          field.form.Gesamt.readonly = true;
          field.form.Gesamt.value="Nicht berechnen";
        break;
      case '2': 
      case '3':
          field.form.Gesamt.disabled = false;
          field.form.Gesamt.readonly = false;
          field.form.Gesamt.value='';
       break;         
    }
  }

</script>
<body>
<form action="">
<p>Gesamt: <input type="text" size="30" name="Gesamt" id="Gesamt"><input type="radio" name="calctype" value="1" onClick="calcTypeClick(this)"></p>
<p>Wert: <input type="text" size="30" name="Wert"><input type="radio" name="calctype" value="2" onClick="calcTypeClick(this)"></p>
<p>Prozent: <input type="text" size="30" name="Prozent"><input type="radio" name="calctype" value="3" checked="checked" onClick="calcTypeClick(this)"></p>

</form>
</body>
....

18.03.2006 14:11

5 Marcel (Gast)

Ja. So in etwa habe ich es mir vorgestellt. Nur sollte die Aktiverung und Deaktivierung der beiden anderen Input-Feldern auch so funktionieren...

18.03.2006 16:34

6 Jörg Kruse

Dazu musst du die Funktion für alle Fälle analog erweitern, z.B. für case '3' zusätzlich:

field.form.Prozent.disabled = true;
field.form.Prozent.readonly = true;
field.form.Prozent.value="Nicht berechnen";
field.form.Wert.disabled = false;
field.form.Wert.readonly = false;
field.form.Wert.value='';

(Vielleicht hat noch jemand eine Idee, das eleganter zusammenzufassen)

19.03.2006 10:43

7 C)-(iLL@

Vielleicht hat noch jemand eine Idee, das eleganter zusammenzufassen

Ja, so:

  function disable(field) {
    field.disabled = true;
    field.readonly = true;
    field.value="Nicht berechnen";
  }
  
  function enable(field) {
    field.disabled = false;
    field.readonly = false;
    field.value = '';
  }
  
  function calcTypeClick(field) {
    switch(field.value) {
      case '1': 
          disable(field.form.Gesamt);
          enable(field.form.Wert);
          enable(field.form.Prozent);
        break;
      case '2': 
          enable(field.form.Gesamt);
          disable(field.form.Wert);
          enable(field.form.Prozent);
        break;
      case '3': 
          enable(field.form.Gesamt);
          enable(field.form.Wert);
          disable(field.form.Prozent);
        break;
    }
  }

Ich weiß jetzt zwar nicht genau, welche Felder wann deaktiviert und aktiviert werden sollen, aber das abzuändern sollte kein Problem sein.

19.03.2006 13:26

8 Tilman

Hallo Jörg.

Ich habe es mit diesem Code gemacht:
<html><head><title>Test</title>
<script type="text/javascript">
function wechsle_art () {
  if (document.Testform.auto[0].checked == true) {
    var deaktiviert = false;
  } else {
    var deaktiviert = true;
  }
  for (var i = 0; i < document.Testform.autoart.length; i++) {
    document.Testform.autoart[i].disabled = deaktiviert;
  }
}
</script>
</head><body>

<form action="" name="Testform">

<p>Besitzen Sie ein Auto?</p>

<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>Falls ja, was für ein Auto?</p>

<p><input type="radio" name="autoart"> Kleinwagen<br>
<input type="radio" name="autoart" value="kombi"> Kombi<br>
<input type="radio" name="autoart" value="limousine"> Limousine<br>
<input type="radio" name="autoart" value="sportwagen"> Sportwagen<br>
<input type="radio" name="autoart" value="kleinbus"> Kleinbus<br>
<input type="radio" name="autoart" value="andere"> andere Art</p>

</form>

</body></html>

Ich will aber anstatt den Radiobuttons mit den verschiedenen Autoarten 2 Eingabefelder. Da deren Namen aber nicht gleich sind (autoart), funktioniert das nicht. Wie kann ich oben im JavaScript (fett markiert) noch einen weiteren Namen hinzufügen?

23.09.2008 15:52

9 Jörg Kruse

Du kannst der Funktion den Namen als Argument mitgeben und dann über getElementsByName() auf die Eingabefelder zugreifen

function wechsle_art (art) {
  if (document.Testform.auto[0].checked == true) {
    var deaktiviert = false;
  } else {
    var deaktiviert = true;
  }
  for (var i = 0; i < document.getElementsByName(art).length; i++) {
    document.getElementsByName(art)[i].disabled = deaktiviert;
  }
}

<p><input type="radio" name="auto" value="ja" onclick="wechsle_art('autoart');"> ja<br>
<input type="radio" name="auto" value="nein" onclick="wechsle_art('autoart');"> nein</p>

23.09.2008 17:48

10 Tilman

Hallo Jörg!

Vielen Dank! Wenn ich aber diesen Radio-Button automatisch auswählen lasse, sind die Felder aber immer noch ausfüllbar:
<input type="radio" name="auto" value="nein" onclick="wechsle_art('autoart');" checked> nein

Kann man dass denn auch machen, dass die Felder dann auch automatisch deaktiviert sind?

24.09.2008 17:19