Is there any modal constraint for bootstrap? When I put the form inside the modal, I do not get the Ajax alert, but if I take the form from within the modal, the data passes and I get the alert. When I put the form inside the modal I also get on the console: Undefined index ... Follow the code.
Modal
<div class="modal" id="cadastrarReserva" role="dialog" style="width:900px; height:650px; left:40%; top:2%;">
<div class="modal-dialog">
<div class="modal-body" style="max-height:650px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<form method="post" id="cadastrarReserva" autocomplete="off">
<label>Código:</label>
<input type="text" id="idCliente" name="idCliente" >
<label>Cliente:*</label>
<input type="text" name="cliente" id="clienteReserva" autofocus required >
<label>Data:*</label>
<input type="text" name="data" value="<?php echo $dataFiltro; ?>" class="dataFiltro" required/>
<label>Hora:*</label>
<select name="hora" required>
<option value="">Selecione...</option>
<option value="11:30:00">11:30h</option>
<option value="12:00:00">12:00h</option>
<option value="14:00:00">14:00h</option>
<option value="15:00:00">15:00h</option>
<option value="15:30:00">15:30h</option>
<option value="16:00:00">16:00h</option>
<option value="16:30:00">16:30h</option>
<option value="17:00:00">17:00h</option>
<option value="17:30:00">17:30h</option>
<option value="18:00:00">18:00h</option>
</select>
<label>Número de Pessoas:*</label>
<input type="text" name="nmPessoas" required/>
<label>Tipo Café:</label>
<select name="tipoCafe">
<option value="">Selecione...</option>
<option value="Simples">Simples</option>
<option value="Completo">Completo</option>
<option value="Almoço">Almoço</option>
</select>
<label>Tipo Reserva:*</label>
<label><input type="radio" name="tipo" value="Normal" required/> Normal </label>
<label><input type="radio" name="tipo" value="Grupo" required/> Grupo </label>
<label>Ouve Pagamento Adiantado?*</label>
<label><input type="radio" name="pagamentoAdiantado" value="Não" required/> Não </label>
<label><input type="radio" name="pagamentoAdiantado" value="Sim" required/> Sim </label>
<label>Observação: </label>
<textarea maxlength="96" name="observacao"></textarea>
<br><br>
<input type="hidden" name="status" value="Reserva" />
<input type="submit" name="cadastrarReserva" value="Cadastrar" />
<input type="reset" value="Limpar"/>
</form>
</div>
</div>
ajax.js
jQuery(document).ready(function(){
jQuery('#cadastrarReserva').submit(function(){
var dados = jQuery( this ).serialize();
$.ajax({
type: 'POST',
dataType: 'json',
url: "crud/insere.php",
data: dados,
success: function(data) {
alert('alerta');
}
});
return false;
});
});
insere.php
<?php
date_default_timezone_set('America/Sao_Paulo');
include('../../resources/conexao/conexao.php');
$cliente = $_POST ['idCliente'];
$data = $_POST['data'];
$data = implode("-",array_reverse(explode("/", $data)));
$hora = $_POST['hora'];
$nmPessoas = $_POST['nmPessoas'];
$checkboxTipoCafe = $_POST['tipoCafe'];
$checkboxTipoReserva = $_POST['tipo'];
$pagamentoAdiantado = $_POST['pagamentoAdiantado'];
$observacao = $_POST['observacao'];
$status = $_POST['status'];
$dataCadastro = date('Y-m-d H:i:s');
if(empty($hora)){
$insert = "INSERT INTO Reserva(idCliente, data, numeroPessoas, tipoCafe, tipo, pagamentoAdiantado, observacao, status, dataCadastro, cancelado)
VALUES ('$cliente', '$data', '$nmPessoas','$checkboxTipoCafe','$checkboxTipoReserva', '$pagamentoAdiantado', '$observacao', '$status', '$dataCadastro', 'N')";
} else {
$insert = "INSERT INTO Reserva(idCliente, data, hora, numeroPessoas, tipoCafe, tipo, pagamentoAdiantado, observacao, status, dataCadastro, cancelado)
VALUES ('$cliente', '$data', '$hora', '$nmPessoas','$checkboxTipoCafe','$checkboxTipoReserva', '$pagamentoAdiantado', '$observacao', '$status', '$dataCadastro', 'N')";
}
$conexao = conexao();
$PDO = $conexao -> prepare($insert);
$PDO -> execute();
$retorno = array('id' => "teste");
echo json_encode($retorno);*/