Ergebnis 1 bis 14 von 14
Like Tree2Likes
  • 2 Post By andreax

Thema: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

  1. #1
    JonasWebDev ist offline Grünschnabel
    registriert
    22-09-2016
    Beiträge
    4

    Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    Hallo,

    Es soll folgendes passieren:
    1.Es soll ein JavaScript Placeholder erstellt werden (erledigt)
    2.Es sollen vier Text-Input-Elemente angezeigt werden;wenn diese ausgefüllt wurden, sollen die zwei Select-Elemente erscheinen.


    Meine Frage: Wie schaffe ich es nun, dass die Select-Elemente eingeblendet werden?

    HTML-Code:
    <form  id="versand" method="GET" action="#">
                    <div id="text">
                        <input type="text" id="vorname" name="vorname" title="Bitte Vornamen eingeben" value="Bitte Vornamen eingeben" />
                        <input type="text" id="nachname" name="nachname" title="Bitte Nachnamen eingeben" value="Bitte Nachnamen eingeben"/>
                        <input type="text" id="strasse" name="strasse" title="Bitte Straße eingeben" value="Bitte Straße eingeben"/>
                        <input type="text" id="plz" name="postleitzahl" title="Bitte Postleitzahl eingeben" value="Bitte Postleitzahl eingeben"/>
                    </div>
                    <div id="select" style="display:none">
                        <select name="versandart">
                            <option id="standard">Standard</option>
                            <option id="express">Express</option>
                        </select>
                        <select name="lieferservice" >
                            <option id="dhl">DHL</option>
                            <option id="hermes">Hermes</option>
                        </select>
                    </div>
    Mein bisheriger JS-Stand:

    Code:
    var textinput = document.getElementById("text").getElementsByTagName("input");
    var select = document.getElementById('select');
    
    for (var i = 0; i < textinput.length; i++) {
    
        textinput[i].onclick = function () {
    
            if (this.value === this.title) {
    
                this.value = '';
    
            }
        };
    
        textinput[i].onblur = function () {
    
            if (this.value === '') {
    
                this.value = this.title;
    
            }
    
        };
    }
    Geändert von mikdoe (24-09-2016 um 14:37 Uhr) Grund: Gelöst

  2. #2
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    213

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    Am besten wäre es einfach einen weiter Button zu setzen und mit diesem die Felder nochmal validieren und dann die Selections anzeigen.
    Du kannst zwar im onblur Event mitzählen und bei 4 dann anzeigen aber dazu muss dann auch das letzte Feld auf blur gesetzt werden
    und man weis nicht ob der User nicht doch nochmal ein Feld ausbessert.
    Da kannst du aber gleich einen Button setzen der wäre auch für den User verständlicher.
    Ausserdem wenn du anstelle des Values anzugeben das Attribute placeholder verwendest sparst du eine for Schleife.
    Geändert von andreax (23-09-2016 um 09:35 Uhr)

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    Ist das eine Hausaufgabe?

    Und was soll dann der Mist:
    Zitat Zitat von JonasWebDev Beitrag anzeigen
    JavaScript Placeholder
    Alle modernen Browser unterstützen HTML-Placeholder. Das sollte man auch verwenden/lehren.

    Zu deinem Problem: du musst auf den <input>s einen oninput Eventlistener registrieren, der dann prüft, ob alle vier Felder ausgefüllt wurden. Dabei sind dir jetzt natürlich deine Placeholder im Weg... HTML-Placeholder wären es nicht. So musst du hald auch noch prüfen, ob dein Placeholder-Text drin steht...

    PS: onclick ist das falsche Event für deine Placeholder. Man kann auch über die Tastatur in ein <input> springen. Du brauchst da onfoxus.

  4. #4
    JonasWebDev ist offline Grünschnabel
    registriert
    22-09-2016
    Beiträge
    4

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    Ja klar ansonsten hätte ich natürlich auch das HTML 5 Placeholder Attribut verwendet aber das ist eine Übungsaufgabe von meiner Uni. Vielen Dank für deinen Tipp

    - - - Aktualisiert - - -

    Leider ist ein Button nicht vorgesehen, sonst wäre das ganze wirklich einfacher. Ich muss es wohl mit dem Event probieren. Sinn dieser ersten Teilaufgabe ist es, das Placeholder Attribut durch JavaScript zu ersetzen aber dennoch vielen Dank für die Hilfe

  5. #5
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    für jedes input ein promise erzeugen
    im onchange auflösen
    wenn alle promises aufgelöst sind, das select anzeigen

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    Ein Promise scheint mir hier keine ideale Lösung zu sein, da man den Inhalt eines <input>s ja auch wieder löschen kann.

  7. #7
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    213

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    Das hier dürfte eine akzeptable Lösung sein.
    Das Dokument liegt zum schnellen Check auf meinem Webspace.
    Habe blur und focus für die Inputfelder verwendet und einen MouseUp Event-Listener auf das Formular zum prüfen ob alle Inputfelder
    ausgefüllt sind.
    zum überprüfen wird eine Css-Klasse verwendet.
    mikdoe and JonasWebDev like this.

  8. #8
    JonasWebDev ist offline Grünschnabel
    registriert
    22-09-2016
    Beiträge
    4

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    Du bist ein Gott, danke vielmals für die Mühe

  9. #9
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.944

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    gelöst?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  10. #10
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    213

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    Zitat Zitat von JonasWebDev Beitrag anzeigen
    danke vielmals für die Mühe
    Bitte gern geschehen und danke für das Kompliment.

    Danke für die Likes

    MFG Andreas

  11. #11
    JonasWebDev ist offline Grünschnabel
    registriert
    22-09-2016
    Beiträge
    4

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    ja ist gelöst und funktioniert so, wie es sein soll

  12. #12
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    Zitat Zitat von andreax Beitrag anzeigen
    einen MouseUp Event-Listener auf das Formular zum prüfen ob alle Inputfelder
    Warum das? Warum keinen oninput/onchange? Man kann ja ein Formular auch komplett ohne Maus ausfüllen...

  13. #13
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    213

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    @kkapsner
    Weil in einem der Tests der change Event nicht funktionierte und dann als ich nach vorhanden sein der Klasse geprüft habe nicht mehr daran dachte,
    und happy war einen Event gefunden zu haben der mir den blur des zuletztgewählten Inputfeldes auslöst.
    Kann ja sein das man gar kein Event aufs Formular braucht die letzte Aktion könnte vielleicht auch an den Erhalt des Focus vom Select-Tag angehängt
    werden.

    - - - Aktualisiert - - -

    So wie vermutet das Event auf das Formular kann ich mir sparen.
    Aber dafür einen Focus- Eventhandler an das Select-tag gebunden.
    und die Handlerfunction vom Formular im FocusHandler der Inputs aufrufen.
    dann funktioniert das Formular auch über das Keyboard.
    neuer Link

    @JonasWebDev Tut mir echt leid das ich auf die Keyboard eingaben vergessen habe
    Geändert von andreax (24-09-2016 um 21:03 Uhr)

  14. #14
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: Select Feld nach erfolgreicher Textfeldvalidierung einblenden

    Zitat Zitat von andreax Beitrag anzeigen
    Das hier dürfte eine akzeptable Lösung sein.
    bei hausaufgaben finde ich es nicht gut fertige lösungen zu präsentieren

    Zitat Zitat von kkapsner Beitrag anzeigen
    Ein Promise scheint mir hier keine ideale Lösung zu sein, da man den Inhalt eines <input>s ja auch wieder löschen kann.
    wenn das mit abgedeckt werden soll, gebe ich dir recht.
    prinzipiell ist das als übungsaufgabe suboptimal, da wie du schon sagtest HTML-placeholder genommen werden sollten und wie andreax anmerkte da eher ein button zum validieren reingehört.

    da schon eine lösung gegeben ist, hier noch eine mit promises

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Test Radio value</title>
        <meta charset="utf-8">
      </head>
      <body>
        <div id="text">
          <input type="text" id="vorname" name="vorname" title="Bitte Vornamen eingeben" value="Bitte Vornamen eingeben" />
          <input type="text" id="nachname" name="nachname" title="Bitte Nachnamen eingeben" value="Bitte Nachnamen eingeben"/>
          <input type="text" id="strasse" name="strasse" title="Bitte Straße eingeben" value="Bitte Straße eingeben"/>
          <input type="text" id="plz" name="postleitzahl" title="Bitte Postleitzahl eingeben" value="Bitte Postleitzahl eingeben"/>
        </div>
        <div id="select" style="display:none">
          <select name="versandart">
            <option id="standard">Standard</option>
            <option id="express">Express</option>
          </select>
          <select name="lieferservice" >
            <option id="dhl">DHL</option>
            <option id="hermes">Hermes</option>
          </select>
        </div>
        <script>
          function checkInputs(ip, ep, empty)
          {
            var show = true;
            var inputPromises = ip || [];
            var emptyPromises = ep || [];
            var inputs = document.getElementById('text').getElementsByTagName('input');
            [].forEach.call(inputs, function(input, idx)
            {
              if (empty === undefined || idx == empty)
              {
                inputPromises[idx] = new Promise(function(resolveInput, rejectInput)
                {       
                  emptyPromises[idx] = new Promise(function(resolveEmpty, rejectEmpty)
                  {
                    input.addEventListener('change', function(e)
                    {
                      if (this.value)
                      {
                        resolveInput(this.value);
                      }
                      else
                      {
                        resolveEmpty(idx);
                      }
                    });
                  });
                });
              }
            });
            Promise.all(inputPromises).then(function(values)
            {
              if (show)
              {
                console.log('jetzt einblenden', values);
              }
            });
            Promise.race(emptyPromises).then(function(idx)
            {
              show = false;
              console.log('ausblenden');
              checkInputs(inputPromises, emptyPromises, idx);
            });
          }
          checkInputs();
        </script>
      </body>
    </html>

Ähnliche Themen

  1. [GELÖST] Je nach select Div einblenden / ausblenden
    Von Genusstaucher im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 26-08-2015, 12:32
  2. Antworten: 1
    Letzter Beitrag: 22-08-2014, 15:25
  3. select-feld erst nach klick auf radiobutton
    Von gecko im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 02-04-2007, 11:31
  4. Antworten: 7
    Letzter Beitrag: 08-10-2005, 14:39
  5. nach auswahl textfeld&select einblenden
    Von mikede im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 19-07-2004, 20:36

Stichworte

Lesezeichen

Berechtigungen

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