0
381
ViewsWebsite button logic to place order like Cameo "Book Order"
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.
·
Santiago Trujillo
1 answers
Answer question0
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
·
Santiago Trujillo
Report
Answer question