Não fechar modal ao clicar em botão submit
Boa tarde.
Resumindo a questão:
Tenho uma janela php , onde tenho alguns itens e uma janela modal. Ao clicar em determinado botão o modal é aberto.
Nesse modal , tenho 2 formulários. No primeiro , tem um único campo onde a pessoa irá digitar um rg . Através de uma query que ainda vou desenvolver,
vou verificar se esse rg já está cadastrado. Se sim , os campos do segundo form deverão ser preenchidos com os dados vindos do banco de dados. Caso contrário a pessoa preencherá o segundo formulário e fará o cadastro.
A questão é quando a pessoa preenche o primeiro formulário e clica no botão submit, o modal fecha.. e eu quero que faça tudo sem fechar o modal... o usuário não vai querer ficar toda hora tendo que abrir o modal ...
Resumindo a questão:
Tenho uma janela php , onde tenho alguns itens e uma janela modal. Ao clicar em determinado botão o modal é aberto.
Nesse modal , tenho 2 formulários. No primeiro , tem um único campo onde a pessoa irá digitar um rg . Através de uma query que ainda vou desenvolver,
vou verificar se esse rg já está cadastrado. Se sim , os campos do segundo form deverão ser preenchidos com os dados vindos do banco de dados. Caso contrário a pessoa preencherá o segundo formulário e fará o cadastro.
A questão é quando a pessoa preenche o primeiro formulário e clica no botão submit, o modal fecha.. e eu quero que faça tudo sem fechar o modal... o usuário não vai querer ficar toda hora tendo que abrir o modal ...
Jucelio
Curtidas 1
Respostas
Kauan Douglas
22/03/2019
Poderias nos enviar o código para darmos uma olhada?
GOSTEI 0
Reginaldo Santos
22/03/2019
No javascript você deve enviar uma requisição via Ajax e retornar 'false' para que não atualize o site.
Recomendo utilizar o JQuery.
Recomendo fortemente que de uma olhada no fluxo de eventos
Segue um exemplo, mas entenda que esse não é o jeito mais elegante.
jQuery("#botao_do_formulario").on("submit", function(){
var content = jQuery(this);
jQuery.ajax({
type:"POST",
url:"ValidaDados.php",
data:jQuery(this).serialize(),
success:function(data) {
if(data == 1){
//Sucesso
}else{
//Erro
}
}
});
return false;
});
Recomendo utilizar o JQuery.
Recomendo fortemente que de uma olhada no fluxo de eventos
Segue um exemplo, mas entenda que esse não é o jeito mais elegante.
jQuery("#botao_do_formulario").on("submit", function(){
var content = jQuery(this);
jQuery.ajax({
type:"POST",
url:"ValidaDados.php",
data:jQuery(this).serialize(),
success:function(data) {
if(data == 1){
//Sucesso
}else{
//Erro
}
}
});
return false;
});
GOSTEI 0
Jucelio
22/03/2019
Bom dia Reginaldo.
Farei os testes e dou aqui feedback . Muito obrigado pela resposta.
Farei os testes e dou aqui feedback . Muito obrigado pela resposta.
GOSTEI 0
Jucelio
22/03/2019
Poderias nos enviar o código para darmos uma olhada?
Bom dia Kauan
O código está abaixo :
<!-------------------------------------------- Inicio Aba Agenda-------------------------------------------->
<div role="tabpanel" class="tab-pane" id="agenda">
<!--inicio Modal Agenda-->
<div class="modal fade" id="modalAgenda" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Agendamento</h4>
<form onsubmit="return enviar();">
<input name="rg_pesquisa1" placeholder="digite o rg para pesquisar" type="text" class="form-control" id="rg_pesquisa" required name=nome/ >
<button type = "submit">Pesquisar</button>
</form>
</div>
<div class="modal-body">
<!-- query que será utilizada no select de pastores-->
<?php
try{
$sql="select id,nome_pastor from pessoas";
$consulta_nome = mysqli_query($conn,$sql);
}catch (\\\\Exception $e)
{
echo "erro ao consultar";
}
?>
<!-- Formulário Agendar--->
<form method="POST" action="http://localhost//Sistema_de_Recepcao/Cadastro_de_Agenda.php" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label">Nome:</label>
<input name="nome_membro" type="text" class="form-control" id="nome_membro" required name=nome/ >
</div>
<div class="form-group">
<label class="control-label">Telefone:</label>
<input name="telefone_membro" type="text" class="form-control" id="telefone" required name=telefone/>
</div>
<table>
<tr>
<td>
<div class="form-group">
<label class="control-label">Hora:</label>
<input name="hora_atendimento" type="text" size="10" class="form" id="hora " required name=hora/>
</div>
</td>
<td>
<div class="form-group">
<label class="control-label">RG:</label>
<input name="rg" type="text" size="10" class="form" id="rg " required name=rg/>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label class="control-label">Data:</label>
<input name="data_atendimento" type="text" size="10" class="form" id="data" maxlength="10" required name=data/>
</div>
</td>
</tr>
</table>
<div class="form-group">
<label class="control-label">Observacoes:</label>
<textarea name="observacao_atendimento" class="form-control" id="observacoes"></textarea>
</div>
<div class="form-group">
<?php
try{
$sql="select * from pessoas where pastor = ''Sim''";
$consulta_pastor = mysqli_query($conn,$sql);
}catch (\\\\Exception $e)
{
echo "erro ao consultar";
}
?>
<!-- select para que o usuário selecione um pastor já cadastrado-->
<label class="control-label">Pastor</label>
<select name="select_pastor" >
<option>Selecione</option>
<?php while($rows_pessoas= mysqli_fetch_assoc($consulta_pastor)){ ?>
<option value="<?php echo $rows_pessoas[''id''];?>"><?php echo $rows_pessoas[''nome''];?></option>
<?php } ?>
</select>
</div>
<input name="id" type="hidden" class="form-control" id="id_pastor" value="">
<button type="button" class="btn btn-success" data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-danger">Agendar</button>
</form>
</div>
</div>
</div>
</div>
<!-- fim modal agenda-->
<!--Chama modal cadastra agenda-->
<button type="button" id="chama_modal_agendar" class="btn btn btn-xs btn-danger" data-toggle="modal" data-target="#modalAgenda">Agendar</button>
<br><br>
<?php
//seleciona os agendamentos que estão na tabela agenda para que os mesmos sejam exibidos na tela
try{
$sql="select a.id,a.nome_membro,a.telefone,a.data,a.horario,a.observacao,p.nome from agenda as a join pessoas as p on a.id_pastor = p.id";
$consulta_agenda = mysqli_query($conn,$sql);
}catch (\\\\Exception $e)
{
echo "erro ao consultar agenda";
}
?>
<br><br>
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Nome</th>
<td></td>
<th scope="col">Telefone</th>
<td></td>
<th scope="col">Data</th>
<td></td>
<th scope="col"> Pastor</th>
<td></td>
<th scope="col">Observação</th>
</tr>
</thead>
<tbody>
<?php while($rows_agenda = mysqli_fetch_assoc($consulta_agenda)){?>
<tr>
<td><?php echo $rows_agenda [''nome_membro''];?></td>
<td></td>
<td><?php echo $rows_agenda [''telefone''];?></td>
<td></td>
<td><?php echo date("d/m/Y", strtotime($rows_agenda [''data'']));?></td>
<td></td>
<td><?php echo $rows_agenda[''nome''];?></td>
<td></td>
<td><?php echo $rows_agenda [''observacao''];?></td>
<td>
<!-- Botões -->
<button class="btn btn-xs btn-primary" data-toggle="modal" data-target="#modalVisualizaAgenda<?php echo $rows_agenda [''id''];?>">Visualizar</button>
<button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#modalEditaAgenda" data-whatever="<?php echo $rows_agenda[''id'']; ?>"
data-whatevernome="<?php echo $rows_agenda[''nome_membro''];?>"data-whatevertelefone="<?php echo $rows_agenda[''telefone''];?>" data-whateverdata="<?php echo date("d-m-Y", strtotime($rows_agenda[''data'']));?>"data-whateverhora="<?php echo $rows_agenda[''horario''];?>"
data-whateverobs="<?php echo $rows_agenda[''observacao''];?>"data-whateverpastor="<?php echo $rows_agenda[''nome''];?>">Editar</button>
<button type="button" class="btn btn btn-xs btn-danger" data-toggle="modal" data-target="#modalExcluirAgenda<?php echo $rows_agenda[''id''];?>">Excluir</button>
</td>
</tr>
<!-- Inicio Modal visualizar Agenda -->
<div class="modal fade" id="modalVisualizaAgenda<?php echo $rows_agenda[''id'']; ?>" tabind
GOSTEI 0
Jucelio
22/03/2019
No javascript você deve enviar uma requisição via Ajax e retornar ''false'' para que não atualize o site.
Recomendo utilizar o JQuery.
Recomendo fortemente que de uma olhada no fluxo de eventos
Segue um exemplo, mas entenda que esse não é o jeito mais elegante.
jQuery("#botao_do_formulario").on("submit", function(){
var content = jQuery(this);
jQuery.ajax({
type:"POST",
url:"ValidaDados.php",
data:jQuery(this).serialize(),
success:function(data) {
if(data == 1){
//Sucesso
}else{
//Erro
}
}
});
return false;
});
Recomendo utilizar o JQuery.
Recomendo fortemente que de uma olhada no fluxo de eventos
Segue um exemplo, mas entenda que esse não é o jeito mais elegante.
jQuery("#botao_do_formulario").on("submit", function(){
var content = jQuery(this);
jQuery.ajax({
type:"POST",
url:"ValidaDados.php",
data:jQuery(this).serialize(),
success:function(data) {
if(data == 1){
//Sucesso
}else{
//Erro
}
}
});
return false;
});
Nesse caso, o type do botão submit deve ser submit mesmo ?
GOSTEI 0
Jucelio
22/03/2019
No javascript você deve enviar uma requisição via Ajax e retornar ''false'' para que não atualize o site.
Recomendo utilizar o JQuery.
Recomendo fortemente que de uma olhada no fluxo de eventos
Segue um exemplo, mas entenda que esse não é o jeito mais elegante.
jQuery("#botao_do_formulario").on("submit", function(){
var content = jQuery(this);
jQuery.ajax({
type:"POST",
url:"ValidaDados.php",
data:jQuery(this).serialize(),
success:function(data) {
if(data == 1){
//Sucesso
}else{
//Erro
}
}
});
return false;
});
Recomendo utilizar o JQuery.
Recomendo fortemente que de uma olhada no fluxo de eventos
Segue um exemplo, mas entenda que esse não é o jeito mais elegante.
jQuery("#botao_do_formulario").on("submit", function(){
var content = jQuery(this);
jQuery.ajax({
type:"POST",
url:"ValidaDados.php",
data:jQuery(this).serialize(),
success:function(data) {
if(data == 1){
//Sucesso
}else{
//Erro
}
}
});
return false;
});
Nesse caso, o type do botão submit deve ser submit mesmo ?
BOA TARDE. BEM , AINDA ESTOU COM ALGUNS PROBLEMAS ,MAS A QUESTÃO DE NÃO FECHAR O MODAL EU RESOLVI .
BOTÃO:
<button type="button" id="chama_modal_agendar" class="btn btn btn-xs btn-danger" onclick="return chamarPhpAjax();" >Teste Pesquisar</button>
AJAX :
function chamarPhpAjax() {
var rg_pesquisa = document.getElementById("rg_pesquisa").value;
var rg_banco = "<?php echo $teste ;?>";
window.alert(rg_banco);
if((rg_banco)==(rg_pesquisa) ){
var nome = "<?php echo $rows_consulta_rg ['nome_membro'];?>";
var telefone="<?php echo $rows_consulta_rg ['telefone'];?>";
var rg="<?php echo $rows_consulta_rg ['rg'];?>";
document.getElementById('nome_membro').value = nome;
document.getElementById('telefone_membro').value = telefone;
document.getElementById('rg_membro').value = rg;
} else{
window.alert('RG não encontrado');
}
}
GOSTEI 0