383 lines
14 KiB
HTML
383 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mehrere Radio-Button-Gruppen</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 30px auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.form-container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
.radio-group {
|
|
margin-bottom: 25px;
|
|
padding: 20px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
.radio-group h3 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
}
|
|
.radio-group label {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
cursor: pointer;
|
|
font-weight: normal;
|
|
}
|
|
.radio-group input[type="radio"] {
|
|
margin-right: 8px;
|
|
}
|
|
.form-fields {
|
|
margin-top: 20px;
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
.form-group input, .form-group textarea, .form-group select {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
.form-group textarea {
|
|
height: 80px;
|
|
resize: vertical;
|
|
}
|
|
.submit-btn {
|
|
background-color: #007bff;
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
}
|
|
.submit-btn:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
.reset-message {
|
|
color: #28a745;
|
|
font-size: 14px;
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background-color: #d4edda;
|
|
border-radius: 4px;
|
|
display: none;
|
|
}
|
|
.strategy-selector {
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
background-color: #e9ecef;
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="form-container">
|
|
<h2>Mehrere Radio-Button-Gruppen</h2>
|
|
|
|
<div class="strategy-selector">
|
|
<h3>Reset-Strategie wählen:</h3>
|
|
<label>
|
|
<input type="radio" name="strategy" value="any" onchange="setResetStrategy(this.value)" checked>
|
|
Reset bei jeder Gruppe
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="strategy" value="specific" onchange="setResetStrategy(this.value)">
|
|
Reset nur bei bestimmten Gruppen
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="strategy" value="none" onchange="setResetStrategy(this.value)">
|
|
Kein automatisches Reset
|
|
</label>
|
|
</div>
|
|
|
|
<form id="mainForm">
|
|
<!-- Gruppe 1: Kundentyp -->
|
|
<div class="radio-group">
|
|
<h3>Kundentyp:</h3>
|
|
<label>
|
|
<input type="radio" name="customerType" value="private"
|
|
onchange="handleRadioChange('customerType', this.value)">
|
|
Privatkunde
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="customerType" value="business"
|
|
onchange="handleRadioChange('customerType', this.value)">
|
|
Geschäftskunde
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="customerType" value="premium"
|
|
onchange="handleRadioChange('customerType', this.value)">
|
|
Premium-Kunde
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Gruppe 2: Service-Art -->
|
|
<div class="radio-group">
|
|
<h3>Service-Art:</h3>
|
|
<label>
|
|
<input type="radio" name="serviceType" value="support"
|
|
onchange="handleRadioChange('serviceType', this.value)">
|
|
Support-Anfrage
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="serviceType" value="sales"
|
|
onchange="handleRadioChange('serviceType', this.value)">
|
|
Verkaufsanfrage
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="serviceType" value="consultation"
|
|
onchange="handleRadioChange('serviceType', this.value)">
|
|
Beratung
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Gruppe 3: Priorität -->
|
|
<div class="radio-group">
|
|
<h3>Priorität:</h3>
|
|
<label>
|
|
<input type="radio" name="priority" value="low"
|
|
onchange="handleRadioChange('priority', this.value)">
|
|
Niedrig
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="priority" value="medium"
|
|
onchange="handleRadioChange('priority', this.value)">
|
|
Mittel
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="priority" value="high"
|
|
onchange="handleRadioChange('priority', this.value)">
|
|
Hoch
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="priority" value="urgent"
|
|
onchange="handleRadioChange('priority', this.value)">
|
|
Dringend
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Formularfelder -->
|
|
<div class="form-fields">
|
|
<h3>Ihre Daten:</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="name">Name:</label>
|
|
<input type="text" id="name" name="name" class="form-field">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">E-Mail:</label>
|
|
<input type="email" id="email" name="email" class="form-field">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone">Telefon:</label>
|
|
<input type="tel" id="phone" name="phone" class="form-field">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="company">Firma (optional):</label>
|
|
<input type="text" id="company" name="company" class="form-field">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="subject">Betreff:</label>
|
|
<input type="text" id="subject" name="subject" class="form-field">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="message">Nachricht:</label>
|
|
<textarea id="message" name="message" class="form-field" placeholder="Ihre Nachricht..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="newsletter" name="newsletter" class="form-field">
|
|
Newsletter abonnieren
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="privacy" name="privacy" class="form-field">
|
|
Datenschutzbestimmungen akzeptieren
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reset-message" id="resetMessage">
|
|
✓ Formular wurde zurückgesetzt
|
|
</div>
|
|
|
|
<button type="submit" class="submit-btn">Absenden</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
// Speichert die aktuellen Werte aller Radio-Gruppen
|
|
let currentRadioValues = {};
|
|
|
|
// Reset-Strategie
|
|
let resetStrategy = 'any';
|
|
|
|
// Konfiguration: Welche Gruppen sollen Reset auslösen
|
|
const resetTriggerGroups = ['customerType', 'serviceType']; // Nur diese Gruppen lösen Reset aus
|
|
|
|
function setResetStrategy(strategy) {
|
|
resetStrategy = strategy;
|
|
console.log('Reset-Strategie geändert zu:', strategy);
|
|
}
|
|
|
|
function handleRadioChange(groupName, newValue) {
|
|
const previousValue = currentRadioValues[groupName];
|
|
|
|
console.log(`Gruppe ${groupName}: ${previousValue} -> ${newValue}`);
|
|
|
|
// Bestimmen, ob Reset ausgelöst werden soll
|
|
let shouldReset = false;
|
|
|
|
switch (resetStrategy) {
|
|
case 'any':
|
|
// Reset bei jeder Gruppe, wenn vorher schon ein Wert gesetzt war
|
|
shouldReset = previousValue !== undefined && previousValue !== newValue;
|
|
break;
|
|
|
|
case 'specific':
|
|
// Reset nur bei bestimmten Gruppen
|
|
shouldReset = resetTriggerGroups.includes(groupName) &&
|
|
previousValue !== undefined &&
|
|
previousValue !== newValue;
|
|
break;
|
|
|
|
case 'none':
|
|
// Kein automatisches Reset
|
|
shouldReset = false;
|
|
break;
|
|
}
|
|
|
|
if (shouldReset) {
|
|
resetFormFields();
|
|
showResetMessage(`Reset ausgelöst durch Gruppe: ${groupName}`);
|
|
}
|
|
|
|
// Aktuellen Wert speichern
|
|
currentRadioValues[groupName] = newValue;
|
|
}
|
|
|
|
function resetFormFields() {
|
|
// Alle Formularfelder (außer Radio-Buttons) zurücksetzen
|
|
const formFields = document.querySelectorAll('.form-field');
|
|
|
|
formFields.forEach(field => {
|
|
if (field.type === 'checkbox') {
|
|
field.checked = false;
|
|
} else if (field.tagName === 'SELECT') {
|
|
field.selectedIndex = 0;
|
|
} else {
|
|
field.value = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
function showResetMessage(message = 'Formular wurde zurückgesetzt') {
|
|
const resetMessage = document.getElementById('resetMessage');
|
|
resetMessage.textContent = `✓ ${message}`;
|
|
resetMessage.style.display = 'block';
|
|
|
|
// Nachricht nach 3 Sekunden ausblenden
|
|
setTimeout(() => {
|
|
resetMessage.style.display = 'none';
|
|
}, 3000);
|
|
}
|
|
|
|
// Erweiterte Funktion: Reset für bestimmte Feldgruppen
|
|
function resetSpecificFields(fieldGroups) {
|
|
const fieldMappings = {
|
|
'contact': ['name', 'email', 'phone'],
|
|
'company': ['company'],
|
|
'content': ['subject', 'message'],
|
|
'options': ['newsletter', 'privacy']
|
|
};
|
|
|
|
fieldGroups.forEach(group => {
|
|
if (fieldMappings[group]) {
|
|
fieldMappings[group].forEach(fieldName => {
|
|
const field = document.getElementById(fieldName);
|
|
if (field) {
|
|
if (field.type === 'checkbox') {
|
|
field.checked = false;
|
|
} else {
|
|
field.value = '';
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Formular-Submit verhindern für Demo-Zwecke
|
|
document.getElementById('mainForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Alle Radio-Werte sammeln
|
|
const formData = new FormData(this);
|
|
const radioValues = {};
|
|
|
|
for (let [key, value] of formData.entries()) {
|
|
if (key === 'customerType' || key === 'serviceType' || key === 'priority') {
|
|
radioValues[key] = value;
|
|
}
|
|
}
|
|
|
|
console.log('Aktuelle Radio-Werte:', radioValues);
|
|
alert('Formular würde jetzt abgesendet werden!\nSiehe Konsole für Details.');
|
|
});
|
|
|
|
// Beispiel für manuelle Reset-Buttons (optional)
|
|
function addManualResetButtons() {
|
|
const form = document.getElementById('mainForm');
|
|
const buttonContainer = document.createElement('div');
|
|
buttonContainer.innerHTML = `
|
|
<button type="button" onclick="resetSpecificFields(['contact'])" style="margin-right: 10px;">
|
|
Reset Kontaktdaten
|
|
</button>
|
|
<button type="button" onclick="resetSpecificFields(['content'])" style="margin-right: 10px;">
|
|
Reset Inhalt
|
|
</button>
|
|
<button type="button" onclick="resetFormFields()">
|
|
Reset Alles
|
|
</button>
|
|
`;
|
|
form.insertBefore(buttonContainer, form.lastElementChild);
|
|
}
|
|
|
|
// Uncomment um manuelle Reset-Buttons hinzuzufügen
|
|
// addManualResetButtons();
|
|
</script>
|
|
</body>
|
|
</html>
|