Modal Bootstrap + Javascript + Php

rafaelangelo_ · 18 de junho de 2015

Boa noite,

Estou enfrentando um problema até meio que fútil, mas que não consegui resolver até agora.

O que eu preciso ?

Que as respostas de um formulário sejam processadas no acao.php e gravadas em um .txt. Depois desse processo, gostaria que disparasse um modal com a confirmação do envio e mais algumas informações.

O erro?

Não estou conseguindo fazer os dois processos ao mesmo tempo, se consigo disparar o modal com o button do enviar os dados não são gravados, se consigo gravar os dados o modal não aparece posteriormente.

Estou usando as Frameworks do bootstrap.

Segue os códigos:

o Formulário:

<form method="post" action="acao.php" class="formoid-solid-orange" style="background-color:#FFFFFF;font-size:11px;font-family:Arial,Helvetica,sans-serif;color:#34495E;max-width:480px;min-width:150px" method="post"><div class="title"><h2>Três perguntas para conquistar o melhor !</h2></div><div class="element-checkbox"><label class="title">1. Se você fosse fazer Coaching, quais dessas áreas colocaria mais foco?</label> <div class="column column1"><label><input type="checkbox" name="checkbox" value="Pessoal "/ ><span>Pessoal </span></label><label><input type="checkbox" name="checkbox1" value="Profissional "/ ><span>Profissional </span></label><label><input type="checkbox" name="checkbox2" value="Qualidade de vida "/ ><span>Qualidade de vida </span></label><label><input type="checkbox" name="checkbox3" value="Relacionamentos "/ ><span>Relacionamentos </span></label></div><span class="clearfix"></span></div><div class="element-checkbox"><label class="title">2. Considerando o momento atual de sua carreira, quais dessas competências você considera mais importante para levá-lo(a) ao topo?</label> <div class="column column1"><label><input type="checkbox" name="checkbox4" value="Liderança "/ ><span>Liderança </span></label><label><input type="checkbox" name="checkbox5" value="Tomada de decisão "/ ><span>Tomada de decisão </span></label><label><input type="checkbox" name="checkbox6" value="Feedback "/ ><span>Feedback </span></label><label><input type="checkbox" name="checkbox7" value="Comunicação "/ ><span>Comunicação </span></label><label><input type="checkbox" name="checkbox8" value="Planejamento estratégico "/ ><span>Planejamento estratégico </span></label><label><input type="checkbox" name="checkbox9" value="Desenvolvimento de pessoas "/ ><span>Desenvolvimento de pessoas </span></label><label><input type="checkbox" name="checkbox10" value="Inteligência emocional "/ ><span>Inteligência emocional </span></label><label><input type="checkbox" name="checkbox11" value="Orientação para resultados "/ ><span>Orientação para resultados </span></label><label><input type="checkbox" name="checkbox12" value="Delegar "/ ><span>Delegar </span></label><label><input type="checkbox" name="checkbox13" value="Gestão do tempo Iniciativa "/ ><span>Gestão do tempo Iniciativa </span></label><label><input type="checkbox" name="checkbox14" value="Habilidade de vender "/ ><span>Habilidade de vender </span></label></div><span class="clearfix"></span></div><div class="element-checkbox"><label class="title">3. Em sua opinião, quais o principal obstáculo que o impede de começar a fazer Coaching agora?</label> <div class="column column1"><label><input type="checkbox" name="checkbox15" value="Tempo "/ ><span>Tempo </span></label><label><input type="checkbox" name="checkbox16" value="Dinheiro "/ ><span>Dinheiro </span></label><label><input type="checkbox" name="checkbox17" value="Zona de conforto "/ ><span>Zona de conforto </span></label><label><input type="checkbox" name="checkbox18" value="Acessibilidade (local, distância) "/ ><span>Acessibilidade (local, distância) </span></label><label><input type="checkbox" name="checkbox19" value="Empresa "/ ><span>Empresa </span></label></div><span class="clearfix"></span></div>    <div class="element-checkbox"><label class="title">Para finalizar, preencha as seguintes informações:</label><div class="element-input" title="teste"><label class="title"><span class="required"></span></label><div class="item-cont"><input class="null" type="text" name="input" required="required" placeholder="Nome:"/><span class="icon-place"></span></div></div><div class="element-input"><label class="title"><span class="required"></span></label><div class="item-cont"><input class="null" type="text" name="input1" required="required" placeholder="E-mail:"/><span class="icon-place"></span></div></div></div> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal3"><input class="btn btn-primary" type="submit" value="Enviar"></button> </form>

O modal que também esta no index.html:

<div id="myModal3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">    <div class="modal-header">        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>        <h3 id="myModalLabel">Confirmação</h3>    </div>    <div class="modal-body"><p>Enviado com Sucesso, Obrigado!</p>    <p>Acompanhe os resultados em nossas Redes Sociais:</p> <a target="_blanq" class="face" href="https://www.facebook.com/skillcoachinglpc"><img src="images/face.png"></a>    <a target="_blanq" class="linke" href="https://www.linkedin.com/profile/view?id=385962465&authType=NAME_SEARCH&authToken=4MTG&locale=pt_BR&trk=tyah&trkInfo=idx%3A1-3-3%2CtarId%3A1421086720505%2Ctas%3Askill+coaching"><img src="images/linke.png"></a> <p>Novidades em breve !        </p><div class="modal-footer">            <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar</button>        </div>    </div></div>

E tem o acao.php, que não faz muito diferença ao meu ver já que esta conseguindo pegar os dados... A unica coisa que fiz diferente foi colocar no final:

header('Location: index.html');

Para voltar ao index.html.

Resumindo tudo: Tem como acionar um botão e posteriormente gravar os dados em um .txt e depois disparar um modal-bootstrap de confirmação ao mesmo tempo?

Não coloquei nenhum javascript.

Fico no aguardo, obrigado desde já.

Se coloco esse script:

<script>$(document).ready(function() {    $('#myModal3').modal();});</script>

O modal abre todo momento que atualizarem a página.

darkstrikerd · 24 de junho de 2015

Rafael,

Nesse caso a saída mais simples seria criar uma página para o modal, e continuar usando teu script que chama ele quando a página é carregada. Assim, quando o script php gravar os dados ele redireciona para a página de confirmação.

Outra alternativa, seria usar Ajax, e disparar o método modal() ao finalizar o request.

Espero ter ajudado.