0
372
VisualizaçõesLógica del botón del sitio web para realizar pedidos como Cameo "Pedido de libros"
Quiero configurar los botones de mi sitio web con lógica para saber qué opción se selecciona cuando el cliente presiona "Reservar ahora". Luego, me gustaría que el sitio web vaya al proceso de pago donde el cliente puede escribir su mensaje y pagar con PayPal u otra plataforma de pago en línea. Aquí hay un enlace a Cameo, que inspiró este proyecto: https://www.cameo.com/sar.rob?nodeId=actors%2Fbollywood&nodeType=category ¡Cualquier recurso o ayuda sería increíble!
Lógica: Tener "Uso personal" ya seleccionado. Permita que los clientes presionen "Uso comercial" para cambiar la opción seleccionada. Reserve ahora envíe la opción seleccionada al pago.
·
Santiago Trujillo
1 Respostas
Responde à pergunta0
Mi enfoque será usar botones de opción.
let form = document.querySelector("form") form.addEventListener('submit', (e) => { let planOptions = new FormData(form) for (const selectedPlan of planOptions) { console.log(selectedPlan[1]) } e.preventDefault() }) form { display: flex; flex-direction: column; } input[type="radio"] { display: none; } .options { display: flex; flex-direction: column; margin-bottom: 10px; } .options label { display: inline-block; background-color: #333; color: #fff; padding: 10px 20px; font-size: 16px; width: 20%; text-align: center; margin-bottom: 10px; border-radius: 5px; border: 2px solid white; } .options input[type="radio"]:checked+label { border: 2px solid tomato; } .book-now { width: fit-content; } <form> <h3>Choose an option</h3> <div class="options"> <input type="radio" name="planOptions" value="personalUse" id="personalUse" checked> <label for="personalUse">Personal Use</label> <input type="radio" name="planOptions" value="businessUse" id="businessUse"> <label for="businessUse">Business Use</label> </div> <button class="book-now" type="submit">Book Now</button> </form>Revisa MDN para referencia
·
Santiago Trujillo
Relatório
Responde à pergunta