2

Galera estou com problema, onde o meu formulário está sendo enviando pro banco mas no alert aparece alert("erro ao enviar formulário");.

    <?php 

if(!empty($_FILES['uploaded_file'])){
    $username = 'root';
    $password = '';
    $connection = new PDO( 'mysql:host=localhost;dbname=nise', $username );



    $query = "INSERT INTO denuncia (descricao, imagem, id_usuario, qual_descricao,id_bloco, id_denuncia_oque) 
          VALUES (:descricao, :imagem, :id_usuario, :qual_descricao, :id_bloco, :id_denuncia_oque)";



    $statement = $connection->prepare($query);





    $path = "img_denuncia/";
    $path = $path . basename( $_FILES['uploaded_file']['name']);
    if(move_uploaded_file($_FILES['uploaded_file']['tmp_name'], $path))



    $valores = array();
    $valores[':descricao'] = $_POST['descricao_denuncia'];
    $valores[':imagem'] = $_FILES['uploaded_file']['name'];
    $valores[':id_usuario'] = 2;
    $valores[':qual_descricao'] = $_POST['qual_descricao'];
    $valores[':id_bloco'] = $_POST['bloco_denuncia'];
    $valores[':id_denuncia_oque'] = $_POST['id_denuncia_oque'];



    if( $result = $statement->execute($valores))
        {
         echo 1; // dados enviados com sucesso
        }
        else
        {
        // na verdade o else não é necessário mas se preferir pode colocar
         echo 0; // erro ao tentar enviar dados 
        }




}
?>

Aqui está o ajax

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    // evento de "submit"
    $("#b_enviar").click(function (e) {
        // parar o envio para que possamos faze-lo manualmente.
        e.preventDefault();
        // captura o formulário
        var form = $('#caixa')[0];
        // cria um FormData {Object}
        var data = new FormData(form);
        // processar
        $.ajax({
            type: "POST",
            url: "http://localhost/nise/aluno.php", //acerte o caminho para seu script php
            data: data,
            processData: false, // impedir que o jQuery tranforma a "data" em querystring
            contentType: false, // desabilitar o cabeçalho "Content-Type"
            //cache: false, // desabilitar o "cache"
            // manipular o sucesso da requisição
        }).done(function(retorno){
              if(retorno==1)
              {
                alert("Formulário enviado com sucesso");
              }
               else
              {
                alert("erro ao enviar formulário");

              }
        });
    });
});
</script>

Aqui está meu formulário

 <!--Caixa de texto-->
  <form id="caixa" class="center-block row col-xl-6" enctype="multipart/form-data" name="formulario"  method="POST" action="aluno.php">
    <br>
      <div class="row p-0 no-margin col-12 col-sm-12  col-md-12 col-lg-10 col-xl-12" >
        <div class="form-group">
          <label for="sel1">Bloco:</label>
          <select class="form-control " name="bloco_denuncia" id="bloco" required="required" placeholder="ex: Bloco 3" >
            <option value="" disabled selected>Ex: Computação</option>
            <option value="1">Bloco - Computação</option>
            <option value="2">Bloco - Mecânica</option>
            <option value="3">Bloco - Química</option>
            <option value="4">Bloco - Administrativo</option>
            <option value="5">Biblioteca </option>
            <option value="6">Ginásio </option>
            <option value="7">Auditório</option>
            <option value="0">Outros</option>
          </select>
          </div>
      <div class="form-group">
          <label for="sel1">O que:</label>
          <select select="required" class="form-control" name="id_denuncia_oque" id="sel1" required="required" >
            <option value="" disabled selected>Ex: Laboratório</option>
            <option value="1">Sala</option>
            <option value="2">Banheiro(Térreo)</option>
            <option value="3">Banheiro(Superior)</option>
            <option value="4">Laboratório</option>
            <option value="5">Coordenação</option>
            <option value="6">Gabinete</option>
            <option value="7">Telecom</option>
            <option value="8">Outros</option>

          </select>
          </div>

            <div class="form-group">
              <label for="usr">Qual:</label>
              <input type="text" class="form-control" id="usr" name="qual_descricao" placeholder="ex: ar-condicionado " required="required" >
            </div>

      </div>
       <textarea  id="form-control"class="noresize  col-12 col-sm-12 mb-12 col-md-12 col-lg-10 col-xl-12 " name="descricao_denuncia" placeholder="Faça sua denúncia aqui... " id="denuncia" rows="13" required="required" autofocus="autofocus">
       </textarea>

       <br>
       <div class="row p-0 no-margin col-12 col-sm-12  col-md-12 col-lg-10 col-xl-12">  
            <div class="botao p-0 no-margin col-6 col-sm-6 mb-3 col-md-6 col-lg-2 col-xl-10">
           <label class="file-upload btn btn-primary">
                Escolha o arquivo... <input  type="file" name="uploaded_file"/ accept="image/*">
            </label>  
           <small class="form-text text-muted">As suas mensagens não serão totalmente anônimas.</small>
            </div>
          <div class="botao p-0 no-margin col-6 col-sm-6 mb-3 col-md-6 col-lg-10 col-xl-2 text-right ">
               <input id="b_enviar" type="submit" class="btn btn-success" value="Enviar" name="enviar"/>
          </div>
      </div>
    </form>
    <br>
    <!--Fim da caixa-->

