Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

clickanapolis

Formulario sem refresh

Por , em PHP

Recommended Posts

clickanapolis    1

clickanapolis
Postado

Boa tarde pessoal, me surgiu uma necessidade de fazer um sistema de agendamento de sala de reunião aqui na empresa, ontem para usar uma sala de reunião é obrigatorio fazer a reserva.

O problema que de acordo que vou selecionando por exemplo a sala, o dia, automaticamente preciso mostrar ao lado as reservas dessa sala ao lado para evitar horarios duplos sem refresh.

 

Ah se tiver já horario marcado no que o usuario selecionar o botão de salvar do formulario não pode aparecer.

 

Qual melhor maneira para eu fazer isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhess    46

Jhess
Postado

Você pode utilizar AJAX para realizar os inserts de agendamento, e ao mesmo tempo exibir os posts numa div, fiz rápido e sem testar, mas caso queira estudar mais sobre essa função, irei disponibilizar o link:

 

No caso de desabilitar o botão, você tem que fazer um SELECT, criar uma array com os horários disponíveis e verificar por javascript se aquele horário existe na array, caso exista, habilite, caso contrário, desabilite. 

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script> <!-- Inporte de algum CDN ou baixe o Javascript -->
<script type="text/javascript">
function submitdata()
{
 var cliente = document.getElementById("cliente");
 var data = document.getElementById("data");
 var hora = document.getElementById("hora");

 $.ajax({
  type: 'POST',
  url: 'insert.php',
  data: {cliente:cliente, data:data, hora:hora},
  success: function (response) {
    //Aqui você pode exibir o conteúdo numa div, caso seja sucesso
   $('#success__para').html("Dados enviados: Cliente = " + cliente + ", Data = " + data + ", Hora = " + hora + "");
  }
 });
 return false;
}
</script>
</head>
<body>
		
<form method="POST" onsubmit="return submitdata();">
 <input type="text" name="cliente" id="cliente">
 <input type="text" name="data" id="data">
 <input type="text" name="hora" id="hora">
 <input type="submit" name="submit_form" value="Submit">
</form>

<p id="success_para" ></p>

</body>
</html>

 

Fonte: http://talkerscode.com/webtricks/submit the form without page refresh using ajax and jquery.php

 

Links alternativos: https://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refresh

https://stackoverflow.com/questions/37019309/submit-form-without-reload-using-jquery-ajax

 

https://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59

Compartilhar este post

Link para o post
Compartilhar em outros sites

clickanapolis    1

clickanapolis
Postado

Jess ate a parte de gravar sem refresh eu já havia visto. Minha duvida é como ir consultando sem refresh a cada vez que o usuário selecionar um campo no formulário.

 

o Formulário terá 

 

Sala em um select

Data campo date

Horario inicio

Horário fim

ambos em select, já que a sala e alugada de 30 em 30 minutos podendo alugar mais de um horario.

 

Assim quando o usuário selecionar por exemplo.

 

Sala 1

Data: 21/03/2018

Hora inicio: 08:00

Hora Fim: 09:00

 

o sistema só pode mostrar o botão de cadastrar caso os horários estejam livres.

 

Vou ler os links para pegar mais aprendizado.

 

abçs

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhess    46

Jhess
Postado

Segue minha lógica:

 

Vamos fazer um select no banco na tabela de horários, agora vamos criar um input select com todos os horários, e dentro desse laço que cria os options do input select, vamos deixar na função disabled apenas os não-disponíveis. Ok, espero que tenha entendido até aí... E quando selecionar o horário disponível (tanto no horário fim quanto no início) o botão habilitará.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhess    46

Jhess
Postado

Esta lógica não possui AJAX, hehe, apenas PHP e MySQL, desse modo:

 

Supondo que tenha uma tabela chamada "horarios" e nela tenha 3 colunas: id, hora, disponivel

  

<select>
 <?php
 $sql = "SELECT * FROM horarios";
 $result = $conn->query($sql);

 if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) { ?>
    	<option value="<?php echo $row['hora']; ?>" <?php if($row['disponivel'] == 'N'){echo 'disabled';}?>><?php echo $row['hora'];?></option>
    <? }
 }?>
</select>

 

Aqui ele pega TODOS os horários do banco, e desabilita os que estão indisponíveis (supondo que no banco, quando um horário está ocupado ele recebe o valor "N" na coluna "disponivel").

 

