Wanted to show an alert after a form is submitted, PHP, JAVASCRIPT, HTML, AJAX

1

I'm having problems, where my form is being sent to the bank but in the alert it appears 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 
        }




}
?>

Here is ajax

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>$(document).ready(function(){//eventode"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>

Here is my form

 <!--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-->

If you have a javascript solution you can send it to

    
asked by anonymous 06.10.2018 / 15:41

2 answers

3

If you want to send all (possible) form fields, with ajax , simply use: new FormData()

Replace your script with:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>$(document).ready(function(){//eventode"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>

To use modal instead of alert

1 - Use the libraries

<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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2 - In the script replace the alerts with the lines that invoke the modal (see the script above)

3 - Paste the code below preferably before the closing tag </body>

4 - To learn more about modal click here

p>
<!-- 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:

In order for textarea placeholder to work you should remove spaces, line breaks etc ... from within textarea

  

look how it is (closing tag on the bottom line)

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

see how it should be (closing tag on the same line and no spaces)

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

What is AJAX?

AJAX, the acronym for Asynchronous JavaScript and XML, is a Web development technique that allows the creation of more interactive applications. One of the main goals is to make web page responses faster by swapping small amounts of information with the Web server behind the scenes.

AJAX is loading and rendering a page, using scripting features running on the client side, fetching and loading data in the background without the need to reload the page .

    
07.10.2018 / 00:01
1

If it returns 1, it is because it is entered in if of file PHP , what you can do is put a "technical adaptation" in that own if , where echo will show a alert of JS , if an error occurs, it will return to the previous page, holding the data:

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>";
}
    
06.10.2018 / 19:02