Formular-Eingaben überprüfen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Formular-Eingaben überprüfen

    Hi Leute,

    ich habe ein [coderwiki]Informationen/Formular[/coderwiki]:

    Quellcode

    1. <form name="Kunde" action="index.php" method="POST">
    3. <span>Vorname:</span>
    4. <span>
    5. <input type="text" name="vorname" />
    6. </span>
    8. <span>Nachname:</span>
    9. <span>
    10. <input type="text" name="nachname" />
    11. </span>
    13. <input type="submit" name="submitToVorschau" value="Weiter">
    15. </form>
    Alles anzeigen


    Jetzt möchte ich, dass der submit-Button nur dann angezeigt wird, wenn die Felder Vorname und Nachname ausgefüllt wurden.
    Wurden die Felder noch nicht ausgefüllt, dann soll der Submit-Button grau hinterlegt sein und darunter die Meldung: "Bitte füllen Sie alle Felder aus" stehen!

    Hat jemand einen Ansatz für mich? Bin leider noch Anfänger, würde mich aber freuen, wenn man das mit Ajax realisieren könnte!

  • falsch
    php wird nur auf dem server ausgeführt, kann also nicht direkt auf Usereingaben reagieren

    ajax brauchst du allerdings auch nicht - simples JavaScript reicht

    also erstmal machst du den submit button grau und hinterlegst den standard text

    Quellcode

    1. <input type="submit" name="submitToVorschau" value="Bitte f&uuml;llen Sie alle Felder aus" style="color:#afafaf">


    dann baust du dir eine check funktion um die eingaben zu überprüfen und die farben/texte zu setzen

    Quellcode

    1. function checkInput() {
    2. var submitObj = document.Kunde.submitToVorschau;
    3. if(document.Kunde.vorname.value == "" || document.Kunde.nachname.value == "") {
    4. submitObj.value = "Bitte f&uuml;llen Sie alle Felder aus";
    5. submitObj.style.color = "#afafaf";
    6. } else {
    7. submitObj.value = "weiter";
    8. submitObj.style.color = "#000000";
    9. }
    10. }


    diese rufst du dann am besten bei jeder tastatureingabe auf

    Quellcode

    1. onkeyup="checkInput()"

  • Habe es jetzt folgendermaßen gemacht:

    Quellcode

    1. <html>
    2. <head>
    3. <script language="JavaScript">
    4. <!--
    5. function checkInput()
    6. {
    8. if(document.Kunde.vorname.value == "" || document.Kunde.nachname.value == "")
    9. {
    10. document.getElementById(11).style.display = "block"; // Hinweis einblenden
    11. document.getElementById(12).style.display = "none"; // Submit-Button ausblenden
    12. }
    13. else
    14. {
    15. document.getElementById(11).style.display = "none"; // Hinweis ausblenden
    16. document.getElementById(12).style.display = "block"; // Submit-Button einblenden
    17. }
    18. }
    20. //-->
    21. </script>
    22. </head>
    23. <body>
    26. <form name="Kunde" action="index.php" method="POST">
    28. <span>Vorname:</span>
    29. <span>
    30. <input type="text" name="vorname" onkeyup="checkInput()" />
    31. </span>
    33. <span>Nachname:</span>
    34. <span>
    35. <input type="text" name="nachname" onkeyup="checkInput()" />
    36. </span>
    38. <br/><br/>
    39. <!-- Wenn Felder nicht ausgefüllt -->
    40. <div id="11" style="display: box">
    41. Bitte f&uuml;llen Sie alle Felder aus!
    42. </div>
    43. <!-- Wenn Felder ausgefüllt -->
    44. <input type="submit" name="submitToVorschau" id="12" value="Vorschau anzeigen" style="display: none">
    46. </form>
    49. </body>
    50. </html>
    Alles anzeigen


    THX! Noch irgendwelche Verbesserungsvorschläge???