2021-02-15 Form with Radio

LinkedIn Question: Determine which Radio Clicked Or Selected

by Ttt Yyy

HTML

<h2>Monstrous Government Form</h2>
<form id="myForm" name="myForm">
<fieldset>
<legend>Do you live in an:</legend>
<p><input type="radio" name="home" value="apartment" id="apartment" /> <label for="apartment">Apartment</label></p>
<p><input type="radio" name="home" value="house" id="house" /> <label for="house">House</label></p>
<p><input type="radio" name="home" value="mobile" id="mobile" /> <label for="mobile">Mobile Home/Trailer</label></p>
<p><input type="radio" name="home" value="coop" id="coop" /> <label for="coop">Co-op</label></p>
<p><input type="radio" name="home" value="none" id="none" /> <label for="none">None</label></p>
</fieldset>
<fieldset>
<legend>Your income is:</legend>
<p><input type="radio" name="inc" value="0-50K" id="0-50K" /> <label for="0-50K">$0-50,000 USD</label></p>
<p><input type="radio" name="inc" value="50-100K" id="50-100K" /> <label for="50-100K">$50,000-100,000 USD</label></p>
<p><input type="radio" name="inc" value="100K+" id="100K+" /> <label for="100K+">$100,000+ USD</label></p>
</fieldset>
<fieldset>
<legend>Your status is:</legend>
<p><input type="radio" name="status" value="single" id="single" /> <label for="single">single</label></p>
<p><input type="radio" name="status" value="married" id="married" /> <label for="married">married</label></p>
<p><input type="radio" name="status" value="partner" id="partner" /> <label for="partner">domestic partner</label></p>
</fieldset>
<p>This form goes on with another 97 questions....</p>
<input id="submit" type="submit" value="Submit" />
</form>
<button id="submitButton">Submit</button>

JavaScript

/* function submit() {
console.log('submitted')
} */

/* console.log('hi')
const submit = document.getElementById('submit');
submit.addEventListener('click', event => {
  console.log('submitted')
})

// separate button for submit...
const submitButton = document.getElementById('submitButton');
console.log('submitButton', submitButton)
submitButton.addEventListener('click', event => {
  console.log('submitted 2')
})
 */
const form = document.getElementById('myForm');

// https://stackoverflow.com/questions/3547035/javascript-getting-html-form-values/41262933
form.addEventListener('submit', event => {
  console.log('hi')
  const formData = new FormData(form);
  const results = []
  for (let [label, value] of formData.entries()) {
    console.log('label', label)
    console.log('value', value)
    results.push({
      label,
      value
    })
  }
  console.log('results', results)
})

// https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_elements_index
/* form.addEventListener('submit', event => {
 var elements = form.elements;
    var obj ={};
    for(var i = 0 ; i < elements.length ; i++){
        var item = elements.item(i);
        obj[item.name] = item.value;
    }

//     document.getElementById("demo").innerHTML = JSON.stringify(obj);
console.log('obj', obj)
})
 */