Para atualizar este SELECT assim que inserir um novo agendamento, para o usuário não registrar no mesmo horário, aí sim você usa AJAX, você pode desabilitar os horários escolhidos com InnerHTML, forçando o usuário a não pegar este horário de novo. E caso o usuário atualize a página (ou mude de página e volte), o SELECT já busca aquele horário como indisponível. 

Compartilhar este post

Link para o post
Compartilhar em outros sites

clickanapolis    1

clickanapolis
Postado

Jhess fiz aqui a parte de consulta no banco de dados e funcionou ok, ate coloquei para rodar aqui com um botão avançar.

 

O usuario escolhe a sala, a data e avança, quando ele avança no meu select tem apenas os horarios que não tem marcado.

 

Minha duvida agora é so no ajax, como fazer para apos eu selecionar a sala e a data e sair do campo data forçar o ajax executar o arquivo consultaagenda.php levando o id_sala e a data assim mostrando o select so os horarios em aberto daquela data.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhess    46

Jhess
Postado

Entendi o que quer fazer, claramente. Mas me esclarece uma coisa, você está usando sistema step-by-step?

 

Exemplo:

 

image.png.e4a4caf682c0b82193c5173a43fb2fc2.png

 

Ou você criou 1 página específica para: sala e data | e outra página para o select?

 

No sistema step-by-step os valores dos inputs são sobrepostos em segundo plano no próprio formulário. Por exemplo: No passo 1 eu seleciono a sala, no passo 2 eu seleciono a data, quando eu tiver no 3, o ajax entra em ação fazendo a busca pelos horários disponíveis para aquela sala naquele dia. Espero ter entendido com clareza o que eu quis dizer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

clickanapolis    1

clickanapolis
Postado

Jhess na verdade não seria isso.

 

Hoje eu criei com o botão de avançar devido a pressa do cliente para atender inicialmente.

 

O que preciso e tipo aqueles combox de estado e cidades.

 

a diferença que só faria a busca apos preencher a sala e a data, para ai sim mostrar os horarios disponivel.

 

a consulta eu já tenho o problema e como fazer o ajax na mesma tela ler o id da sala e a data.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhess    46

Jhess
Postado

Depois de ter pego os dados (sala e data) o ajax seria este:

  

    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "ArquivoQueBuscaAsSalasDisponiveis", //Exemplo: SELECT horario FROM horarios WHERE disponivel = 'S' AND sala = '$_GET['sala'] AND data = '$_GET['data']...'
            data: { sala: $("#sala").val(), data: $("#data").val()},
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (obj) {
                if (obj != null) {
                    var data = obj.data;
                    var horarios = $('#horarios'); //ID do Select onde vai cair os horarios disponiveis
                    horarios.find('option').remove();
                    $.each(data, function (i, d) {
                        $('<option>').val(d.Horario).text(d.Horario).appendTo(horarios);
                    });
                }
            }
        });
    });

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhess    46

Jhess
Postado

Exatamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP

  • Conteúdo Similar

    • violin101
      PHP+Codeigniter - Dúvida em Relação a Teclas
      Por violin101
      Caros amigos do grupo, saudações e um feliz 2025.
       
      Estou com uma pequena dúvida referente a Teclas de Atalho.

      Quando o Caps Lock está ativado o Comando da Tecla de Atalho não funciona.
      ou seja:
      se estiver para letra minúscula ====> funciona
      se estiver para letra maiúscula ====> não funciona
       
      Como consigo evitar essa falha, tanto para Letra Maiúscula quanto Minúscula ?

      o Código está assim:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'r' ) return;// Não é Ctrl+r, portanto interrompemos o script evt.preventDefault(); });  
      Grato,
       
      Cesar
    • violin101
      Javascript - Calcular Valores Monetário em Tempo Real
      Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • violin101
      [Resolvido] JavaScript - Exibir logo dentro da Tabela html
      Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • violin101
      PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto
      Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
    • violin101
      PHP+Codeigniter - Adicionar Registro Plano de Contas
      Por violin101
      Caros amigos, saudações.
       
      Humildemente peço desculpa por postar uma dúvida que tenho.

      Preciso salvar no MySql, os seguinte Registro:

      1 - Principal
      ====> minha dúvida começa aqui
      ==========> como faço para o Sistema Contar Automaticamente o que estiver despois do 1.____?
      1.01 - Matriz
      1.01.0001 - Estoque
      1.01.0002 - Oficina
      etc

      2 - Secundário
      2.01 - Loja_1
      2.01.0001 - Caixa
      2.01.0002 - Recepção
      etc
       
      Resumindo seria como se fosse um Cadastro de PLANO de CONTAS CONTÁBEIL.

      Grato,


      Cesar









       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito