Olá amigos,
Sou novo no fórum, estou precisando de ajuda, de uma luz no fundo do túnel, de um caminho para transforma uma tabela em forma de calendário, utilizando AJAX, conforme imagem abaixo:
![Imagem Colocada]()
Atualmente quando clico em Reservar, é verificado se o cliente tem menos de 5 mesas, se sim é gravado no banco de dados, é feito um submit e a pagina carregada novamente.
Como eu poderia fazer essa verificação e gravação utilizando AJAX?
Desde já agradeço a ajuda!
Abaixo segue meu código:
Código :
Código HTML:
Código :
Sou novo no fórum, estou precisando de ajuda, de uma luz no fundo do túnel, de um caminho para transforma uma tabela em forma de calendário, utilizando AJAX, conforme imagem abaixo:

Atualmente quando clico em Reservar, é verificado se o cliente tem menos de 5 mesas, se sim é gravado no banco de dados, é feito um submit e a pagina carregada novamente.
Como eu poderia fazer essa verificação e gravação utilizando AJAX?
Desde já agradeço a ajuda!
Abaixo segue meu código:
Código :
<?php
//Rotina em php utilizado para verificar a quantidade de mesas e gravação no BD
if (isset($_POST['submit']) && $_POST['submit'] == 'reservarMesa') {
//Consulta quantidade de mesas reservadas para cliente
$check = $mysqli->query("SELECT 'X' FROM mesa WHERE cliente_id = '".$cliente_id."'");
$totaMesa = $check->num_rows;
// Sen o cliente tem mais de 5 mesas, retorna mensagem de erro
if ($totalMesa >= 5) {
//Mensagem
$msgBox = alertBox("Você não pode reservar mais mesas.", "<i class='icon-remove-sign'></i>", "danger");
} else {
//Reserva a mesa se menor que 5 reservas
$stmt = $mysqli->prepare("
INSERT INTO
mesa(
cliente_id,
mesa_id,
dia_id
) VALUES (
?,
?,
?
)");
$stmt->bind_param('sss',
$_POST['cliente_id'],
$_POST['mesa_id'],
$_POST['dia_id']
);
$stmt->execute();
//Retorna mensagem de reservado
$msgBox = alertBox("Reservado", "<i class='icon-check-sign'></i>", "success");
$stmt->close();
}
}
?>
//Rotina em php utilizado para verificar a quantidade de mesas e gravação no BD
if (isset($_POST['submit']) && $_POST['submit'] == 'reservarMesa') {
//Consulta quantidade de mesas reservadas para cliente
$check = $mysqli->query("SELECT 'X' FROM mesa WHERE cliente_id = '".$cliente_id."'");
$totaMesa = $check->num_rows;
// Sen o cliente tem mais de 5 mesas, retorna mensagem de erro
if ($totalMesa >= 5) {
//Mensagem
$msgBox = alertBox("Você não pode reservar mais mesas.", "<i class='icon-remove-sign'></i>", "danger");
} else {
//Reserva a mesa se menor que 5 reservas
$stmt = $mysqli->prepare("
INSERT INTO
mesa(
cliente_id,
mesa_id,
dia_id
) VALUES (
?,
?,
?
)");
$stmt->bind_param('sss',
$_POST['cliente_id'],
$_POST['mesa_id'],
$_POST['dia_id']
);
$stmt->execute();
//Retorna mensagem de reservado
$msgBox = alertBox("Reservado", "<i class='icon-check-sign'></i>", "success");
$stmt->close();
}
}
?>
Código HTML:
Código :
<html>
<head>
<title>Reserva Mesa</title>
</head>
<body>
<?php if ($msgBox) { echo $msgBox; } ?>
<table width="353" border="1">
<tr>
<td width="64"> </td>
<td width="123">Dia 1</td>
<td width="144">Dia 2</td>
</tr>
<tr>
<td>Mesa 1</td>
<td>
<form method="post" class="iconForm">
<input name="cliente_id" type="hidden" value="1" />
<input name="mesa_id" type="hidden" value="1" />
<input name="dia_id" type="hidden" value="1" />
<button type="input" name="submit" id="submit" value="reservarMesa">Reservar</button>
</form>
</td>
<td>
<form method="post" class="iconForm">
<input name="cliente_id" type="hidden" value="1" />
<input name="mesa_id" type="hidden" value="1" />
<input name="dia_id" type="hidden" value="2" />
<button type="input" name="submit" id="submit" value="reservarMesa">Reservar</button>
</form>
</td>
</tr>
<tr>
<td>Mesa 2</td>
<td><img src="img/reservado.gif"/></td>
<td><img src="img/reservado.gif"/></td>
</tr>
<tr>
<td>Mesa 3</td>
<td><img src="img/reservado.gif"/></td>
<td><img src="img/reservado.gif"/></td>
</tr>
</table>
</body>
</html>
<head>
<title>Reserva Mesa</title>
</head>
<body>
<?php if ($msgBox) { echo $msgBox; } ?>
<table width="353" border="1">
<tr>
<td width="64"> </td>
<td width="123">Dia 1</td>
<td width="144">Dia 2</td>
</tr>
<tr>
<td>Mesa 1</td>
<td>
<form method="post" class="iconForm">
<input name="cliente_id" type="hidden" value="1" />
<input name="mesa_id" type="hidden" value="1" />
<input name="dia_id" type="hidden" value="1" />
<button type="input" name="submit" id="submit" value="reservarMesa">Reservar</button>
</form>
</td>
<td>
<form method="post" class="iconForm">
<input name="cliente_id" type="hidden" value="1" />
<input name="mesa_id" type="hidden" value="1" />
<input name="dia_id" type="hidden" value="2" />
<button type="input" name="submit" id="submit" value="reservarMesa">Reservar</button>
</form>
</td>
</tr>
<tr>
<td>Mesa 2</td>
<td><img src="img/reservado.gif"/></td>
<td><img src="img/reservado.gif"/></td>
</tr>
<tr>
<td>Mesa 3</td>
<td><img src="img/reservado.gif"/></td>
<td><img src="img/reservado.gif"/></td>
</tr>
</table>
</body>
</html>