Se tiver solução em javascript pode mandar ai

2
  • já tentou usar print no lugar de echo? Commented 6/10/2018 às 14:14
  • Sim, não da certo. Commented 6/10/2018 às 14:29

2 Respostas 2

3

Se você quiser enviar todos os campos (possíveis) do formulário, com ajax, basta utilizar: new FormData()

substitua seu script por:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    // evento de "submit"
    $("#b_enviar").click(function (e) {
        // parar o envio para que possamos faze-lo manualmente.
        e.preventDefault();
        // captura o formulário
        var form = $('#caixa')[0];
        // cria um FormData {Object}
        var data = new FormData(form);
        // processar
        $.ajax({
            type: "POST",
            url: "aluno.php", //acerte o caminho para seu script php
            data: data,
            processData: false, // impedir que o jQuery tranforma a "data" em querystring
            contentType: false, // desabilitar o cabeçalho "Content-Type"
            //cache: false, // desabilitar o "cache"
            // manipular o sucesso da requisição
        }).done(function(retorno){
              if(retorno==1)
              {
                //alert("Formulário enviado com sucesso");
                $("#myModalSucess").modal('show');
              }
               else
              {
                //alert("erro ao enviar formulário");
                $("#myModalError").modal('show');

              }
        });
    });
});
</script>

Para usar modal ao invés de alert

1 - Use as bibliotecas

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2 - No script substitua os alerts pelas linhas que invocam os modais (veja no script acima)

3 - cole o código abaixo preferencialmente antes da tag de fechamento </body>

4 - Para saber mais sobre modal clique aqui

<!-- Modal HTML Erro -->
<div id="myModalError" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Erro</h4>
            </div>
            <div class="modal-body">
                <p class="text-warning"><small>erro ao enviar formulário </small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger waves-effect waves-light" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

 <!-- Modal HTML Sucesso -->
<div id="myModalSucess" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Sucesso </h4>
            </div>
            <div class="modal-body">
                <p>Tarefas realizadas com sucesso. </p>
                <p class="text-warning"><small>Formulário enviado com sucesso</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success waves-effect waves-light" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div> 

BONUS:

para que o placeholder do textarea funcione você deve retirar os espaços, quebra de linha etc...de dentro do textarea

veja como está (tag de fechamento na linha de baixo)

   <textarea  ....required="required" autofocus="autofocus">
   </textarea>

veja como deve ser (tag de fechamento na mesma linha e sem espaços)

   <textarea  ....required="required" autofocus="autofocus"></textarea>

O que é AJAX?

AJAX, acrônimo de Asynchronous JavaScript and XML, é uma técnica de desenvolvimento Web que permite a criação de aplicações mais interativas. Um dos principais objetivos é tornar as respostas das páginas Web mais rápidas pela troca de pequenas quantidades de informações com o servidor Web, nos bastidores.

AJAX é carregar e renderizar uma página, utilizando recursos de scripts rodando pelo lado cliente, buscando e carregando dados em background sem a necessidade de reload da página.

8
  • Tem um problema, agora só está aparecendo alert("erro ao enviar formulário"); quando envio, tenho que adicionar algo no form ou no php ? Commented 8/10/2018 às 13:36
  • Sim, está dando tudo certo enviar os dados pro banco, mas era pra aparecer no alert("Formulário enviado com sucesso");... Eu não mexi no código, eu apenas copiei e colei. Commented 8/10/2018 às 14:06
  • Se você quiser eu posso posta o arquivo atualizado. Commented 8/10/2018 às 14:10
  • Pronto, editei no post... Commented 8/10/2018 às 14:20
  • 1
    No código não há erro, tanto no seu editado quanto o da minha resposta. Deve ser algo local.
    – user60252
    Commented 8/10/2018 às 23:36
2

Se retorna 1, é porque ele está entrado no if do arquivo PHP, o que você pode fazer é colocar uma "adaptação técnica" naquele próprio if, onde o echo irá mostrar um alert do JS, caso ocorra um erro, ele voltará para a página anterior, mantendo os dados:

if( $result = $statement->execute($valores)){
    echo "<script>alert('Dados enviados com sucesso!');location.href = 'index.php';</script>";
} else {
    echo "<script>alert('Ocorreu um erro no envio!');history.back();</script>";
}
4
  • Cara deu certo aqui, mas quando da errado ele não está voltando com os dados, poderia me ajuda nisso agradeço. Commented 6/10/2018 às 17:08
  • Agora deu certo. mas tem como aparecer esse alert sem que a pagina fique em branco ? Commented 6/10/2018 às 17:18
  • 1
    as alterações estão na resposta, basta colocar o link para onde deseja redirecionar =D Commented 6/10/2018 às 17:59
  • 1
    Nessa sua solução, você deveria dizer que NÂO HÁ necessidade do uso de AJAX, pode retirar o AJAX que vai funcionar da mesma forma porque o formulário está sendo enviado pelo action do form do HTML e o AJAX está ali de bobeira.
    – user60252
    Commented 7/10/2018 às 2:44

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 .