1

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 Onload

window.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;

}

}

4
  • 1
    Você precisa usar AJAX, veja se esta resposta lhe ajuda...pt.stackoverflow.com/questions/163498/…
    – MagicHat
    Commented 7/01/2017 às 17:13
  • A..........j.........a..........x Commented 7/01/2017 às 17:34
  • Não precisa de ajax necessário. Basta replicar o código da div na resposta.
    – mau humor
    Commented 7/01/2017 às 17:50
  • Eu to puxando de uma action externa, os scipts não estao no mesmo doc Commented 7/01/2017 às 18:02

1 Resposta 1

4

Envia os dados do form sem refresh e com "validação"; Captura a resposta do php em resp e preenche a div; Mostra o botão de refresh para renovar o form

<script>
$(function () {
    $('#refresh').click(function () {
        window.location = window.location;
    });
    // Comportamento do botao de envio do FORM
    $('#enviar').click(function () {
        if(validar() === true){
            // Se a validacao passar, carrega os dados do FORM e envia
            $.post(
                $("#form_pergunta").attr("action"),// Captura o ACTION do FORM
                $("#form_pergunta").serialize() // Captura os campos do FORM 
            )
            // Se enviar com sucesso, retorna a resposta do PHP
            .done(function (resp) {
                $("#success").attr('class','alert alert-success');
                $("#success").html(resp); //Preenche a DIV com a resp
                $('#success').show(); //Mostra a DIV
                $("#form_pergunta input").prop("disabled", true);
                $("#form_pergunta select").prop("disabled", true);
                $('#enviar').hide(); //oculta o botao de envio
                $('#refresh').show(); //Mostra o botao de refresh
            })
            // Se o envio falhar, retorna uma msg de erro
            .fail(function (resp) {
                $("#success").attr('class','alert alert-danger'); //Muda o CSS da DIV
                $("#success").html('Falha no envio!'); //Preenche a DIV com a msg
                $('#success').show(); //Mostra a DIV
            });
        } else {

        }
    });
});
// Validacao do FORM ao enviar
function validar() {
    var passou = true;
    if ($('#pergunta').val() === "") {
        $('#valida_pergunta').show();
        passou = false;
    } else {
        $('#valida_pergunta').hide();
    }
    if ($('#resposta').val() === "") {
        $('#valida_resposta').show();
        passou = false;
    } else {
        $('#valida_resposta').hide();
    }
    if ($('#desafio').val() === "") {
        $('#valida_desafio').show();
        passou = false;
    } else {
        $('#valida_desafio').hide();
    }
    return passou;
}
</script>
10
  • A parte de envio do form e que evita o envio com Enter eu n entendi muito bem, eu vi alguns codigos como esse aqui ó: pt.stackoverflow.com/questions/174883/… Commented 7/01/2017 às 20:12
  • Eu tentei usar e não consegui, o meu problema não está sendo validar ou enviar, eu só quero que ao enviar com sucesso os dados para o banco, ele me de um retorno na div de sucesso. ou pelo menos pegue o echo do php e me jogue nessa div. Commented 7/01/2017 às 20:13
  • Mas é exatamente isso que esse código faz. Qual é a sua dúvida? Commented 7/01/2017 às 20:14
  • Ok, acho que o erro foi meu, vou testar novamente, pera ai. Commented 7/01/2017 às 20:17
  • eu fiz o código colocando os dados do meu HTML, só que agora ele me gera um novo form quando eu clico pra enviar. Commented 7/01/2017 às 20:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .