Katharina: Eingabefeld beim Anklicken löschen

Beitrag lesen

Hallo zusammen,

ich habe in meinem HTML Code 3 Bereiche mit je 2 Eingabefeldern, wobei immer nur 1 Bereich angezeigt wird. Über Links kann man die anderen Bereiche einblenden.

Jetzt soll beim Anklicken der Eingabefelder des sichtbaren Bereichs der vorbelegte Text gelöscht werden. Das Ganze passiert mit Javascript indem ich das Attribut 'Value' auf '' setze!

Klicke ich zuerst die Textfelder aus dem Bereich 1 an, dann 2 und dann 3, dann klappt auch alles wie gewünscht.

Fange ich mit den Feldern aus Bereich 3 an, dann 2 und dann 1, dann werden die Felder vom Bereich 1 nicht gelöscht. Ich lasse mir immer per Alert den value ausgeben, klicke ich erneut die Felder von Bereich 1 an, dann zeigt mir der Browser als value auch '' an, allerdings steht der Text immer noch im Eingabefeld.

Ich hoffe Ihr habt mein Problem verstanden, ist etwas kompliziert zu beschreiben.

Kann mir jemand helfen?

Liebe Grüße,
Katharina

HTML Code:

<html>
 <head>
  <title>Test</title>
 </head>
 <body>

<script language="javascript">
    function deleteDefaultValues(id)
    {
     var textfield = document.getElementById(id);
     alert("_"+textfield.getAttribute("value")+"_");
     if ((textfield.getAttribute("value") == "Suchbegriff")) {
      textfield.setAttribute("value","");
     }
     if ((textfield.getAttribute("value") == "PLZ")) {
      textfield.setAttribute("value","");
     }
    }

function show(id)
    {
     var num = 3;
      for (counter = 1; counter <= num; counter++){
        var tmpId = 'content'+counter;
        var tmpObj = document.getElementById(tmpId);
        if (tmpId != id){
          tmpObj.setAttribute('style', 'display:none');
        }else{
          tmpObj.setAttribute('style', 'display:block');
        }
      }
    }
  </script>

<a href="javascript:show('content1')">1 anzeigen</a>
 </br>
 <a href="javascript:show('content2')">2 anzeigen</a>
 </br>
 <a href="javascript:show('content3')">3 anzeigen</a>

<div id="content1" style="display:block">
 <form action="www.test.de" method="_get" target="_blank">
  <input type="text" value="Suchbegriff" id="content1_1" onclick="deleteDefaultValues('content1_1')"/>
  </br>
  <input type="text" value="PLZ" id="content1_2" onclick="deleteDefaultValues('content1_2')"/>
  </br>
  <input type="submit" value="senden" id="content1_3"/>
 </form>
 <p>1</p>
 </div>

<div id="content2" style="display:none">
 <form action="www.test.de" method="_get" target="_blank">
  <input type="text" value="Suchbegriff" id="content2_1" onclick="deleteDefaultValues('content2_1')"/>
  </br>
  <input type="text" value="PLZ" id="content2_2" onclick="deleteDefaultValues('content2_2')"/>
  </br>
  <input type="submit" value="senden" id="content2_3"/>
 </form>
 <p>2</p>
 </div>

<div id="content3" style="display:none">
 <form action="www.test.de" method="_get" target="_blank">
  <input type="text" value="Suchbegriff" id="content3_1" onclick="deleteDefaultValues('content3_1')"/>
  </br>
  <input type="text" value="PLZ" id="content3_2" onclick="deleteDefaultValues('content3_2')"/>
  </br>
  <input type="submit" value="senden" id="content3_3"/>
 </form>
 <p>3</p>
 </div>
 </body>
</html>