I am trying to build a messaging app in php and javascript languages
But I have a problem, which is that when I linked the index file with the signup.js file
And when I opened the file in a local host, I was exposed to this problem: Uncaught TypeError: e.preventDefult is not a function
(I tried to modify the function in the java file, but the browser does not accept the modification, no matter how much I update the file, I do not know why and how I can solve the problem)
JAVASCRIPT CODE
const form = document.querySelector(".signup form"),
continueBtn = form.querySelector(".button input");
form.onsubmit = (e)=>{
e.preventDefault(); //formun gönderilmesini engelleme
}
continueBtn.onclick = () =>{
let xhr = new XMLHttpRequest(); //creating XML object
xhr.open("POST" , "php/signup.php", true);
xhr.onload = ()=>{
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
let data = xhr.response;
console.log(data);
}
}
}
xhr.send();
}
PHP CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viweport" content="width=device-width, initial-scale=0.1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>OnlineMesajlaşmaUygulaması</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<section class="form signup">
<header>Mesajlaşma Uygulaması</header>
<form action="#">
<div class="error-txt">This is an error message!</div>
<div class="name-details">
<div class="field input">
<label>First Name</label>
<input type="text" placeholder="First Name ">
</div>
<div class="field input">
<label>Last Name</label>
<input type="text" placeholder="Last Name ">
</div>
</div>
<div class="field input">
<label>Email Address</label>
<input type="email" placeholder="Enter your email ">
</div>
<div class="field input">
<label>Password</label>
<input type="password" placeholder="Enter new password ">
<i class="fas fa-eye"></i>
</div>
<div class="field image">
<label>Select Image</label>
<input type="file">
</div>
<div class="field button">
<input type="submit" value="Continue to Chat">
</div>
</form>
<div class="link">Alredy Signed up?<a href="#">Login now</a> </div>
</section>
</div>
<script src="javascript/pass-show-hide.js"></script>
<script src="javascript/signup.js"></script>
</body>
</html>
