I have a problem that is starting to be annoying, I have researched in forums, I even asked chatgpt and I have not managed to get it to work. I am making a section of the menu of a restaurant and in the section of salads for each one I need to have 5 radio buttons each one with a sauce without price since that will be the one that the customer can choose for free. I already made the section with checkbox to choose others for an additional cost can be one or more but in these with radiobuttons is to choose only one. The problem is that when I try to capture the value and show me the name of the sauce it does not show me anything, it leaves only the empty space. I have tried many ways but I cannot solve the situation. Do you have any idea of something that could work? Thanks
Part of Code Javascript
function agregarProducto(nombre, precio, form, variedades = []) {
let precioCheckboxes = 0; // Precio de los checkboxes, inicializado en cero
let precioRadiobuttons = 0; // Precio de los radiobuttons, inicializado en cero
let nombreCheckbox = "";
let nombreRadiobutton = "";
let hayOpcionesSeleccionadas = false; // Variable para verificar si hay opciones seleccionadas
// Si hay checkboxes, obtener los valores seleccionados y sumar sus precios
if (form) {
var checkboxes = form.querySelectorAll('input[type="checkbox"]:checked');
for (var i = 0; i < checkboxes.length; i++) {
let checkboxPrecio = parseFloat(checkboxes[i].getAttribute('data-precio'));
let checkboxNombre = checkboxes[i].getAttribute('name');
if (isNaN(checkboxPrecio)) { // Si no hay precio en el checkbox, agregar el nombre en lugar del precio
variedades.push(checkboxNombre);
} else { // Si hay precio en el checkbox, sumar al precio de los checkboxes
precioCheckboxes += checkboxPrecio;
variedades.push(`${checkboxNombre} ($${checkboxPrecio.toFixed(2)})`);
}
nombreCheckbox = checkboxNombre; // Actualizar el nombre del checkbox seleccionado
hayOpcionesSeleccionadas = true; // Marcar que hay opciones seleccionadas
}
}
// THIS PART HAS ERROR NOT SHOW THE VALUE OF RADIOBUTTON
if (form) {
var opcionSeleccionada = form.querySelector('input[type="radio"]:checked');
var opciones = opcionSeleccionada ? opcionSeleccionada.value : "";
if (opcionSeleccionada) { // Solo actualizar el nombreRadiobutton si hay opciones seleccionadas
let opcionPrecio = parseFloat(opcionSeleccionada.getAttribute('data-precio'));
nombreRadiobutton = opcionSeleccionada.getAttribute('value');
if (isNaN(opcionPrecio)) { // Si no hay precio en la opción, agregar el nombre en lugar del precio
variedades.push(nombreRadiobutton);
} else { // Si hay precio en la opción, sumar al precio de las opciones
precioRadiobuttons += opcionPrecio;
variedades.push(`${nombreRadiobutton} ($${opcionPrecio.toFixed(2)})`);
}
hayOpcionesSeleccionadas = true; // Marcar que hay opciones seleccionadas
}
}
Here i select the plate and add the car
everything is correct but in the brackets it doesn’t show me the name of the sauce you chose
I have tried using different types of logic, I checked variables, I thought it was an error in the javascript file but not because everything else works correctly and the console does not show any errors.