Multiple radio button groups, check if 'checked' has changed-CodePudding

Hi I have 2 radio button groups. I'm trying to accomplish that whenever you check either a different radio button from the first group or the second, that it triggers a fetch request.

let subscriptionType = document.querySelector('.membership-type-radio:checked').value;
let duration = document.querySelector('.duration-radio:checked').value;

.duration-box {
    display: flex;
    justify-content: space-between;
}

.duration-box .btn-label {
    flex-basis: 32%;
}

.btn-label {
    border: 2px solid var(--purple);
    color: var(--purple);
    text-align: center;
    height: 50px;
    border-radius: 10px;
    line-height: 50px;
}

.btn-label:hover {
    background-color: var(--purple);
    color: blue;
    cursor: pointer;
}

.membership {
    color: red;
}

.membership-options-container {
    display: flex;
    justify-content: space-between;
}

.membership-options-container .btn-label {
    flex-basis: 49%;
}

.membership-type-radio, .duration-radio {
    margin: 0;
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.membership-type-radio[type="radio"]:checked   .btn-label,
.duration-radio[type="radio"]:checked   .btn-label {
    background-color: var(--purple);
    color: red;
}

<div >
                <h2 >Abonnement</h2>
                <div >
                    <input type="radio" name="subscriptionType" value="daluren"  id="daluren" checked />
                    <label for="daluren" >Daluren</label>
                    <input type="radio" name="subscriptionType" value="Premium"  id="premium" />
                    <label for="premium" >Premium</label>
                </div>

                <div >
                    <p>test</p>
                </div>
            </div>
            <div >
                <h2 >Looptijd</h2>
                <div >
                    <input type="radio" name="duration" value="104"  id="104" checked />
                    <label for="104" >104 Weken</label>
                    <input type="radio" name="duration" value="52"  id="52" />
                    <label for="52" >52 Weken</label>
                    <input type="radio" name="duration" value="4"  id="4" />
                    <label for="4" >4 Weken</label>
                </div>
            </div>

When the page loads, I get the values of the pre-selected radio buttons, but I also want to update those values of the variables as soon as they change. I already tried events like this:

    let subscriptionTypes = document.querySelectorAll('.membership-type-radio');
subscriptionTypes?.forEach((type) => {
    type.addEventListener('change', (e) => {
        subscriptionType = e.target.value;
        console.log(subscriptionType);
    });
});

The above code does change the variable, but I'm looking for a solution that is re-usable for multiple fields.

I also tried this, which does print the variables, but does not update them:

let subscriptionType = document.querySelector('.membership-type-radio:checked').value;
let duration = document.querySelector('.duration-radio:checked').value; 
let inputs = document.querySelectorAll('.membership-type-radio, .duration-radio');
inputs?.forEach((type) => {
    type.addEventListener('change', (e) => {
        window[e.target.name] = e.target.value;
        console.log(subscriptionType, duration);
    });
});

CodePudding user response：

This can dynamically fill your variables:

a = null;
b = null;
c = null;
document.querySelectorAll('input').forEach((el) => {
    el.addEventListener('change', (e) => {
        window[e.target.name] = e.target.value;
        console.log(a, b, c);
    });
});

<form>
  <input name="a">
  <input name="b">
  <input name="c">
</form>