I need to develop a system in which when filling in the client's registry, be checked if the registered email already exists in the database, and if it already exists, that inform the user (via Ajax) that it already has this and -mail, and otherwise make the normal submission.
But I do not want to have to click Send first, then know if it exists or not ... Is there any way to work this out?
An interesting way to do this is when filling in the e-mail field you use the change method of jQuery to send an Ajax.
In PHP it will make a select checking if this email exists in the database, and if it exists, you can show a message that the email already exists in success of Ajax.
Example:
var email = $("#email");
email.change(function() {
$.ajax({
url: 'teste.php',
type: 'POST',
data: email.val(),
dataType: 'json',
success: function(data) {
console.log(data);
if (data.email) { // se existir
$("#resposta").append('Ja existe um usuario cadastrado com este email');
}
},
error: function() {
$("#resultado").show().fadeOut(5000);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' id='email'>
<div id='resposta'></div> In the php test just returning true to see if the ajax return is working, after that you can do select and put the appropriate return:
$output = true; echo json_encode($output);
I know this POST is long, but here's one thing that might help you, you could simulate sending the form with a div or button as a submit button, follow the idea below:
$(document).ready(function(){
$('#bs-em .button').on('click', function(){
var email = $('#email').val();
//Envia o valor de email através do método POST para a página verify
//para verificar se o email já existe, caso exista ele retorna falso
//através do parâmetro 'e' da função, se não existe ele retorna true,
//aí é só comparar esses valores, e caso seja true, você usa o método submit()
//para poder submeter o formulário a página insert.php. Você também pode usar $.ajax.
$.post('configs/verify.php', {email: email}, function(e){
//Então você faz uma comparação de valores, entre false e true
if(e == false){
alert("Desculpe, o email informado já existe.");
}else{
$('#bs-em').submit();
}
});
});
});
//O código JQuery está um pouco genérico, pq estou fazendo diretamente
//pelo pt.stackoverflow, então não pude testar o código ainda, caso der algum erro,
//me avisa, provavelmente pode dar em duas coisas, ou na forma que fiz a comparação
//do parâmetro 'e', ou então o if dentro da função $.post, por isso eu queria testar,
//mas qualquer coisa me avisem, a ideia é mais ou menos essa, verificar se existe
//antes de submeter o formulário*{
margin: 0;
padding: 0;
}
body{
background-color: #333;
}
form{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 300px;
height: 100px;
background-color: #dcdcdc;
padding: 8px;
box-shadow: 2px 2px 6px 0;
}
form input[type=text]{
border: 0;
width: 284px;
height: 30px;
font-family: arial, sans-serif;
font-size: 14px;
padding: 7px;
}
form .button{
width: 130px;
height: 35px;
background-color: #45349d;
display: flex;
align-items: center;
justify-content: center;
font-family: arial, sans-serif;
font-size: 14px;
color: #fff;
cursor: pointer;
margin-top: 7px;
box-shadow: 2px 2px 4px 1px #222;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><formaction="insert.php" method="post" id="bs-em">
<input type="text" name="email" class="email" id="email" placeholder="Inserir E-mail aqui" />
<div class="button">ENVIAR</div>
</form>I hope I have helped People! Thanks.