How capture the input radio value in javascript?

Question

For example I have the next options in html, define the global name and different id to each input radio:

 <form id="mokepon-form">
  <input type="radio" name="mokepon" id="hipodoge">
  <label for="hipodoge">Hipodoge</label>

  <input type="radio" name="mokepon" id="capipego">
  <label for="capipego">Capipego</label>

  <input type="radio" name="mokepon" id="ratigueya">
  <label for="ratigueya">Ratigueya</label>

  <button type="submit">Seleccionar</button>
</form>

To read the value I read the selector, the global name and the checked attribute and then read the id property, you can use the value property as well.

const chooseMokepon = (e) => { 
  e.preventDefault(); 
  const $selectedMokepon = document.querySelector('input[name=mokepon]:checked');
  const { id: mokeponValue } = $selectedMokepon;
  if (!mokeponValue) return;

  console.log(mokeponValue);
}

$mokeponForm.addEventListener('submit', e => chooseMokepon(e));

Answer 1

You might use this snippet:

 let submitBtn = document.querySelector('button[type="submit"]'); submitBtn.addEventListener('click', function(event){ event.preventDefault(); let selectedOption = document.querySelector('input[type="radio"][name="mokepon"]:checked'); if(selectedOption && selectedOption.value){ console.log('Selected: ' + selectedOption.value); } });

 <form id="mokepon-form"> <input type="radio" name="mokepon" id="hipodoge" value="hipodoge"> <label for="hipodoge">Hipodoge</label> <input type="radio" name="mokepon" id="capipego" value="capipego"> <label for="capipego">Capipego</label> <input type="radio" name="mokepon" id="ratigueya" value="ratigueya"> <label for="ratigueya">Ratigueya</label> <button type="submit">Seleccionar</button> </form>