[GELÖST] Select Feld nach erfolgreicher Textfeldvalidierung einblenden

[JonasWebDev]

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?

<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:

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;

        }

    };
}

 

[andreax]

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.

 

[kkapsner]

Ist das eine Hausaufgabe?

Und was soll dann der Mist:

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.

 

[JonasWebDev]

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

 

[tsseh]

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

 

[kkapsner]

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

 

[andreax]

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.

 

[JonasWebDev]

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

 

[mikdoe]

gelöst?

 

[andreax]

danke vielmals für die Mühe

Bitte gern geschehen und danke für das Kompliment.

Danke für die Likes

MFG Andreas

 

[JonasWebDev]

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

 

[kkapsner]

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...

 

[andreax]

@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

 

[tsseh]

Das hier dürfte eine akzeptable Lösung sein.

bei hausaufgaben finde ich es nicht gut fertige lösungen zu präsentieren

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

<!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>