Reading and Updating Form Input Values

const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const subscribeCheckbox = document.getElementById('subscribe');
const genderRadios = document.querySelectorAll('input[name="gender"]');
const countrySelect = document.getElementById('country');
const outputDiv = document.getElementById('output');
const submitBtn = document.getElementById('submitBtn');

if (nameInput && emailInput && subscribeCheckbox && genderRadios && countrySelect && outputDiv && submitBtn) {

  // --- Reading Values ---
  submitBtn.addEventListener('click', (e) => {
    e.preventDefault(); // Prevent form submission for this example

    const name = nameInput.value;
    const email = emailInput.value;
    const subscribed = subscribeCheckbox.checked; // For checkboxes
    const selectedGender = Array.from(genderRadios).find(radio => radio.checked)?.value; // For radio buttons
    const selectedCountry = countrySelect.value;

    let outputContent = `
          Name: ${name}

          Email: ${email}

          Subscribed: ${subscribed ? 'Yes' : 'No'}

          Gender: ${selectedGender || 'Not selected'}

          Country: ${selectedCountry}

        `;
    outputDiv.textContent = outputContent;
  });

  // --- Updating Values Programmatically ---
  // Set default values or update on the fly
  nameInput.value = 'John Doe';
  emailInput.value = '[email protected]';
  subscribeCheckbox.checked = true; // Check the checkbox

  // Select a specific radio button
  genderRadios.forEach(radio => {
    if (radio.value === 'male') {
      radio.checked = true;
    }
  });

  // Select an option in a dropdown
  countrySelect.value = 'USA'; // Set by option value

  // Listen for input changes
  nameInput.addEventListener('input', () => {
    console.log('Name changed to:', nameInput.value);
  });
  countrySelect.addEventListener('change', () => {
    console.log('Country changed to:', countrySelect.value);
  });
}

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

  <label for="email">Email:</label>
  <input type="email" id="email" value="" /><br /><br />

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

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

  <label for="country">Country:</label>
  <select id="country">
    <option value="">--Please choose an option--</option>
    <option value="USA">United States</option>
    <option value="CAN">Canada</option>
  </select><br /><br />

  <button type="submit" id="submitBtn">Get Form Values</button>
</form>
<div id="output" style="white-space: pre-wrap; margin-top: 20px; border: 1px solid #ccc; padding: 10px;"></div>
*/