Get and Set Values for Form Input Elements

// HTML structure example:
// <input type="text" id="usernameInput" value="Guest">
// <textarea id="messageTextarea">Hello world!</textarea>
// <input type="checkbox" id="newsletterCheckbox" checked>
// <select id="countrySelect">
//   <option value="usa">USA</option>
//   <option value="can" selected>Canada</option>
//   <option value="mex">Mexico</option>
// </select>
// <button onclick="displayFormValues()">Submit</button>

function getFormValues() {
  const username = document.getElementById('usernameInput').value;
  const message = document.getElementById('messageTextarea').value;
  const newsletterSubscribed = document.getElementById('newsletterCheckbox').checked;
  const selectedCountry = document.getElementById('countrySelect').value;

  console.log('Username:', username);
  console.log('Message:', message);
  console.log('Newsletter Subscribed:', newsletterSubscribed);
  console.log('Selected Country:', selectedCountry);

  return { username, message, newsletterSubscribed, selectedCountry };
}

function setFormValues(data) {
  if (data.username !== undefined) {
    document.getElementById('usernameInput').value = data.username;
  }
  if (data.message !== undefined) {
    document.getElementById('messageTextarea').value = data.message;
  }
  if (data.newsletterSubscribed !== undefined) {
    document.getElementById('newsletterCheckbox').checked = data.newsletterSubscribed;
  }
  if (data.selectedCountry !== undefined) {
    document.getElementById('countrySelect').value = data.selectedCountry;
  }
}

// Example usage:
// const currentValues = getFormValues();
// console.log("Current values:", currentValues);

// setFormValues({
//   username: 'JohnDoe',
//   message: 'Updated message from script.',
//   newsletterSubscribed: false,
//   selectedCountry: 'usa'
// });
// console.log("Values after setting:", getFormValues());