User Story
As an attendee, I want to fill out an event booking form with my name, email, and select the desired event, so that I can book a spot and attend the event.
HTML
<template>
<lightning-card title="Event Booking Form">
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-2">
<lightning-input label="Name" value={name} onchange={handleNameChange}></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input type="email" label="Email" value={email} onchange={handleEmailChange}></lightning-input>
</div>
<div class="slds-col slds-size_1-of-1">
<lightning-combobox label="Event" options={eventOptions} value={selectedEvent} onchange={handleEventChange}></lightning-combobox>
</div>
<div class="slds-col slds-size_1-of-1">
<lightning-button label="Book Event" variant="brand" onclick={handleBooking}></lightning-button>
</div>
</div>
</lightning-card>
</template>
Java Script
import { LightningElement, track } from 'lwc';
export default class EventBookingForm extends LightningElement {
@track name = '';
@track email = '';
@track selectedEvent = '';
@track eventOptions = [
{ label: 'Event 1', value: 'event1' },
{ label: 'Event 2', value: 'event2' },
{ label: 'Event 3', value: 'event3' }
];
handleNameChange(event) {
this.name = event.target.value;
}
handleEmailChange(event) {
this.email = event.target.value;
}
handleEventChange(event) {
this.selectedEvent = event.target.value;
}
handleBooking() {
// Perform event booking logic here
// You can use this.name, this.email, this.selectedEvent to access the form values
// Example: Call an Apex method to book the event
// Your logic goes here...
console.log('Event booked!');
}
}
Video
Video does not exists.
