1

Existe alguma restrição para formulário em modal do bootstrap? Quando coloco o formulário dentro do modal, não recebo o alert do Ajax, porém, se tiro o formulário de dentro da modal, os dados passam e recebo o alert. Quando coloco o formulário dentro do modal também recebo no console: Undefined index... Segue o código.

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">&times;</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);*/
9
  • Você quer que quando abra o modal execute o ajax? ou dentro da modal com o form execute o ajax ? Commented 13/05/2016 às 16:48
  • Dentro do modal, vou preencher os campos e dar um submit para inserir no banco. Commented 13/05/2016 às 16:51
  • Ola, Pode dizer por completo o erro do console? Qual é a linha? O que tem a linha? Commented 13/05/2016 às 16:52
  • {main}() D:\Ferramentas\wamp\www\agenda-reserva-3\agenda\crud\insere.php:0 Notice: Undefined index: idCliente in D:\Ferramentas\wamp\www\agenda-reserva-3\agenda\crud\insere.php on line 5 Observação: Apenas com o formulário está dentro do modal. Commented 13/05/2016 às 16:55
  • O erro consiste na pagina insere.php porque o idCliente não tem valor na linha 5. pode indicar o codigo pelo menos do inicio da pagina, para ser possivel analisar melhor. Commented 13/05/2016 às 16:59

1 Resposta 1

2

Você esta utilizando dois id's iguais, id é único! em modal e em form esta cadastrarReserva, depois você tenta dar submit com eles, se utilizar o submit com o "form" ou colocar outro id vai funcionar.

Veja um exemplo no jsfiddle

1
  • Cara, boa observação, não tinha percebido este erro, desta maneira não iria funcionar mesmo. Obrigado pela ajuda! Abraço! Commented 13/05/2016 às 17:14

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .