Problem in modal bootstrap form

Asked

Viewed 1,079 times

1

Is there a restriction to bootstrap modal form? When I put the form inside the modal, I do not receive the Ajax Alert, however, if I take the form from inside the modal, the data passes and I receive the Alert. When I put the form inside the modal I also receive in the console: Undefined index... Follows 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">&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;
});
});

php insert.

<?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);*/
  • You want when you open the modal to run ajax? or inside the modal with the form to run ajax ?

  • Inside the modal, I will fill in the fields and give a Submit to insert in the bank.

  • Hello, Can you say the error of the console? What is the line? What is the line?

  • {main}() D: wamp tools www schedule-3 schedule crud inserts.php:0 Notice: Undefined index: idClient in D: wamp tools www schedule-3 agenda crud inserts.php on line 5 .

  • The error consists of the page inserts.php because the idClient has no value at line 5. you can enter the code at least from the beginning of the page, to be able to analyze it better.

  • Code of the insert.php or the main one containing the modal?

  • inserts.php to know the cause of the error

  • Sorry I didn’t see you already in the question

  • What appears if you insert.php right at the beginning put print_r($_POST)

Show 4 more comments

1 answer

2


You are using two equal id’s, id is unique! in modal and form this register Serva, then you try to give Ubmit with them, if you use Ubmit with "form" or put another id will work.

See an example on jsfiddle

  • Man, good observation, I had not noticed this error, this way it would not work even. Thanks for the help! Hug!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.