Tengo un formulario HMTL, que se repite varias veces en una página web, para evitar apuntar a cada nombre de campo específico, de cada formulario, estoy haciendo un script javascript de uso general que detecta dónde se activó y obtener los valores de los campos (de ese formulario específico que atraviesa) para enviarlo a otro servidor usando una llamada ajax. El problema es que no puedo encontrar una manera de obtener un elemento seleccionado de una lista desplegable de selección.
Como es un script de uso general, no puedo usar el valor de ID.
function sendForm(reference){ const form = reference.closest('form'); var elements = form.getElementsByTagName("input"); var name = elements.namedItem('name').value; var mail = encodeURIComponent(elements.namedItem('email').value); // Here I don't know how to get the selected item from the option group) var program = elements.namedItem('program').value; // (it doesn't work); console.log(name) console.log(mail) /* Ajax Stuff that is already solved and not needed to show the point */ } <form id="my-form" data-origin="form-1" action=""> <input placeholder="Name*" type="text" class="form-control" name="name" id="name" required> <input type="email" class="form-control" placeholder="Email*" name="email" id="mail" required> <select class="form-control" name="program" required> <option name="programa" value="">- Select -</option> <option value="LCP">First choice</option> <option value="LSP">Seccond choice</option> <option value="LAE">Third choice</option> <option value="LD">Fourth choice</option> </select> <button type="button" onclick="sendForm(this)" class="btn">Send</button> </form>var programa = document.getElementById('program').value; debería funcionar, siempre que <select> solo permita seleccionar una opción.
Si observa la documentación de MDN para HTMLSelectElement , puede ver que la propiedad de value será el valor de la opción seleccionada (o la primera opción seleccionada en el caso de un elemento <select multiple> ).
Además, HTMLFormElement tiene una propiedad de elements (lea más sobre esto aquí ) que devuelve una colección de todos los controles de formulario en el formulario (no solo entradas, sino también elementos <select> que es lo que necesita en lugar de getElementsByTagName en el formulario.
Así que en tu código, podrías hacer:
const form = reference.closest('form'); const program = form.elements.namedItem('program').value; Nota al margen: si va a usar const para una variable, deje de usar var . Es una falla.