Maybe someone knows, I want to receive the data entered by the user and I use PCP as a server, but the code does not go through - " request.send(formData) ", it says " Failed to load resource: the server responded with a status of 405 (Method Not Allowed) ", what could be the reason for this behavior? I add the code:
const inputName = document.getElementById('name')
const inputTel = document.getElementById('tel')
const clickBtn = document.getElementById('submit')
const forms = document.querySelector('form')
addForm(forms)
function addForm (form){
form.addEventListener(('submit'), (e) =>{
e.preventDefault();
const statusMessage = document.createElement('div')
statusMessage.innerHTML = '';
statusMessage.innerHTML = 'Loading'
forms.append(statusMessage)
const request = new XMLHttpRequest();
request.open('POST', 'server.php');
// request.setRequestHeader('Content-type', 'multipart/form-data')
const formData = new FormData(form)
request.send(formData)
request.addEventListener(('load'), () => {
statusMessage.innerHTML = ''
if (request.status === 200) {
console.log(request.response)
statusMessage.innerHTML = 'Loading success'
} else{
statusMessage.innerHTML = 'Something went wrong'
}
})
})
}
<?php
echo var_dump($_POST);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>coffe-house</title>
<style>
body{
background-color: rgb(88, 0, 88);
display: flex;
flex-direction: column;
width: 100%;
max-width: 100vw;
min-height: 100vh;
align-items: center;
justify-content: center;
}
.forma{
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
align-items:center;
padding: 60px 0;
background-color: rgba(0, 255, 247, 0.5);
border-radius: 10px;
}
form{
display: flex;
flex-direction: column;
row-gap: 30px;
}
input{
border-radius: 5px;
outline: none;
border: none;
padding: 5px;
}
#submit{
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="forma">
<form>
<input id="name" type="text" name="name">
<input id="tel" type="tel" name="tel">
<button id="submit">Click here</button>
</form>
</div>
<script src="./index.js"></script>
</body>
</html>
