I am seeking help with a booking form.
I would like to accomplish 2 things.
-
Have the “Number of Participants” calculate the price when the guests are selected and appear in “Total Price”
-
Date Picker for “Choose a Date / Check In”
I think I can figure everything else out, I just need help with the javascript.
I really like these air bnb react dates sample, but I do not understand this method and do not know how to add the script to make it work.
Thank you all in advance for you help!
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Booking Form</title>
</head>
<body>
<div>Price: $65 USD / person</div>
<form action="" id="" method="post">
<div style="margin-top:8px;margin-bottom:8px">
<div style="margin-bottom:8px">
<label>
<div>Number of Participants</div>
</label>
</div>
<select id="" name="">
<option value="1" selected="selected">1 guest</option>
<option value="2">2 guests</option>
<option value="3">3 guests</option>
<option value="4">4 guests</option>
<option value="5">5 guests</option>
<option value="6">6 guests</option>
<option value="7">7 guests</option>
<option value="8">8 guests</option>
<option value="9">9 guests</option>
<option value="10">10 guests</option>
</select>
</div>
<div style="margin-top:8px;margin-bottom:8px">
<div style="margin-bottom:8px">
<div>Choose a Date</div>
</div>
<input type="text" aria-label="Check In" id="startDate" name="startDate" value="" placeholder="Check In" autoComplete="off" />
</div>
<div style="margin-bottom:8px">
<div style="margin-bottom:8px">
<div>Choose a Time</div>
</div>
<select id="" name="">
<option selected="" value="1">8 am</option>
<option value="2">9 am</option>
<option value="3">10 am</option>
<option svalue="4">11 am</option>
<option svalue="5">1 pm</option>
<option value="6">2 pm</option>
<option value="7">3 pm</option>
</select>
</div>
<div style="margin-top:8px">
<div>Total Price: $65 USD</div>
</div>
<div style="margin-top: 8px;">
<button>Book Now</button>
</div>
</form>
</body>
</html>
Here is the link: