I need help with alert() of js , in which I'm returning some values just information for the user.
Today I'm only returning alert() , however I've been searching and found some alternatives (modal, bootbox, etc ...), but I had difficulty working with both.
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>"; You can not customize alert , but you can use SweetAlert .
Just add jQuery and SweetAlert to your html :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="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><scriptsrc="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>You can use a box that simulates an alert without using libraries. The box is as shown below, and you can customize as you like:
ClickingOKwillredirectyoutothepagethatyouputintheonclickbuttonattribute.
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);
} There is no way to customize a javascript alert, but you can use Ajax with PHP and jQuery, and instead of displaying a modal alert, a great one I recommend is bootstrap .
The code is all commented out
<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><scriptsrc="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://pt.stackoverflow.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://pt.stackoverflow.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>
You can also redirect automatically on 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><scriptsrc="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://pt.stackoverflow.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 it requires the following page:
validProtocol.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");
}
?>