Não fechar modal ao clicar em botão submit

Bootstrap

JavaScript

PHP

HTML5

22/03/2019

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 ...
Jucelio

Jucelio

Curtidas 1

Respostas

Kauan Douglas

Kauan Douglas

22/03/2019

Poderias nos enviar o código para darmos uma olhada?
GOSTEI 0
Reginaldo Santos

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;
});
GOSTEI 0
Jucelio

Jucelio

22/03/2019

Bom dia Reginaldo.
Farei os testes e dou aqui feedback . Muito obrigado pela resposta.
GOSTEI 0
Jucelio

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

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;
});


Nesse caso, o type do botão submit deve ser submit mesmo ?
GOSTEI 0
Jucelio

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;
});


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
POSTAR