Seat Reservation with jQuery

By Brij Mohan

In my Online Bus Reservation System project, I got queries from many people about how to implement seat selection screen effectively. So, I decided to write on it. This post explains how to implement seat booking with jQuery. It can be used in online Bus, flight, hotel, exam support, cinema and ticket booking system.

rows: total number of rows of seats.cols: total number of seats in each row.rowCssPrefix: will be used to customize row layout using (rowCssPrefix + row number) css class.colCssPrefix: will be used to customize column using (colCssPrefix + column number) css class.seatWidth: width of seat.seatHeight: height of seat.seatCss: css class of seat.selectedSeatCss: css class of already booked seats.selectingSeatCss: css class of selected seats.

When user clicks on available seat, it is selected and second click on same seat will unselect seat. Button “Show All” will show all booked seat numbers and “Show Selected Seats” will show selected seats only.

Hey very nice thanks for this code… I just wanted to ask a very simple thing…

Here you have given static values for fields like rows,columns,seat width and seat height.

var settings = {

rows: 5,

cols: 15,

rowCssPrefix: ‘row-‘,

colCssPrefix: ‘col-‘,

seatWidth: 35,

seatHeight: 35,

seatCss: ‘seat’,

selectedSeatCss: ‘selectedSeat’,

selectingSeatCss: ‘selectingSeat’

};

I wanted to know how can I make this thing dynamic by taking these inputs from user through textbox or input box and then assigning it to the var.. I am sry to ask but I am very poor in JQuery so wanted to learn it..

hi thnks for posting this jquey code as mentioned above but in order to use this code we ned to have database jst for clicking on seat and that seat no sjhould display…can u provide any code for this step by step..waitiing for ur reply

Hi ,I tried to use but its not working in asp.net 3.5 will u plz help me how to use it , as m facing this issue since last 20 days and found no solution i have to generate seat layout from the collection of data returned by ITSWebservice, It would really be grtfull if u can help

Hello Brij, i have a little problem when i click on live view in dreamweaver, the numerous seats are not visualized. I tried also to copy and paste the source code (from the browser) of your demo example. can you give me a suggestion?