jaheba · October 29, 2024 17:14
diff --git a/antrag.html b/antrag.html
 <!doctype html>
 <html lang="de">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Mitgliedsformular - Förderverein Kita Inselmäuse e.V.</title>
        <link
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <style>
            body {
                background-color: #f0f8ff;
                font-family: "Comic Sans MS", cursive, sans-serif;
                color: #333;
            }
            h1 {
                color: #ff6f61;
                text-align: center;
                margin-bottom: 30px;
            }
            .container {
                background-color: #fff;
                border-radius: 15px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                padding: 20px;
                max-width: 600px;
                margin: auto;
            }
            .form-group label {
                font-weight: bold;
            }
            .form-check-label {
                font-weight: normal;
            }
            .btn-primary {
                background-color: #ff6f61;
                border: none;
            }
            .btn-primary:hover {
                background-color: #ff4c3b;
            }
            .custom-input {
                border-radius: 10px;
                border: 2px solid #ff6f61;
                padding: 10px;
            }
            .form-check-input {
                margin-top: 10px;
            }
            .feedback {
                font-size: 0.9em;
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="container mt-5">
            <h1>Mitgliedsformular</h1>
            <form id="membershipForm">
                <div class="form-group">
                    <label for="vorname">Vorname</label>
                    <input
                        type="text"
                        class="form-control custom-input"
                        id="vorname"
                        required
                    />
                </div>
                <div class="form-group">
                    <label for="nachname">Nachname</label>
                    <input
                        type="text"
                        class="form-control custom-input"
                        id="nachname"
                        required
                    />
                </div>
                <div class="form-group">
                    <label for="email">E-Mail</label>
                    <input
                        type="email"
                        class="form-control custom-input"
                        id="email"
                        required
                    />
                </div>
                <div class="form-group">
                    <label for="beitrag">Mitgliedsbeitrag</label>
                    <select class="form-control custom-input" id="beitrag">
                        <option value="60" selected>60 Euro</option>
                        <option value="30">30 Euro</option>
                        <option value="selber">
                            Selbst einen Beitrag auswählen
                        </option>
                    </select>
                    <div class="feedback" id="beitragFeedback"></div>
                </div>
                <div
                    class="form-group"
                    id="customBeitrag"
                    style="display: none"
                >
                    <label for="customAmount"
                        >Eigenen Betrag (mindestens 30 Euro)</label
                    >
                    <input
                        type="number"
                        class="form-control custom-input"
                        id="customAmount"
                        min="30"
                    />
                    <div class="feedback" id="customFeedback"></div>
                </div>
                <div class="form-check">
                    <input
                        type="checkbox"
                        class="form-check-input"
                        id="zustimmung"
                        required
                    />
                    <label class="form-check-label" for="zustimmung"
                        >Ich möchte dem Verein beitreten.</label
                    >
                </div>
                <div class="form-check">
                    <input
                        type="checkbox"
                        class="form-check-input"
                        id="lastschrift"
                    />
                    <label class="form-check-label" for="lastschrift"
                        >Ich erlaube den Beitrag per Lastschrift einziehen zu
                        lassen.</label
                    >
                </div>
                <button type="submit" class="btn btn-primary mt-3">
                    Absenden
                </button>
            </form>
        </div>

        <script>
            document
                .getElementById("beitrag")
                .addEventListener("change", function () {
                    const customBeitrag =
                        document.getElementById("customBeitrag");
                    const beitragFeedback =
                        document.getElementById("beitragFeedback");
                    if (this.value === "selber") {
                        customBeitrag.style.display = "block";
                        beitragFeedback.textContent = ""; // Clear feedback
                    } else {
                        customBeitrag.style.display = "none";
                        beitragFeedback.textContent = ""; // Clear feedback
                    }
                });

            document
                .getElementById("customAmount")
                .addEventListener("input", function () {
                    const customFeedback =
                        document.getElementById("customFeedback");
                    const value = parseInt(this.value);
                    if (isNaN(value) || value < 30) {
                        customFeedback.textContent =
                            "Bitte geben Sie einen Betrag von mindestens 30 Euro ein.";
                    } else {
                        customFeedback.textContent = "";
                    }
                });

            document
                .getElementById("membershipForm")
                .addEventListener("submit", function (event) {
                    event.preventDefault();

                    const vorname = document.getElementById("vorname").value;
                    const nachname = document.getElementById("nachname").value;
                    const email = document.getElementById("email").value;
                    const beitrag =
                        document.getElementById("beitrag").value === "selber"
                            ? document.getElementById("customAmount").value
                            : document.getElementById("beitrag").value;
                    const lastschrift =
                        document.getElementById("lastschrift").checked;

                    // Live validation for contribution amount
                    if (isNaN(beitrag) || parseInt(beitrag) < 30) {
                        alert(
                            "Bitte geben Sie einen gültigen Beitrag von mindestens 30 Euro ein.",
                        );
                        return;
                    }

                    fetch("/submit", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        body: JSON.stringify({
                            vorname,
                            nachname,
                            email,
                            beitrag: parseInt(beitrag),
                            lastschrift,
                        }),
                    })
                        .then((response) => response.json())
                        .then((data) => {
                            alert(data.message || data.error);
                        })
                        .catch((error) => {
                            console.error("Fehler:", error);
                        });
                });
        </script>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </body>
 </html>
	<!doctype html>
	<html lang="de">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Mitgliedsformular - Förderverein Kita Inselmäuse e.V.</title>
	<link
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
	rel="stylesheet"
	/>
	<style>
	body {
	background-color: #f0f8ff;
	font-family: "Comic Sans MS", cursive, sans-serif;
	color: #333;
	}
	h1 {
	color: #ff6f61;
	text-align: center;
	margin-bottom: 30px;
	}
	.container {
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	padding: 20px;
	max-width: 600px;
	margin: auto;
	}
	.form-group label {
	font-weight: bold;
	}
	.form-check-label {
	font-weight: normal;
	}
	.btn-primary {
	background-color: #ff6f61;
	border: none;
	}
	.btn-primary:hover {
	background-color: #ff4c3b;
	}
	.custom-input {
	border-radius: 10px;
	border: 2px solid #ff6f61;
	padding: 10px;
	}
	.form-check-input {
	margin-top: 10px;
	}
	.feedback {
	font-size: 0.9em;
	color: red;
	}
	</style>
	</head>
	<body>
	<div class="container mt-5">
	<h1>Mitgliedsformular</h1>
	<form id="membershipForm">
	<div class="form-group">
	<label for="vorname">Vorname</label>
	<input
	type="text"
	class="form-control custom-input"
	id="vorname"
	required
	/>
	</div>
	<div class="form-group">
	<label for="nachname">Nachname</label>
	<input
	type="text"
	class="form-control custom-input"
	id="nachname"
	required
	/>
	</div>
	<div class="form-group">
	<label for="email">E-Mail</label>
	<input
	type="email"
	class="form-control custom-input"
	id="email"
	required
	/>
	</div>
	<div class="form-group">
	<label for="beitrag">Mitgliedsbeitrag</label>
	<select class="form-control custom-input" id="beitrag">
	<option value="60" selected>60 Euro</option>
	<option value="30">30 Euro</option>
	<option value="selber">
	Selbst einen Beitrag auswählen
	</option>
	</select>
	<div class="feedback" id="beitragFeedback"></div>
	</div>
	<div
	class="form-group"
	id="customBeitrag"
	style="display: none"
	>
	<label for="customAmount"
	>Eigenen Betrag (mindestens 30 Euro)</label
	>
	<input
	type="number"
	class="form-control custom-input"
	id="customAmount"
	min="30"
	/>
	<div class="feedback" id="customFeedback"></div>
	</div>
	<div class="form-check">
	<input
	type="checkbox"
	class="form-check-input"
	id="zustimmung"
	required
	/>
	<label class="form-check-label" for="zustimmung"
	>Ich möchte dem Verein beitreten.</label
	>
	</div>
	<div class="form-check">
	<input
	type="checkbox"
	class="form-check-input"
	id="lastschrift"
	/>
	<label class="form-check-label" for="lastschrift"
	>Ich erlaube den Beitrag per Lastschrift einziehen zu
	lassen.</label
	>
	</div>
	<button type="submit" class="btn btn-primary mt-3">
	Absenden
	</button>
	</form>
	</div>

	<script>
	document
	.getElementById("beitrag")
	.addEventListener("change", function () {
	const customBeitrag =
	document.getElementById("customBeitrag");
	const beitragFeedback =
	document.getElementById("beitragFeedback");
	if (this.value === "selber") {
	customBeitrag.style.display = "block";
	beitragFeedback.textContent = ""; // Clear feedback
	} else {
	customBeitrag.style.display = "none";
	beitragFeedback.textContent = ""; // Clear feedback
	}
	});

	document
	.getElementById("customAmount")
	.addEventListener("input", function () {
	const customFeedback =
	document.getElementById("customFeedback");
	const value = parseInt(this.value);
	if (isNaN(value) \|\| value < 30) {
	customFeedback.textContent =
	"Bitte geben Sie einen Betrag von mindestens 30 Euro ein.";
	} else {
	customFeedback.textContent = "";
	}
	});

	document
	.getElementById("membershipForm")
	.addEventListener("submit", function (event) {
	event.preventDefault();

	const vorname = document.getElementById("vorname").value;
	const nachname = document.getElementById("nachname").value;
	const email = document.getElementById("email").value;
	const beitrag =
	document.getElementById("beitrag").value === "selber"
	? document.getElementById("customAmount").value
	: document.getElementById("beitrag").value;
	const lastschrift =
	document.getElementById("lastschrift").checked;

	// Live validation for contribution amount
	if (isNaN(beitrag) \|\| parseInt(beitrag) < 30) {
	alert(
	"Bitte geben Sie einen gültigen Beitrag von mindestens 30 Euro ein.",
	);
	return;
	}

	fetch("/submit", {
	method: "POST",
	headers: {
	"Content-Type": "application/json",
	},
	body: JSON.stringify({
	vorname,
	nachname,
	email,
	beitrag: parseInt(beitrag),
	lastschrift,
	}),
	})
	.then((response) => response.json())
	.then((data) => {
	alert(data.message \|\| data.error);
	})
	.catch((error) => {
	console.error("Fehler:", error);
	});
	});
	</script>

	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	</body>
	</html>