Heena Shah Heena Shah - 10 months ago 38
HTML Question

JQuery disable or alert choises based on form data

This is about reservation system

Suppose each room has capacity of 10.

Number of people already in the room will be displayed in the table data


<td class='5'>1</td>
<td class='7'>2</td>
<td class='9'>3</td>
<td class='3'>4</td>
<td class='2'>5</td>
<td class='7'>6</td>

Numbers in 'class' represents number of people in that room. 1,2,3 to 6 are room numbers

I have text input field with
<input name='people' type="text">
to get value of number of people I am reserving for.

The requirement now is, if I have entered '4' in the people input, I can not click on and reserve room No 2 as it has 7 people already and capacity is 10. I should be able to click on other room which has 6 people or less mentioned in
<td class=>

Answer Source

You're going to need to know what room they are trying to reserve, how many people they are trying to reserve, how many people are already reserved, and what the max capacity is when the user clicks "reserve."

If I were you, I wouldn't be using class to store the data. I'd use the data attribute. I'd do the following:

<td id="15" data-currentFilled="7" data-maxcapacity="10">table 15</td>
  1. Store the table id using the Id attr

  2. Store the current # of people reserved for that table in the currentFilled attr

  3. Store the max capacity in the maxcapacity attr

Then your javascript would need to be something like this:

$(".reservationSave").click(function() {

  // Get the table trying to be reserved and how many they're trying to reserve
  var tableBeingReserved = $(this).attr("id");
  var howMany = parseInt($(".reservingGuestsNumber").val());

  // Find out how many people are currently reserved and max capacity
  var currentFilled = parseInt($("td#15").attr("data-currentFilled"));
  var maxCapacity = parseInt($("td#15").attr("data-maxcapacity"));

  if (currentFilled + howMany > maxCapacity) {
    alert("Cannot save. Too many people");


Now, of course you will have to tweak some names, etc but here's a jsbin to help you out: