Eu tenho uma div no html, ela está com display none, eu preencho o form e os dados vão para um arquivo .php e o mesmo me da um echo dizendo que os dados foram inseridos no banco, só que eu queria que quando o php desse esse echo essa div que eu tenho pegasse a mensagem e exibisse.
HTML:
<form id="form_pergunta" action="php/envia.php" Method="POST">
<!--pergunta!-->
<label for="input">Pergunta</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></span>
<input type="text" name="pergunta" data-placement="bottom" class="form-control" placeholder="Ex: Quem é Jeová, com base no Biblia Ensina Pg. 10, Cap: 5?" aria-describedby="basic-addon1">
</div><br>
<div class="alert alert-danger" id="valida_pergunta" role="alert">
<span class="glyphicon glyphicon-info-sign"></span> Preencha o campo Pergunta
</div>
<!--pergunta!-->
<!--resposta!-->
<label for="input">Resposta:</label>
<div class="input-group">
<span class="input-group-addon" ><span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span></span>
<input type="text" name="resposta" class="form-control" placeholder="Ex: É Deus." aria-describedby="basic-addon1">
</div><br>
<div class="alert alert-danger" id="valida_resposta" role="alert">
<span class="glyphicon glyphicon-info-sign"></span> Preencha o campo Resposta
</div>
<!--resposta!-->
<!--Desafio!-->
<label for="input">Desafio:</label>
<div class="input-group">
<span class="input-group-addon" ><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span></span>
<input type="text" name="desafio" class="form-control" placeholder="Ex: Fique 10 segundos pulando num pé só." aria-describedby="basic-addon1">
</div><br>
<div class="alert alert-danger" id="valida_desafio" role="alert">
<span class="glyphicon glyphicon-info-sign"></span> Preencha o campo Desafio
</div>
<!--Desafio!-->
<div class="form-group">
<label for="select">Selecione a Dificuldade</label>
<select class="form-control" name="dificuldade">
<option value="1">Fácil</option>
<option value="2">Médio</option>
<option value="3">Difícil</option>
</select>
</div>
<center><input type="button" class="btn btn-primary btn-lg" value="Enviar" id="enviar"></center><br><br>
</form>
PHP:
<?php
$pergunta = $_POST ['pergunta'];
$resposta = $_POST ['resposta'];
$dificuldade = $_POST ['dificuldade'];
$desafio = $_POST ['desafio'];
$msg;
switch ($dificuldade) {
case '1':
$dificuldade = "Facil";
break;
case '2':
$dificuldade = "Medio";
break;
case '3':
$dificuldade = "Dificil";
break;
}
try{
$conexao = new PDO ("mysql:host=localhost;dbname=teocratico;charset=utf8","root","");
} catch (PDOException $erro){
echo "Não foi possível conectar ao banco ". $erro->getMessage();
}
try {
$insert = $conexao-> prepare ("INSERT INTO perguntas (pergunta, resposta, dificuldade, desafio) VALUES (
:pergunta,
:resposta,
:dificuldade,
:desafio
)");
$insert-> bindParam (':pergunta', $pergunta);
$insert-> bindParam (':resposta', $resposta);
$insert-> bindParam (':dificuldade', $dificuldade);
$insert-> bindParam (':desafio', $desafio);
$insert-> execute();
$msg = "Pergunta enviada com Sucesso";
echo $msg;
} catch (Exception $erro) {
echo "Não foi possivel enviar os dados" . $erro->getMessage();
}
?>
JAVASCRIPT QUE VALIDA O FORM:
//Executar todo nosso JS quando o DOM estiver pronto. Por isso o Onloadwindow.onload = function(){
var button = document.getElementById("enviar"); // pega o valor do botao var form = document.getElementById("form_pergunta"); //pega o form da pergunta todo button.addEventListener("click", function(e){ if(validar(form)) form.submit(); });/Com acesso a isso, podemos executar uma função a cada vez que o botão for clicado, para isso vamos usar o addEventListener() no botão e colocar a seguinte lógica: CASO A FUNÇÃO VALIDAR RETORNE VERDADEIRA, DÊ UM SUBMIT NO FORMULÁRIO/
//Agora a função validar. Esta irá receber um parâmetro que é o próprio formulário que recuperamos acima. function validar (form_pergunta){ var pergunta = form_pergunta.pergunta.value; var resposta = form_pergunta.resposta.value; var desafio = form_pergunta.desafio.value; var passou = true; if(pergunta ==""){ document.getElementById("valida_pergunta").style.display = "flex"; passou = false; } else { document.getElementById("valida_pergunta").style.display = "none"; } if (resposta == "") { document.getElementById("valida_resposta").style.display ="flex"; passou = false; } else { document.getElementById('valida_resposta').style.display = "none"; } if (desafio ==""){ document.getElementById("valida_desafio").style.display = "flex"; passou = false; } else { document.getElementById("valida_desafio").style.display = "none"; } return passou;
}
}