I do not want my ajax.php page to display anything when accessed by the user's browser.
AJAX.PHP
<?$nome=$_POST['nome'];$email=$_POST['email'];$senha=$_POST['senha'];if(!$nome){echo'Escrevaseunome!';}else{if(!$email){echo'Escrevaseuemail!';}else{if(!$senha){echo'Escrevasuasenha!';}else{$conn=newPDO('mysql:host=XXX;dbname=XXX','XXX','XXX',array(PDO::ATTR_PERSISTENT=>true));$exe=$conn->prepare("INSERT INTO cliente(nome, email, senha) VALUES (:nome, :email, :senha)");
$exe->bindParam(':nome', $nome);
$exe->bindParam(':email', $email);
$exe->bindParam(':senha', $senha);
$exe->execute();
echo 'Obrigado!';
}
}
}
?>
INDEX.PHP
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Laboratório Social</title>
<style>
* {
font-family: arial, sans-serif;
font-size: 18px;
font-weight: 100;
margin: auto;
cursor: default;
border: none;
}
body {
text-align: center;
margin: 0;
padding: 0;
}
input {
display: block;
outline: none;
}
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px #09f inset;
-webkit-text-fill-color: #000;
}
textarea {
outline: none;
resize: none;
}
#submit {
font-size: 32px;
margin: 10px auto;
width: 316px;
background-color: #09f;
cursor: pointer;
padding-top: 5px;
padding-bottom: 5px;
}
#nometexto {
margin: 10px auto 10px auto;
background-color: #09f;
width: 316px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 20px;
}
#emailtexto {
margin-top: 10px;
margin-bottom: 10px;
background-color: #09f;
width: 316px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 20px;
}
#senhatexto {
margin-top: 10px;
margin-bottom: 10px;
background-color: #09f;
width: 316px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 20px;
}
#nome {
background-color: #09f;
cursor: text;
padding: 10px;
width: 296px;
}
#email {
background-color: #09f;
cursor: text;
padding: 10px;
width: 296px;
}
#senha {
background-color: #09f;
cursor: text;
padding: 10px;
width: 296px;
}
#details {
margin: 10px;
}
</style>
</head>
<body>
<h4 id="nometexto">Nome</h6>
<input type="text" id="nome">
<h4 id="emailtexto">Email</h6>
<input type="email" id="email" autocomplete="off">
<h4 id="senhatexto">Senha</h6>
<input type="password" id="senha">
<input type="submit" id="submit" value="Registrar">
<p id="details"></p>
<script async defer>
document.getElementById("submit").onclick = function() {
var nome = document.getElementById("nome").value;
var email = document.getElementById("email").value;
var senha = document.getElementById("senha").value;
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("details").innerHTML = xmlhttp.responseText;
if (xmlhttp.responseText == "Obrigado!") {
document.getElementById("nome").value= "";
document.getElementById("senha").value= "";
document.getElementById("email").value= "";
}
}
}
xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("nome=" + nome + "&email=" + email + "&senha=" + senha);
};
</script>
</body>
</html>