superform - 03 form with reset Button

by fiddlerintheoffice

HTML

<link rel="stylesheet" href="http://megaflop.net/uic/jquery.uic-form3-jsfiddle.css">
<script src="https://megaflop.net/uic/custom-elements.js"></script>
<form is="super-form">
    <div class="wrapper">
        <div class="property">
            <label>title</label>
            <div style="display:inline-block; width:200px; vertical-align:middle">
                <input type="radio" id="title_mr" name="title" value="mr">
                <label for="title_mr">Mr.</label>
                <input type="radio" id="title_ms" name="title" value="ms">
                <label for="title_ms">Ms.</label>
            </div>
        </div>
        <div class="property">
            <label for="firstname">firstname</label>
            <input type="text" id="firstname" name="firstname" value="" placeholder="firstname">
        </div>
        <div class="property">
            <label for="lastname">lastname</label>
            <input type="text" id="lastname" name="lastname" value="" placeholder="lastname">
        </div>
        <div class="property">
            <label for="birthday">birthday</label>
            <input type="date" id="birthday" name="birthday" value="" placeholder="birthday">
        </div>
        <div class="property">
            <label for="birthday">nationality</label>
            <input type="text" id="nationality" name="nationality" value="" placeholder="nationality">
        </div>
        <div class="property">
            <label for="birthday">member</label>
            <input type="checkbox" id="member" name="member" value="1" placeholder="member">
        </div>
        <div class="property">
            <label for="birthday">agree with newsletter</label>
            <input type="checkbox" id="newsletter" name="newsletter" value="1" placeholder="newsletter" checked="checked">
        </div>
        <div class="property divbands">
            <label>Bands</label>
            <br>
            <div...

JavaScript

import SuperForm from 'https://megaflop.net/uic/super-form.js';
const form = document.querySelector('form');

// 1. Alle div.property Elemente auswählen und durchlaufen
document.querySelectorAll('div.property').forEach(function(container) {
    
    // 2. Den 'name' des ersten Input/Textarea/Select finden
    const input = container.querySelector('input, textarea, select');
    const key = input ? input.getAttribute('name') : null;

    // 3. Button erstellen und konfigurieren
    const b = document.createElement('button');
    b.classList.add('reset');
    b.setAttribute('tabindex', '-1');
    b.textContent = 'reset'; // Ersetzt createTextNode + appendChild

    // 4. Event Handler registrieren
    b.addEventListener('click', function() {
        // Hinweis: Da uicForm3 ein jQuery-Plugin ist, nutzen wir hier 
        // weiterhin $(...) für den Plugin-Aufruf.
        const form = $('form').eq(0); 
        const initVal = form.uicForm3('initVal', key);
        form.uicForm3('val', key, initVal);
    });

    // 5. Button zum Container hinzufügen
    container.appendChild(b);
});

form.on('propertyModifiedStateChange', (elements, name, initVal, currentVal, modified, e) => {
    console.log(form.val('firstname'));
    elements.forEach(el => {
        if (modified === true) {
            el.closest('div').classList.add('modified');
            el.closest('div.property').querySelector('.reset').style.display = 'block';
        }
        else {
            el.closest('div').classList.remove('modified');
            el.closest('div.property').querySelector('.reset').style.display = '';
        }
    });
});
form.on('formModifiedStateChange', (modified, e) => {
    console.log('a')
    if (modified === true) {
        form.classList.add('modified');
    } else {
        form.classList.remove('modified');
    }
});