Quería recuperar el valor de un grupo de botones de arranque. He deshabilitado el atributo de nombre en los botones que no sean el que está activado en mi intento de hacerlo. Pero este enfoque no funciona. ¿Alguien puede sugerirme una forma conveniente de hacerlo a través de la función toggleActiveInBtnGroup() , ya que muchos otros elementos en mi formulario utilizan esta función?
const toggleActiveInBtnGroup = (className, elements, selectedId) => { for (let i = 0; i < elements.length; ++i) { if (`${className}-${i}` != selectedId) { elements[i].classList.remove("active"); elements[i].removeAttribute("name"); } else { elements[i].className += " active"; elements[i].setAttribute("name", className); } console.log(elements[i]); } } const onGenderChange = (event) => { const className = "gender"; const elements = document.getElementsByClassName(className); const selectedId = event.target.id; toggleActiveInBtnGroup(className, elements, selectedId); } function onFormSubmit(event) { const form = { gender: "", } event.preventDefault(); const data = new FormData(event.target); form.gender = data.get('gender'); console.log(form); } <form method="POST" action="./after-appointment.html" id="myForm" onsubmit="onFormSubmit(event)"> <div class="d-flex btn-group" role="group" aria-label="Basic outlined example"> <button id="gender-0" type="button" class="btn btn-outline-primary gender" onclick="onGenderChange(event)" value="male">Male</button> <button id="gender-1" type="button" class="btn btn-outline-primary gender" onclick="onGenderChange(event)" value="female">Female</button> <button id="gender-2" type="button" class="btn btn-outline-primary gender" onclick="onGenderChange(event)" value="other">Other</button> </div> <div class="py-5 d-flex justify-content-center"> <button type="submit" class="btn btn-dark-blue text-light">Submit</button> </div> </form>Dado que le está dando una clase 'activa' solo a la buena, puede usar el método document.querySelector para obtener el valor del elemento dentro de la función onFormSubmit.
function onFormSubmit(event) { const selectedGender = document.querySelector("#myForm .active").value; const form = { gender: selectedGender, }; event.preventDefault(); const data = new FormData(event.target); console.log(form); }