1319970739_soccer_2

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.

seat reservation jquery Seat Reservation with jQuery

HTML:

<h2> Choose seats by clicking the corresponding seat in the layout below:</h2>
    <div id="holder"> 
		<ul  id="place">
        </ul>    
	</div>
	<div style="float:left;"> 
	<ul id="seatDescription">
		<li style="background:url('images/available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
		<li style="background:url('images/booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
		<li style="background:url('images/selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
	</ul>
	</div>
        <div style="clear:both;width:100%">
		<input type="button" id="btnShowNew" value="Show Selected Seats" />
		<input type="button" id="btnShow" value="Show All" />           
        </div>

We will add seats in “#place” element using javascript.

Settings:

To make it generalize, settings object is used.

 var settings = {
                rows: 5,
                cols: 15,
                rowCssPrefix: 'row-',
                colCssPrefix: 'col-',
                seatWidth: 35,
                seatHeight: 35,
                seatCss: 'seat',
                selectedSeatCss: 'selectedSeat',
				selectingSeatCss: 'selectingSeat'
            };

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.

Seat Layout:

We will create basic layout of seats.

var init = function (reservedSeat) {
                var str = [], seatNo, className;
                for (i = 0; i < settings.rows; i++) {
                    for (j = 0; j < settings.cols; j++) {
                        seatNo = (i + j * settings.rows + 1);
                        className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
                        if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
                            className += ' ' + settings.selectedSeatCss;
                        }
                        str.push('<li class="' + className + '"' +
                                  'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
                                  '<a title="' + seatNo + '">' + seatNo + '</a>' +
                                  '</li>');
                    }
                }
                $('#place').html(str.join(''));
            };
			//case I: Show from starting
            //init();

            //Case II: If already booked
            var bookedSeats = [5, 10, 25];
            init(bookedSeats);

init method is used to draw seats layout. Already booked seats array will be passed as argument of this method.

Seat Selection:

$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
	alert('This seat is already reserved');
}
else{
	$(this).toggleClass(settings.selectingSeatCss);
	}
});

$('#btnShow').click(function () {
	var str = [];
	$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
		str.push($(this).attr('title'));
	});
	alert(str.join(','));
})

$('#btnShowNew').click(function () {
	var str = [], item;
	$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
		item = $(this).attr('title');                   
		str.push(item);                   
	});
	alert(str.join(','));
})

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.

CSS:

#holder{	
height:200px;	 
width:550px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;	
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
 list-style: none outside none;
 position: absolute;   
}    
#place li:hover
{
background-color:yellow;      
} 
#place .seat{
background:url("images/available_seat_img.gif") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;	 
}
#place .selectedSeat
{ 
background-image:url("images/booked_seat_img.gif");      	 
}
#place .selectingSeat
{ 
background-image:url("images/selected_seat_img.gif");      	 
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#seatDescription li{
verticle-align:middle;	  
list-style: none outside none;
padding-left:35px;
height:35px;
float:left;
}

In my next post, you will get how to use this in asp.net project with sql server database .
If you have any query, put in below comment box.

Comments:  23

  • Anonymous

    awesome man.

  • Anonymous

    awesome man… thanks ;)

  • Guest

    cool :)

  • Ajit

    thanks

  • Venelin

    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?

  • Jincyjose37

    I have one problem that i hav to remove one row from center.How can I?help me.Its urgent..

  • FYP

    Hai sir….thank you a lot for the code……

  • Rahul Thiru

    i need help with storing or posting the booked seats into php/MYSQL…

    ajax post is not working ..

  • himali patel

    dear sir ,you give the example of seat reservation with jquery layout and now how to create a database…

  • Ravi

    i want to show ids from a table in the seat no how to do this

  • Mark

    Awesome! I will try this. I am currently trying to make a seat locator using HTML and CSS based on this article: http://www.squidoo.com/seat-locator-made-with-html-css-and-javascript-with-php

  • http://twitter.com/neelam6585 Neelam Chandra

    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

  • rtpHarry

    I want to book a blue seat! They don’t look as comfy when they have been reserved :P

  • http://profile.yahoo.com/TBFHHZ4XWLDDS2CG3BUATUEGSQ kaviya

    Thank you but my layout is empty …i am not getting any seat images in my layout..can u help me?? plz

  • http://www.techbrij.com Brij Mohan

    imgs are coming from CSS as background img, you can check in firebug.

  • Mithun Sudheendran

    could u please explain the Database design?
    Also need numberr of buses available for a particular date…

  • Patidar

    Fantastic man :)

  • nawyn4u

    great dude

  • srikanth

    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

  • Gayatri Ganeshan

    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..

  • Rayler Teh

    sir…i try alot of times
    I still cant display the seat,what happen?

  • BIgyan

    view source code of this page and copy that code and edit it.. there is external link of java script which we have to put

  • Roger Burgos

    How do you do for the space in the middle of the bus? Thanks. Great Work!!