Customizing the Alert

Question

I need some help regarding alert() of js, in which I am returning some information-only values to the user.

Today I’m returning only one alert(), but I did some research and found some alternatives (modal, bootbox, etc...), but I had difficulty working with both of them.

I would like a solution.

I’m using it this way:

echo "<script>alert('Protocolo incorreto, favor informar um valido.');
	window.location.replace('consulta.php');
</script>";

Answer 1

Unable to customize the alert, but you can use the Sweetalert.

Just add the jQuery and the SweetAlert in his HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Then just use:

swal("Hello world!");

$("#btn1").click(function() {
  swal("Mensagem!");
});

$("#btn2").click(function() {
  swal("Mensagem!", "Corpo da Mensagem");
});

$("#btn3").click(function() {
  swal("Mensagem de Erro!", "Corpo da Mensagem", "error");
});

$("#btn3").click(function() {
  swal({
    title: "Atenção!",
    text: "Clique no botão para fechar!",
    icon: "warning",
    button: "Clique Aqui!",
  })
});

$("#btn4").click(function() {
  swal({
    title: "Atenção!",
    text: "Clique no botão para ser redirecionado!",
    icon: "warning",
    buttons: true,
  }).then(function(result) {
    if (result) {
      alert("Coloque aqui o window.location.href");
    } else {
      alert("Você não será redirecionado pois clicou em \"Cancel\"");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<button id="btn1">Forma 1</button>
<button id="btn2">Forma 2</button>
<button id="btn3">Forma 3</button>
<button id="btn4">Forma 4 - Callback</button>

Answer 2

There is no way to customize a javascript Alert, but you can use Ajax with PHP and jQuery, and instead of alert present a modal, an excellent one I recommend is the bootstrap.

The code is all commented

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

<script language="javascript">

$(document).ready(function(){
  // tudo que estiver aqui poderá ser executado, após o documento ser carregado

  $("#form").on("submit", function(e){
    // está função diz, que quando esse formulario for enviado, tudo oque estiver aqui será executado.
    e.preventDefault(); // está função é usada pro form não ir para outra pagina, pois o evento padrão de um formulario é ir para outra pagina.
    var data = $("#form").serialize(); // a function serialize serve para pegar todos os valores que foram colocados nos inputs do form
    $.ajax({
      // está é a função ajax, do jquery, ela será usada para fazer a requisição assícrona.
      url: "validaProtocolo.php", // aqui vai a url da requisição, nela é colocado o valor do atributo action da tag form
      data:  data, // aqui vai os dados para o servidor, geralmente é os inputs do form
      method: "POST", // aqui vai o método da requisição, acho que você já sabe sobre o get e post !
      dataType: "json", // aqui será o tipo de resposta que vamos receber, será no formato json, um formato simples e mais usado.
      success: function(data){
        // essa é a function success, ela ira ser executada se a requisição for feita com sucesso
         // a variavel data, veio do parametro da function, e será a resposta do php.

         if (data=="Protocolo Invalido"){
            $("#myModalError").modal('show');
         }else{
            $("#myModalSucess").modal('show');
                /*
                se o usuario clicar no button close do modal
                ou em qualquer parte do documento será redirecionado
                */
                $(document).click(function(){
                    window.location.href = "http://answall.com";
                });
         }
      },
      error: function(){
        // essa é funcion error, ela será executada caso ocorrer algum erro na requisição
        alert("erro na requisição");
      }
    });
  });

});

</script>

<fieldset style="width:50%; margin: 0px auto; ">
    <legend>Colocando PONTO no CPF</legend>
    <form id="form">
        <label for="protocolo">Protocolo</label>
        <input type="number" name="protocolo" placeholder="Numero do protocolo" required />
        <input type="submit" value="ENVIAR" name="button"/><br/><br/>
    </form>
</fieldset>

<!-- 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>Tarefa Adicionada com sucesso. </p>
                <p class="text-warning"><small>Sucesso Sucesso Sucesso Sucesso Sucesso Sucesso .</small></p>
            </div>
            <div class="modal-footer">
                <button onclick="location.href='http://answall.com';" type="button" class="btn btn-success waves-effect waves-light" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- 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>Protocolo incorreto, favor informar um valido. </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>

It is also possible to redirect automatically in case of success:

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

<script language="javascript">

$(document).ready(function(){
  // tudo que estiver aqui poderá ser executado, após o documento ser carregado

  $("#form").on("submit", function(e){
    // está função diz, que quando esse formulario for enviado, tudo oque estiver aqui será executado.
    e.preventDefault(); // está função é usada pro form não ir para outra pagina, pois o evento padrão de um formulario é ir para outra pagina.
    var data = $("#form").serialize(); // a function serialize serve para pegar todos os valores que foram colocados nos inputs do form
    $.ajax({
      // está é a função ajax, do jquery, ela será usada para fazer a requisição assícrona.
      url: "validaProtocolo.php", // aqui vai a url da requisição, nela é colocado o valor do atributo action da tag form
      data:  data, // aqui vai os dados para o servidor, geralmente é os inputs do form
      method: "POST", // aqui vai o método da requisição, acho que você já sabe sobre o get e post !
      dataType: "json", // aqui será o tipo de resposta que vamos receber, será no formato json, um formato simples e mais usado.
      success: function(data){
        // essa é a function success, ela ira ser executada se a requisição for feita com sucesso
         // a variavel data, veio do parametro da function, e será a resposta do php.

         if (data=="Protocolo Invalido"){
            $("#myModalError").modal('show');
         }else{
            window.location.href = "http://answall.com";
         }
      },
      error: function(){
        // essa é funcion error, ela será executada caso ocorrer algum erro na requisição
        alert("erro na requisição");
      }
    });
  });

});

</script>

<fieldset style="width:50%; margin: 0px auto; ">
    <legend>Protocolo válido 1234</legend>
    <form id="form">
        <label for="protocolo">Protocolo</label>
        <input type="number" name="protocolo" placeholder="Numero do protocolo" required />
        <input type="submit" value="ENVIAR" name="button"/><br/><br/>
    </form>
</fieldset>

<!-- 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>Protocolo incorreto, favor informar um valido. </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>

In both cases requires the following page:

validationProtocolo.php

<?php
$protocolo = $_POST['protocolo'];

/*
código para validar protocolo
exemplos:

 1 -um select no banco where coluna = $protocolo
    if ($row[0] > 0) {
       echo json_encode("Protocolo OK");
   }else{
       echo json_encode("Protocolo Invalido");
   }

 2- se um valor existe em um array
 */
       //utilizado nos exemplos funcionais
       $protocolosValidos = array("1234", "5678", "9012", "3456");
       if (in_array($protocolo, $protocolosValidos)) { 
          echo json_encode("Protocolo OK");
       }else{
          echo json_encode("Protocolo Invalido");
       }


?>

Answer 3

You can use a box that simulates a Alert without using libraries. The box is as shown below, and you can customize as you wish:

By clicking on OK, will be redirected to the page you put in the attribute onclick button.

Script + CSS:

let msg_alerta = '<div class="alert-box">'
+'<h1>Aviso</h1>'
+'<p>Protocolo incorreto, favor informar um valido.</p>'
+'<input style="padding:5px 10px;" type="button" value="OK" onclick="this.parentNode.outerHTML=\'\';window.location.href=\'consulta.php\';" />'
+'</div>';

document.write(msg_alerta);

.alert-box{
   display:block;
   position:fixed;
   width:200px;
   padding:5px 20px 20px;
   background:#ddd;
   border:1px solid #999;
   text-align:center;
   transform:translate(-50%,-50%);
   top:50%;
   left:50%;
   z-index:99999;
   -webkit-box-shadow: 0px 0px 33px -6px rgba(0,0,0,0.59);
   -moz-box-shadow: 0px 0px 33px -6px rgba(0,0,0,0.59);
   box-shadow: 0px 0px 33px -6px rgba(0,0,0,0.59);
}