Sperrung der Submit Schaltfläche

Leider tauchte bei meiner Formulargestaltung noch ein Problem auf:

In screenshot_1 könnt ihr den letzten Teil des Formulares sehen, in dem der Benutzer ein Datum eintragen muss. Dieses darf nicht länger als 3 Monate zurückliegen. Falls doch erscheint wie in schreenshot_2 eine Fehlermeldung. Praktisch und sinnvoll wäre es, den Absenden-Button bei dieser Fehlermeldung zu sperren oder auszublenden. Oder alternativ, was noch besser wäre, den Button solange unsichtbar zu lassen bis ein korrekter Datumswert eingetrage wird.
Wie kann ich das realisierren?

Viele Grüße
Norbert

Hallo Norbert,

dieses Verhalten kann man mit individuellem Javascript erzielen.

Hier ist in der Dokumentation beschrieben, welche Möglichkeiten du mit Visforms hast um individuelles Javascript und/oder CSS dem Formular hinzuzufügen.

docs.joomla-4.visforms.vi-solutions.de/d...add-script-overview/

Du kannst das onChange Event auf dem Input des Datumsfeld verwenden um den Submitbutton zu verstecken/anzuzeigen.

Herzliche Grüße,
Aicha

Hallo Aicha.

Vielen Dank für deine Antwort. Leider komme ich mit dem ‘Visforms Custom Plugin’ noch nicht so richtig zurecht. Ich habe folgenden Code, der eigentlich funktionieren sollte, in den FrrontendWebassets in Formular eingetragen:
// Initialisierung
var submitButton = document.getElementById('47');  // ID des Submit-Buttons
var dateField = document.getElementById('151');  // ID des Datumsfelds

// Überwachen des Datumsfelds
dateField.addEventListener('change', function() {
    var selectedDate = new Date(this.value);
    var currentDate = new Date();
    var threeMonthsAgo = new Date();
    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);

    if (selectedDate >= threeMonthsAgo && selectedDate <= currentDate) {
        // Aktivieren des Submit-Buttons
        submitButton.disabled = false;
    } else {
        // Deaktivieren des Submit-Buttons
        submitButton.disabled = true;
    }
});

Leider funktioniert es nicht.

LG Norbert

Hallo Norbert,

du musst im HTML Quellcode schauen, welchen Wert das id-Attribut der beiden Felder hat.
Diese ist nicht nur eine Zahl, also nicht die id des Feldes, die du in der Administration siehst.

Versuche es mal mit 'field47' und 'field151'.

Ich würde auf dem Submitbutton nicht 'disabled' verwenden.
Das hat auf diesem Button schon eine andere Funktion.
Stattdessen würde ich den Button mit CSS, das mit Javascript eingefügt wird, verstecken/anzeigen.
Wenn die Seite geladen ist, würde ich ebenfalls den Button direkt verstecken.

Gruß,
Aicha

Hallo Aisha.

Ich bin so vorgegangen wie du beschrieben hast. Den Code habe ich entsprchend geändert, es funktioniert aber immer noch nicht.

// Initialisierung
var submitButton = document.getElementById('field47');  // ID des Submit-Buttons
var dateField = document.getElementById('field151');  // ID des Datumsfelds

// Den Submit-Button zunächst verstecken
submitButton.style.display = "none";

// Überwachen des Datumsfelds
dateField.addEventListener('change', function() {
    var selectedDate = new Date(this.value);
    var currentDate = new Date();
    var threeMonthsAgo = new Date();
    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);

    if (selectedDate >= threeMonthsAgo && selectedDate <= currentDate) {
        // Anzeigen des Submit-Buttons
        submitButton.style.display = "inline-block";  // oder "block", je nach Bedarf
    } else {
        // Verstecken des Submit-Buttons
        submitButton.style.display = "none";
    }
});

Auch die Anleitung habe ich studiert, aber ich komme trotzdem nicht ganz klar damit.Ist der Code denn richtig unter dem Reiter "Formular" eingefügt? Oder gehört er woanders hin?

LG Norbert

Hallo Norbert,
ja unter dem Formular Reiter ist das richtig.

Hast du mit den Browser Tools überprüft, ob der Code auch im HTML Quellcode ankommt.
(Du kannst mit dem Inspektor im Quellcode danach suchen).

Hast du in der Browser Konsole geschaut, ob da evtl. Javacsript Fehler angezeigt werden?
Hast du in der Browser Konsole geschaut, ob der Event-Handler auch wiklich an dem Datumsfeld dran hängt?

Wenn das, was du hier gepostet hast, der ganze Code ist, dann vermute ich, dass du in der Browser Konsole eine Fehlermeldung siehst.
Der Code kann ja frühestens fehlerfrei ablaufen, wenn das HTML Dom geladen ist.
Also der Code muss zusätzlich in einen Event-Handler, damit er erst aufgerufen wird, wenn die Seite vollständig geladen ist.

Herzliche Grüße,
Aicha