0

El problema que tengo es que al agregar la librería jsPDF dentro del código de mi script, la funcionalidad de exclusión mutua de los botones input type radio (me refiero a que cuando se hace click en un botón se elimina la selección de los demás botones, de manera que solo se pueda seleccionar un botón, a diferencia de los botones checkbox

<div class="opcionPago o1">
    <input id="opcion1" name="opciones" value="opcion1" type="radio" required> <label for="opcion1">Tarjeta de crédito o débito</label>
</div>
<!--Contenedor oculto de vía tarjetas de crédito-->
<div class="contenedor-opcion" id="contenedorTarjetaCredito">
    <input id="numTarjeta" name="num-tarjeta" type="number" placeholder="Número de tarjeta" required><br>
    <input id="vencimiento" name="vencimiento" type="date" placeholder="Fecha de vencimiento (MM/AA)" maxlength="10" required><br>
    <input id="codigoSeguridad" name="codigo-seguridad" type="number" maxlenght="3" placeholder="Código de seguridad" required><br>
    <input id="nombreTitular" name="nombre-titular" type="text" placeholder="Nombre del titular" maxlength="20" required><br>
    <input type="checkbox"> <label>Usar la dirección de envío como dirección de facturación</label>
</div>

<!--Forma de pago vía PayPal-->
<div class="opcionPago o2">
    <input id="opcion2" name="opciones" value="opcion2" type="radio" required> <label for="opcion2">PayPal</label>
</div>
<!--Contenedor oculto de vía PayPal-->
<div class="contenedor-opcion" id="contenedorPayPal">
    <input id="nombreUsuario" name="nombre-usuario" type="text" placeholder="Nombre de usuario" maxlength="33" required><br>
    <input id="contraseniaPayPal" name="contrasenia-paypal" type="password" placeholder="Contraseña" maxlength="20" required><br>
    <input type="checkbox"> <label>Usar la dirección de envío como dirección de facturación</label>
</div>

<!--Forma de pago vía OXXO-->
<div class="opcionPago o3">
    <input id="opcion3" name="opciones" value="opcion3" type="radio" required> <label for="opcion3">OXXO</label>
</div>
<!--Contenedor oculto de vía OXXO-->
<div class="contenedor-opcion" id="contenedorOXXO">
    <input id="numTarjeta2" name="num-tarjeta2" type="number" placeholder="Número de tarjeta" maxlength="16" required><br>
    <input id="vencimiento2" name="vencimiento2" type="date" min="1924-01-01" max="2024-12-31" required><br>
    <input id="codigoSeguridad2" name="codigo-seguridad2" type="number" placeholder="Código de seguridad" maxlength="3" required><br>
    <input id="nombreTitular2" name="nombre-titular2" type="text" placeholder="Nombre del titular" maxlength="30" required><br>
    <input id="direccionOXXO" name="direccion-oxxo" type="text" placeholder="Dirección de la sucursal más cercana" maxlength="100" required><br>
    <input type="checkbox"> <label>Usar la dirección de envío como dirección de facturación</label>
</div>

JavaScript

import jsPDF from '../js/jsPDF.min.js';

// Fragmento de código que hace que se desplieguen las opciones del tipo de pago
const opcion1 = document.getElementById('opcion1');
const opcion2 = document.getElementById('opcion2');
const opcion3 = document.getElementById('opcion3');
const nombreUsuario = document.getElementById('nombreUsuario');
const contraseniaPayPal = document.getElementById('contraseniaPayPal');
const numTarjeta = document.getElementById('numTarjeta');
const numTarjeta2 = document.getElementById('numTarjeta2');
const vencimiento = document.getElementById('vencimiento');
const vencimiento2 = document.getElementById('vencimiento2');
const codigoSeguridad = document.getElementById('codigoSeguridad');
const codigoSeguridad2 = document.getElementById('codigoSeguridad2');
const nombreTitular = document.getElementById('nombreTitular');
const nombreTitular2 = document.getElementById('nombreTitular2');
const direccionOXXO = document.getElementById('direccionOXXO');
const contenedorTarjetaCredito = document.getElementById('contenedorTarjetaCredito');
const contenedorPayPal = document.getElementById('contenedorPayPal');
const contenedorOXXO = document.getElementById('contenedorOXXO');
var formaPago = null;

function desplegarPeticionDatos()
{
    if (opcion1.checked)
    {
        formaPago = "Tarjeta de crédito o débito";
        numTarjeta.required = true;
        vencimiento.required = true;
        codigoSeguridad.required = true;
        nombreTitular.required = true;
        nombreUsuario.required = false;
        contraseniaPayPal.required = false;
        numTarjeta2.required = false;
        vencimiento2.required = false;
        codigoSeguridad2.required = false;
        nombreTitular2.required = false;
        direccionOXXO.required = false;
        contenedorTarjetaCredito.style.display = 'block';
        contenedorPayPal.style.display = 'none';
        contenedorOXXO.style.display = 'none';
    }
    else if (opcion2.checked)
    {
        formaPago = "Pay Pal";
        nombreUsuario.required = true;
        contraseniaPayPal.required = true;
        numTarjeta.required = false;
        numTarjeta2.required = false;
        vencimiento.required = false;
        vencimiento2.required = false;
        codigoSeguridad.required = false;
        codigoSeguridad2.required = false;
        nombreTitular.required = false;
        nombreTitular2.required = false;
        direccionOXXO.required = false;
        contenedorTarjetaCredito.style.display = 'none';
        contenedorPayPal.style.display = 'block';
        contenedorOXXO.style.display = 'none';
    }
    else if (opcion3.checked)
    {
        formaPago = "Vía OXXO";
        vencimiento2.required = true;
        numTarjeta2.required = true;
        codigoSeguridad2.required = true;
        nombreTitular2.required = true;
        direccionOXXO.required = true;
        nombreUsuario.required = false;
        contraseniaPayPal.required = false;
        numTarjeta.required = false;
        vencimiento.required = false;
        codigoSeguridad.required = false;
        nombreTitular.required = false;
        contenedorTarjetaCredito.style.display = 'none';
        contenedorPayPal.style.display = 'none';
        contenedorOXXO.style.display = 'block';
    }
}
opcion1.addEventListener('change', desplegarPeticionDatos);
opcion2.addEventListener('change', desplegarPeticionDatos);
opcion3.addEventListener('change', desplegarPeticionDatos);

const doc = new jsPDF();
doc.text(10, 10, 'Factura de compra');
doc.save('factura-de-compra.pdf');

En la primera parte del código se encuentran los elementos HTML, en la segunda parte se encuentra un fragmento de mi script. En el script se controla que al hacer click en un determinado botón de opción (radio button), se aparezca un contenedor que inicialmente está oculto, pero que al hacer click en un botón, éste se aparezca, además de hacer que cada uno de los campos de entrada sea obligatorio cuando el contenedor está desplegado, y que haga que los campos de entrada no sean obligatorios cuando el contenedor que los contiene está oculto. La librería jsPDF se incluye al principio del código y la parte que crea los archivos PDF se encuentra debajo del fragmento que controla la lógica de los botones de opción.

2
  • ¡Bienvenido a Stack Overflow en español! Te invito a hacer el recorrido de bienvenida. Has publicado una gran cantidad de código. Funciona mejor cuando preparas un ejemplo mínimo verificable con el que se pueda reproducir el problema (completo), contenga solo el código esencial para reproducirlo (mínimo). Eso aumentaría tus probabilidades de encontrar la ayuda que buscas. Encontrarás más información en Cómo preguntar. Un saludo.
    – jachguate
    Commented el 14 jun. a las 5:22
  • Hice una prueba rápida y lo que dices no se puede reproducir. Los radio buttons funcionan según lo esperado.
    – jachguate
    Commented el 14 jun. a las 5:23

1 respuesta 1

1

Copie y pegue tu código, añadí la librería jsPDF directamente del CDN

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

Y no se aprecia el problema que describes, los radio funcionan correctamente. Lo que me lleva a pensar que tienes algún error en otro lado de tu codigo que está afectando el comportamiento de los inputs.

Esto seguramente lo debí haber escrito como un comentario, pero es que veo otro problema en tu código, y es que estás activando/desactivando inputs uno por uno.

Te recomiendo usar envolver tus inputs en fieldset. Cuando un fieldset está disabled todos sus inputs internos también lo están y no se envían al servidor en un submit, luego con un poco de CSS se pueden ocultar.

Luego solo con un poco de javascript para los eventos del radio que marcarán esos fieldset como disabled cuando sea el caso.

const radios = document.querySelectorAll(".choose");
radios.forEach(el =>{
  el.addEventListener('change', () =>{
    radios.forEach(a=>document.getElementById(a.dataset.target).disabled = true); // Todos disables
    document.getElementById(el.dataset.target).disabled = false; //activamos el seleccionado
  });
});
fieldset[disabled]{
  display:none;
}
<form id="form">
<div class="opcionPago o1">
        <input id="opcion1" class="choose" data-target="contenedorTarjetaCredito" name="opciones" value="opcion1" type="radio" required checked /><label for="opcion1">Tarjeta de crédito o débito</label>
    </div>
    <!--Contenedor oculto de vía tarjetas de crédito-->
    <fieldset class="contenedor-opcion" id="contenedorTarjetaCredito">
        <input id="numTarjeta" name="num-tarjeta" type="number" placeholder="Número de tarjeta" required /><br />
        <input id="vencimiento" name="vencimiento" type="date" placeholder="Fecha de vencimiento (MM/AA)" maxlength="10" required /><br />
        <input id="codigoSeguridad" name="codigo-seguridad" type="number" maxlenght="3" placeholder="Código de seguridad" required /><br />
        <input id="nombreTitular" name="nombre-titular" type="text" placeholder="Nombre del titular" maxlength="20" required /><br />
        <input type="checkbox" /><label>Usar la dirección de envío como dirección de facturación</label>
    </fieldset>

    <!--Forma de pago vía PayPal-->
    <div class="opcionPago o2">
        <input id="opcion2" class="choose" data-target="contenedorPayPal" name="opciones" value="opcion2" type="radio" required /><label for="opcion2">PayPal</label>
    </div>
    <!--Contenedor oculto de vía PayPal-->
    <fieldset class="contenedor-opcion" id="contenedorPayPal" disabled>
        <input id="nombreUsuario" name="nombre-usuario" type="text" placeholder="Nombre de usuario" maxlength="33" required /><br />
        <input id="contraseniaPayPal" name="contrasenia-paypal" type="password" placeholder="Contraseña" maxlength="20" required /><br />
        <input type="checkbox" /><label>Usar la dirección de envío como dirección de facturación</label>
    </fieldset>

    <!--Forma de pago vía OXXO-->
    <div class="opcionPago o3">
        <input id="opcion3" class="choose" data-target="contenedorOXXO" name="opciones" value="opcion3" type="radio" required /><label for="opcion3">OXXO</label>
    </div>
    <!--Contenedor oculto de vía OXXO-->
    <fieldset class="contenedor-opcion" id="contenedorOXXO" disabled>
        <input id="numTarjeta2" name="num-tarjeta2" type="number" placeholder="Número de tarjeta" maxlength="16" required /><br />
        <input id="vencimiento2" name="vencimiento2" type="date" min="1924-01-01" max="2024-12-31" required /><br />
        <input id="codigoSeguridad2" name="codigo-seguridad2" type="number" placeholder="Código de seguridad" maxlength="3" required /><br />
        <input id="nombreTitular2" name="nombre-titular2" type="text" placeholder="Nombre del titular" maxlength="30" required /><br />
        <input id="direccionOXXO" name="direccion-oxxo" type="text" placeholder="Dirección de la sucursal más cercana" maxlength="100" required /><br />
        <input type="checkbox" /><label>Usar la dirección de envío como dirección de facturación</label>
    </fieldset>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.