Korbinian Bachl: Formular: Liste soll Wert in Textfeld ändern

Hallo,

ich habe ein kleines Problem zudem ich keine lösung gefunden habe.. das heist ich habe im archiv nur ne lösung mit direktübergabe von checkboxen gesehen, konnte SIe aber nicht erfolgreich ummodeln :(

Gut, was will ich ? - eigentlich ganz einfach: es gibt in einem Formularbereich eine  Liste mit Wert1 bis WertX und dann hidden Felder die Wert1 bis WertX heissen und als inhalt einen TextY haben. Diese Text soll dann in das Textfeld namens Textausgabe eingefügt werden... im HTML code so:

<p>
  <select name="auswahl">
    <option value="wert1">wert1</option>
    <option value="wert2">wert2</option>
    <option value="wert3">wert3</option>
  </select>
  <input type="hidden" name="wert1" value="Text für Wert 1">
  <input type="hidden" name="wert2" value="Text für Wert 2">
  <input type="hidden" name="wert3" value="Text für Wert 3">
</p>
<p>
  <textarea name="anmerkungstext" cols="40" wrap="VIRTUAL">DA SOLL DER TEXT HIN</textarea>
</p>

gleichzeitig soll der user aber das Feld anmerkungstext auch noch manuell nachbearbeiten dürfen ! Ist so etwas mit JS möglich und wen ja wie stellt man es an ?

Danke und grüße

Korbinian

  1. Hallo Korbinian,

    gleichzeitig soll der user aber das Feld anmerkungstext

    Es sei denn, Du setzt die Textarea auf Readonly, gibt es da keine Probleme.

    auch noch manuell nachbearbeiten dürfen ! Ist so etwas mit JS möglich und wen ja wie stellt man es an ?

    Du bist schon fast da - der Ansatz ist schon einmal sehr gut. Du musst als erstes den Wert der Select-Box auslesen. Dabei hilft Dir die typische Konstruktion document.formname.auswahlname.options[document.formname.auswahlname.selectedIndex].value (siehe http://selfhtml.teamone.de/javascript/objekte/options.htm, http://selfhtml.teamone.de/javascript/objekte/elements.htm#value) Dann musst Du noch Hidden-Felder zugreifen, da bei Dir der Name des Hidden-Felds der Wert der Select-Box ist, musst Du Dir eine passende Konstruktion aus http://selfhtml.teamone.de/javascript/objekte/elements.htm#allgemeines heraussuchen. Jetzt musst Du vom Hidden-Feld wieder den Wert nehmen (s. oberen Link) und ihn dem Wert der Textarea zuweisen. Jetzt musst Du nur noch wissen, dass immer wenn sich die Auswahl eine Liste ändert, der onChange-Handler aufgerufen wird.

    Grüße,

    Christian

  2. Hallo,

    so dürfte es funktionieren:
    <html>
    <head>
    <script type="text/javascript">
    function ueberkomlzirtes_einfuegen(werto) {
    if (werto=='wert1') document.formi.anmerkungstext.value=document.formi.wert1.value
    if (werto=='wert2') document.formi.anmerkungstext.value=document.formi.wert2.value
    if (werto=='wert3') document.formi.anmerkungstext.value=document.formi.wert3.value
    }
    function ueberschreiben() {
    var index = document.formi.auswahl.options[document.formi.auswahl.selectedIndex].value
    if (index=='wert1') document.formi.wert1.value=document.formi.anmerkungstext.value
    if (index=='wert2') document.formi.wert2.value=document.formi.anmerkungstext.value
    if (index=='wert3') document.formi.wert3.value=document.formi.anmerkungstext.value
    }
    </script>
    </head>
    <body>
     <form name="formi">
    <p>
      <select name="auswahl" onChange="ueberkomlzirtes_einfuegen(document.formi.auswahl.options[document.formi.auswahl.selectedIndex].value)">
        <option value="wert1">wert1</option>
        <option value="wert2">wert2</option>
        <option value="wert3">wert3</option>
      </select>
      <input type="hidden" name="wert1" value="Text für Wert 1">
      <input type="hidden" name="wert2" value="Text für Wert 2">
      <input type="hidden" name="wert3" value="Text für Wert 3">
    </p>
    <p>
      <textarea name="anmerkungstext" cols="40" wrap="VIRTUAL" onChange="ueberschreiben()">DA SOLL DER TEXT HIN</textarea>
    </p>
     </form>
    </body>
    </html>

    Grüße aus Düsseldorf,

    Aleksej

    1. Hallo Aleksej,

      So kompliziert und nicht erweiterbar? Ich dachte, Du wärst inzwischen ein Js-Spezialist?

      so dürfte es funktionieren:
      <html>
      <head>
      <script type="text/javascript">

      function einfaches_einfuegen() {
        welcher_wert = document.formi.auswahl.options[document.formi.auswahl.selectedIndex].value;
        document.formi.anmerkungstext.value = document.formi.elements[welcher_wert].value;
      }
      function ueberschreiben() {
        welcher_wert = document.formi.auswahl.options[document.formi.auswahl.selectedIndex].value;
        document.formi.elements[welcher_wert].value = document.formi.anmerkungstext.value;
      }

      </script>
      </head>
      <body>
      <form name="formi">
      <p>

      <select name="auswahl" onChange="einfaches_einfuegen()">

      <option value="wert1">wert1</option>
          <option value="wert2">wert2</option>
          <option value="wert3">wert3</option>
        </select>
        <input type="hidden" name="wert1" value="Text für Wert 1">
        <input type="hidden" name="wert2" value="Text für Wert 2">
        <input type="hidden" name="wert3" value="Text für Wert 3">
      </p>
      <p>
        <textarea name="anmerkungstext" cols="40" wrap="VIRTUAL" onChange="ueberschreiben()">DA SOLL DER TEXT HIN</textarea>
      </p>
      </form>
      </body>
      </html>

      Grüße,

      Christian

      1. Hallo Aleksej,

        So kompliziert und nicht erweiterbar? Ich dachte, Du wärst inzwischen ein Js-Spezialist?

        enschuldigung, veruch mich zu bessern ;))

        document.formi.elements[welcher_wert].value;

        ^^^^^^^^^^^^
        Die Möglichkeit kannte ich noch nicht...

        Grüße aus Düsseldorf,

        Aleksej

        1. Hallo Aleksej,

          document.formi.elements[welcher_wert].value;
                                     ^^^^^^^^^^^^
          Die Möglichkeit kannte ich noch nicht...

          Ist recht nett, vor allem wenn man auf PHP-Array-Felder zugreifen will:

          <input type="text" name="test[1]">

          => document.formname.elements["test[1]"].value

          Grüße,

          Christian