Button sichtbar machen durch eine Checkbox und 2 Textinput

P

Poccorosso

Grünschnabel
Hallo Allerseits
Ich brauche für eine "Sign in" Seite die Funktion, das der "Senden" Button erst sichtbar/aktiv wird wenn der Nutzer seine Vornamen und seinen Nachnamen jeweils in ein Feld geschrieben hat und dann die Checkbox aktiviert.

Der PHP Teil dafür steht schon, aber ich bekomme den JS Teil einfach nicht hin (weil ich davon auch nur echt wenig Ahnung habe).

Hier ein vereinfachtes Beispiel wie ich mir das vorgestellt habe. Funktioniert so aber leider nicht, ich weis ehrlich gesagt auch nicht warum und ich komme mit google auch nicht mehr weiter.

PHP: 
 <!DOCTYPE html>
<html>
<body>

<h1>Sign in</h1>

<script language="javascript">

function success() {
     if(document.getElementById("vname").value==="" &&    document.getElementById("zname").value==="" &&    document.getElementById("regel").checked == false;)
        { 
            document.getElementById('submitButton').disabled = true; 
        } else { 
            document.getElementById('submitButton').disabled = false;
        }
    }
</script>

<form>
  <label for="vname">Vorname:
    <input type="text" id="vname" name="vname" onkeyup="success()"/>
  </label><br>
  <label for="zname">Nachname: 
    <input type="text" id="zname" name="zname" onkeyup="success()"/>
  </label><br>
  <label for="regeln">
    <input type="checkbox" id="regeln" name="regeln" onclick="success()"/> verstanden <br>
  </label><br>
</form>
<input type="submit" id="submitButton" value="Weiter..." disabled /> 
</body>
</html>

Ich hatte mir das so vorgestellt, das jedesmal wenn etwas in einen der 3 Input geändert wird, er überprüft ob der Button aktiv sein darf oder nicht.

Vielen Dank für eure Hilfe im Voraus.
Poccorosso
 
Lösung
Sempervivum
Man kann für clientseitige Validierung auch vorteilhaft die Validierung von HTML5 verwenden. Würde dann so aussehen:
Code: 
    <form>
        <label for="vname">Vorname:
            <input type="text" id="vname" name="vname" required />
        </label><br>
        <label for="zname">Nachname:
            <input type="text" id="zname" name="zname" required />
        </label><br>
        <label for="regeln">
            <input type="checkbox" id="regeln" name="regeln" required /> verstanden <br>
        </label><br>
        <input type="submit" id="submitButton" value="Weiter..." disabled />
    </form>
    <script>
        const vvname = document.getElementById('vname').validity;
        const vzname =...
Eigentlich ist dein Script gar nicht so verkehrt. Auf den ersten Blick fallen aber zwei Fehler auf. Am Ende des if ist hinter dem false ein Semikolon, das da nicht hingehört, zum anderen fragst due die ID "regel" ab und nicht "regeln".
Dann habe ich die Abfrage umgedreht, d.h. immer auf != '' bzw. auf true abfragen und dann die beiden Ergebnisse austauschen. Dann geht es. Über das Warum hab ich jetzt nicht lange nachgedacht.
 
Man kann für clientseitige Validierung auch vorteilhaft die Validierung von HTML5 verwenden. Würde dann so aussehen:
Code: 
    <form>
        <label for="vname">Vorname:
            <input type="text" id="vname" name="vname" required />
        </label><br>
        <label for="zname">Nachname:
            <input type="text" id="zname" name="zname" required />
        </label><br>
        <label for="regeln">
            <input type="checkbox" id="regeln" name="regeln" required /> verstanden <br>
        </label><br>
        <input type="submit" id="submitButton" value="Weiter..." disabled />
    </form>
    <script>
        const vvname = document.getElementById('vname').validity;
        const vzname = document.getElementById('zname').validity;
        const vregeln = document.getElementById('regeln').validity;
        const submitbtn = document.getElementById('submitButton');
        document.querySelector('form').addEventListener('input', function () {
            if (vvname.valid && vzname.valid && vregeln.valid) submitbtn.disabled = false;
            else submitbtn.disabled = true;
        });
    </script>
 
Lösung
Vielen Dank euch beiden.
@Sprint Die 2 Schreibfehler waren mir noch gar nicht aufgefallen. Danke für den Hinweis.
@Sempervivum Das Script hab ich jetzt so übernommen. Ich gehe das morgen nochmal Stück für Stück durch um es selber zu verstehen. Aber ich habe es gerade getestet. Genau so habe ich mir das vorgestellt.

Ich bin euch beiden sehr dankbar. Vielen Dank
Viele Grüße
Poccorosso
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück