Dynamically Managing Form Input Values with JavaScript

<form id="myForm">
  <label for="textInput">Text Input:</label>
  <input type="text" id="textInput" value="Initial Text"><br><br>

  <label for="selectOption">Select Option:</label>
  <select id="selectOption">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select><br><br>

  <label>
    <input type="checkbox" id="checkboxInput" checked> Checkbox
  </label><br><br>

  <p>Radio Buttons:</p>
  <label>
    <input type="radio" name="radioGroup" value="radioA"> Radio A
  </label>
  <label>
    <input type="radio" name="radioGroup" value="radioB" checked> Radio B
  </label>
  <label>
    <input type="radio" name="radioGroup" value="radioC"> Radio C
  </label><br><br>

  <button type="button" id="getValueBtn">Get All Values</button>
  <button type="button" id="setValueBtn">Set New Values</button>
</form>

<div id="output"></div>

<script>
  const textInput = document.getElementById('textInput');
  const selectOption = document.getElementById('selectOption');
  const checkboxInput = document.getElementById('checkboxInput');
  const radioButtons = document.querySelectorAll('input[name="radioGroup"]');
  const outputDiv = document.getElementById('output');

  document.getElementById('getValueBtn').addEventListener('click', () => {
    const values = {
      text: textInput.value,
      select: selectOption.value,
      checkbox: checkboxInput.checked,
      radio: Array.from(radioButtons).find(radio => radio.checked)?.value || 'None selected'
    };
    outputDiv.textContent = 'Current Values: ' + JSON.stringify(values, null, 2);
    console.log('Current Values:', values);
  });

  document.getElementById('setValueBtn').addEventListener('click', () => {
    // Set new values
    textInput.value = 'New Text Value';
    selectOption.value = 'option3';
    checkboxInput.checked = false; // Uncheck it

    // Set a different radio button
    Array.from(radioButtons).forEach(radio => {
      if (radio.value === 'radioC') {
        radio.checked = true;
      } else {
        radio.checked = false;
      }
    });

    outputDiv.textContent = 'Values have been set!';
    console.log('Values updated programmatically.');
  });
</script>