Oct 30, 2011

Seat Reservation with jQuery

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


<h2> Choose seats by clicking the corresponding seat in the layout below:</h2>
    <div id="holder"> 
		<ul  id="place">
	<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>
        <div style="clear:both;width:100%">
		<input type="button" id="btnShowNew" value="Show Selected Seats" />
		<input type="button" id="btnShow" value="Show All" />           

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


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>' +
			//case I: Show from starting

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

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');

$('#btnShow').click(function () {
	var str = [];
	$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {

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

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.


border:1px solid #A4A4A4;
#place {
#place a{
#place li
 list-style: none outside none;
 position: absolute;   
#place li:hover
#place .seat{
background:url("images/available_seat_img.gif") no-repeat scroll 0 0 transparent;
#place .selectedSeat
#place .selectingSeat
#place .row-3, #place .row-4{
#seatDescription li{
list-style: none outside none;

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.

  • Anonymous

    awesome man.

  • Anonymous

    awesome man… thanks ;)

  • Guest

    cool :)

  • Ajit


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

  • Evantoo56

    Hi Brij,am having a problem adding some more elements into the array bookedSeats from a selected¬† input field in a form…how do i do this?

  • 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

  • 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

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


    How u get this imgs,plz help me out asap.

  • 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…

  • Shanmugaraj Raj

    Thank you…I tried ur codes but seat layout not displayed for me. so help me sir.plz…

  • Aditi Jarvis Gandhi

    I don’t get what about the database ? how it is going to get store in side? do i need table ? what should be included in table?

  • 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!!

  • how can prevent seat selection as quntity specifined by user early page.???

  • Amal_Jamel

    this external link contains what?

  • Lil Keyfi

    Liked your work but I have a problem concerning the seat Reservation with Jquery. My holder frame is empty. How do I draw the seats. thank u

  • same

    hye if u resolved your problm then plz help me how can i implemt this code?

  • sreerag

    please provide the table structure for this?

  • I guess You are a beginner , the empty seats area will show up just download jquery File (I.e .js file) and attach at the head of this code , u can download that from Jquery(dot) com

  • Krunal Sabhadiya

    how to show ” selected seat ” or ” all seat ” without click events

  • Neenu Ann George

    how can we edit this seat arrangement…..eg:.if 1 seat got damaged how can we inform…or if i wanna add 2 seats more how can i??? thank you