for me at the beginning jQuery for JS was very quiet, I suggest you take a look.
https://jquery.com and https://jqueryui.com
In your case I would do:
a separate js file, which would be loaded at the end of your html,
in this js file, would use jQuery to perform a $.ajax() call, on a route that just does the login check and returns a json with the message (no HTML in that file in the case).
<!-- arquivo.html -->
<!-- adicionar em <head> (inclui o jquery e jquery ui) -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- adicionar na tag <form> (id para jquery utilizar) -->
<form id="idForm"></form>
<!-- adicionar html do modal, é com um P sem mensagem mesmo, pois o ajax que irá carragar a mensagem -->
<div id="modalMensagem"><p id="mensagem"></p></div>
<?php
//arquivo.php
$json = ['error' => ''];
//validações de script, qualquer erro coloque o erro da seguinte forma:
switch($evento) {
case 1:
$json['error'] = 'Login e senha inválidos';
break;
case 2:
$json['error'] = 'Efetue o login para poder acessar a página!';
}
/* Verifique se sua string é UTF-8, caso contrario json_encode não funcionará.
* Para saber isto teste uma string com Ç, se retornar um json_encode vazio, é porque os caracteres não são UTF8.
* Utilize: utf8_encode() na string. $json['error'] = utf8_encode('Mensagem de erro com Ç');
*/
header('Content-Type: application/json'); //define o header como json pra que é o que o jquery espera no ajax com dataType: json
echo json_encode($json); //exibe o json no body
//ARQUIVO.js
$(document).ready(function(){ //jQuery, execute isto após a pagina ser carregada
$("#idForm").submit(function(event)){ //tratamento do evento submit do form com id="idForm"
event.preventDefault(); //informa que o evento default não ocorrerá
var request = $.ajax({ //inicia o ajax e associa a variavel request
url: $("#idForm").attr("action"), //pega o parametro action do form
method: $("#idForm").attr("method"), //pega o parametro method do form
data: $("#idForm").serialize(), //serializa o form e envia como parametro
dataType: 'json' //espera um retorno json
});
request.done(function(json){ //ao final da request com retorno HTTP 20X
if (json.error != ''){ //error foi definido no php, e json é um parametro desta função
$("#modalMensagem #mensagem").html(json.error); //adiciona a mensagem no elemento com id="mensagem" dentro do elemento com id="modalMensagem"
$("#modalMensagem").dialog({ //exibe modalMensagem como um modal
modal: true,
buttons: {
Ok: function() { //aqui é o array de botões, cada botão recebe uma function referente ao seu evento click.
$(this).dialog("close"); //define o que o botão OK faz, neste caso fecha o modal
}
});
} else {
document.location.href = 'novarota.php'; //caso não tenha mensagem de erros, ocorreu um (login?) com sucesso e deve ser redirecionado.
}
});
}
});
In the successful event of $.ajax(), you would insert the error message in some or modal done with jqueryui (this would already bring you a centralized 'Alert', but that you could style with CSS and put some buttons with events).
I also suggest taking a look at some programming patterns that apply MVC and Object Orientation. (for PHP see Zend, Laravel, Yii, Slim... Frameworks give a good foundation).
I think this is the problem, as it has keys in if, and the top of the code is html, I think it is giving problem.
– Luciano Filho