Berlin-Webcomponents/test-checked-issue.html at main · First-Coder/Berlin-Webcomponents · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Test Checked Property Issue</title>
    <script type="module">
        import './src/components/BlnFormular.js';

        document.addEventListener('DOMContentLoaded', () => {
            const formular = document.querySelector('bln-formular');

            formular.addEventListener('bln-submit', (e) => {
                console.log('Submitted data:', e.detail.data);

                // Expected: { newsletter: true, category: 'tech' }
                // Current bug: { newsletter: 'on', category: 'tech' } (or similar incorrect value)

                const result = document.getElementById('result');
                result.innerHTML = `<pre>${JSON.stringify(e.detail.data, null, 2)}</pre>`;
            });

            document.getElementById('submit-btn').addEventListener('click', () => {
                formular.submit();
            });
        });
    </script>
</head>
<body>
    <h1>Test: BlnFormular Checkbox 'checked' Property Issue</h1>

    <bln-formular legend="Test Form">
        <div>
            <label>
                <input type="checkbox" name="newsletter" checked> Newsletter abonnieren
            </label>
        </div>
        <div>
            <label>
                <input type="radio" name="category" value="tech" checked> Technik
            </label>
            <label>
                <input type="radio" name="category" value="sport"> Sport
            </label>
        </div>
        <div>
            <label>
                <input type="checkbox" name="terms"> AGB akzeptieren (nicht angekreuzt)
            </label>
        </div>

        <div slot="actions">
            <button type="button" id="submit-btn">Test Submit</button>
        </div>
    </bln-formular>

    <h2>Ergebnis:</h2>
    <div id="result">Noch nicht getestet...</div>

    <h3>Erwartetes Verhalten:</h3>
    <pre>{
  "newsletter": true,
  "category": "tech",
  "terms": false
}</pre>

    <h3>Aktueller Bug:</h3>
    <p>Checkbox gibt 'on' oder ähnlichen Wert zurück statt boolean true/false</p>
</body>
</html>