Ergebnis 1 bis 5 von 5

Thema: HTML Droptdownauswahl ergänzt text input Feld (bsp js)

  1. #1

    Question HTML Droptdownauswahl ergänzt text input Feld (bsp js)

    Hallo zusammen,

    ich bin auf der Suche nach einer Lösung für ein HTML Formular.
    Zwar ist es so, ich brauche eine Dropdownliste in welcher ein Name gewählt werden kann und anschliessend eine dazugehörende Telefonnummer in ein anderes Text input Feld ausgegeben wird.

    Bsp:
    Code (HTML5):
    1.  
    2.    <tr>
    3.      <td>Name</td>
    4.          <td>
    5.             <selection name="name" class="form-control"/>
    6.               <option value="Max Muster">Max Muster</option>
    7.               <option value="Max Muster2">Max Muster2</option>
    8.            </selection>
    9.         </td>
    10.         </tr>
    11.             <tr><td>Mobilenummer</td>
    12.                 <td>
    13.                      <input type="text" name="no" class="form-control" value="HIER SOLLTE BEI DER WAHL VON MAX MUSTER SEINE TELNR
    14.                       ERSCHEINEN">
    15.                 </td>
    16.             </tr>
    17.  
    Besten Dank für Lösungsansätze

    Beste Grüsse

  2. #2
    ★★★★☆ (Kasparski) Avatar von Jester
    Registriert seit
    Dec 2014
    Ort
    Code Azure
    Beiträge
    795
    ngb:news Artikel
    2

    Re: HTML Droptdownauswahl ergänzt text input Feld (bsp js)

    Code (HTML5):
    1.    
    2. <tr>
    3.      <td>Name</td>
    4.          <td>
    5.             <select name="name" class="form-control" onchange="document.getElementById('tgtField').value=this.options[this.selectedIndex].value" />
    6.               <option value="Max Muster">Max Muster</option>
    7.               <option value="Max Muster2">Max Muster2</option>
    8.            </select>
    9.         </td>
    10.         </tr>
    11.             <tr><td>Mobilenummer</td>
    12.                 <td>
    13.                      <input type="text" name="no" id="tgtField" class="form-control" value="">
    14.                 </td>
    15.             </tr>
    16.  
    Die Welt ist grau. Und bunt!

  3. #3
    Mitglied

    (Threadstarter)


    Registriert seit
    Nov 2015
    Beiträge
    28

    Re: HTML Droptdownauswahl ergänzt text input Feld (bsp js)

    Zitat Zitat von Jester Beitrag anzeigen
    Code (HTML5):
    1.    
    2. <tr>
    3.      <td>Name</td>
    4.          <td>
    5.             <select name="name" class="form-control" onchange="document.getElementById('tgtField').value=this.options[this.selectedIndex].value" />
    6.               <option value="Max Muster">Max Muster</option>
    7.               <option value="Max Muster2">Max Muster2</option>
    8.            </select>
    9.         </td>
    10.         </tr>
    11.             <tr><td>Mobilenummer</td>
    12.                 <td>
    13.                      <input type="text" name="no" id="tgtField" class="form-control" value="">
    14.                 </td>
    15.             </tr>
    16.  
    Besten Dank für das Feedback. Der Code funktioniert zwar allerdings hat es noch nicht den benötigten Effekt.
    Und zwar muss bei <option value="Max Muster">Max Muster</option> jeweils der value und der Anzeigetext mit dem Namen versehen sein, da der Value weiterverwendet wird. Somit kann ich leider nicht die Telefonnummer dort hinterlegen, da ansonsten statt der Name ebenfalls die Telefonnummer bei der Weiterverarbeitung erscheint. Gibt es noch eine andere Variante, dass oben im value="Name der Person" unten im value="dazugehörigeTel." erscheint?

    Herzlichen Dank

  4. #4

    Re: HTML Droptdownauswahl ergänzt text input Feld (bsp js)

    Du kannst das data-attribute verwenden, dort eine Telefonnummer hinzerlegen. Und beim onchange das data-attribute auslesen und anzeigen. Jester hat hier nur einen Ansatz geliefert, der von dir jederzeit modifiziert werden kann

  5. #5
    Mitglied

    (Threadstarter)


    Registriert seit
    Nov 2015
    Beiträge
    28

    Re: HTML Droptdownauswahl ergänzt text input Feld (bsp js)

    Besten Dank für den Hinweis

    Habe es geschafft mit dem data-attribute Tipp

    Code (HTML5):
    1.  
    2. <script type="text/javascript">
    3. function OnSelectChange(event) {
    4.    document.getElementById('ibaw').value = event.selectedOptions[0].getAttribute('data-number');
    5. }
    6. </script>
    7.  
    8. <tr><td>Name</td>
    9.                 <td>
    10.                 <select onchange="OnSelectChange(this)" class="form-control" name="name">
    11.                     <option data-number="+41795443322" value="Test Name">Test Name</option>
    12.                     <option data-number="+41795443322" value="Max Muster">Max Muster</option>
    13.                 </select>
    14.                 </td>
    15.             </tr>
    16.  
    17.             <tr><td>Mobilenummer</td>
    18.                 <td>
    19.                     <input id="ibaw" type="text" name="no" class="form-control">
    20.                 </td>
    21.             </tr>
    22.  
    23.  
    Besten Dank euch beiden
    Für diesen Beitrag bedankt sich saddy

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •