Reading and Setting Form Input Values and States

function manageFormInput(formId) {
    const form = document.getElementById(formId);
    if (!form) {
        console.error(`Form with ID '${formId}' not found.`);
        return;
    }

    console.log('--- Form Input Management ---');

    // 1. Text Input (getting and setting value)
    const textInput = form.querySelector('#username');
    if (textInput) {
        console.log('Initial Username:', textInput.value);
        textInput.value = 'JohnDoe'; // Set new value
        console.log('Updated Username:', textInput.value);
    }

    // 2. Checkbox (getting and setting checked state)
    const checkbox = form.querySelector('#newsletter');
    if (checkbox) {
        console.log('Initial Newsletter Checked:', checkbox.checked);
        checkbox.checked = true; // Set to checked
        console.log('Updated Newsletter Checked:', checkbox.checked);
    }

    // 3. Radio Buttons (getting selected value, setting selected state)
    const radioButtons = form.querySelectorAll('input[name="gender"]');
    if (radioButtons.length > 0) {
        let selectedGender = '';
        radioButtons.forEach(radio => {
            if (radio.checked) {
                selectedGender = radio.value;
            }
        });
        console.log('Initial Gender:', selectedGender);

        // Set a specific radio button as checked
        const maleRadio = form.querySelector('input[name="gender"][value="male"]');
        if (maleRadio) maleRadio.checked = true;
        console.log('Updated Gender (set to male):', form.querySelector('input[name="gender"]:checked').value);
    }

    // 4. Select Dropdown (getting and setting selected option)
    const selectBox = form.querySelector('#country');
    if (selectBox) {
        console.log('Initial Country:', selectBox.value); // Value of the selected option
        selectBox.value = 'CA'; // Set option with value="CA" as selected
        console.log('Updated Country:', selectBox.value);
    }

    // Example: Add an event listener to a submit button (or the form itself)
    form.addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent default form submission
        console.log('Form Submitted!');
        console.log('Final Username:', form.querySelector('#username').value);
        console.log('Final Newsletter:', form.querySelector('#newsletter').checked);
        console.log('Final Gender:', form.querySelector('input[name="gender"]:checked').value);
        console.log('Final Country:', form.querySelector('#country').value);
        // Here you would typically send data to a server or process it.
    });

    console.log('--- Form Input Management Complete ---');
}

// Example HTML structure:
/*
<form id="myForm">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" value="initialUser"><br><br>

    <input type="checkbox" id="newsletter" name="newsletter" checked>
    <label for="newsletter">Subscribe to newsletter</label><br><br>

    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female" checked>
    <label for="female">Female</label><br><br>

    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="US">United States</option>
        <option value="CA" selected>Canada</option>
        <option value="MX">Mexico</option>
    </select><br><br>

    <button type="submit">Submit</button>
</form>
*/
manageFormInput('myForm');