Website button logic to place order like Cameo "Book Order"

Question

I want to set my website buttons up with logic to know which option is selected when the customer presses "Book now". Then, I would like the website to go to checkout where the customer can type their message in and pay using PayPal or another online payment platform. Here is a link to Cameo, which inspired this project: https://www.cameo.com/sar.rob?nodeId=actors%2Fbollywood&nodeType=category Any resources or help would be amazing!

Logic: Have "Personal use" already selected. Allow customers to press "Business use" to change the option selected. Book now send the selected option to checkout.

Answer 1

My approach will be to use radio buttons.

 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>

Checkout MDN for reference