I just started to learn js, I ran into a problem. I have a feedback form on my landing page. I need the emails to come to gmail. For this I wrote one js script which links to a php file using fetch. however I get an error in the console. and of course it doesn’t send the request
html
<form action="#" autocomplete="on" method="POST" class="form-action" id="form" enctype="multipart/form-data">
<h3 class="h3-form">Let's jump onto message</h3>
<input class="form-input _req" type="text" name="Name" placeholder="Name">
<input class="form-input _req _email" type="text" name="Email" placeholder="Email">
<textarea class="form-input _req" cols="30" rows="1" style="resize: none;" name="Message" placeholder="Your idea"></textarea>
<div class="attaching">
<div class="form-file-preview" id="formPreview"></div>
<label class="attach-label">
<input id="formFile" type="file" accept=".pdf,.doc,.docx,.jpeg,.xls,.xlsx,.jpg,.csv,.ods,.tsv" multiple data-max-size="10485760" name="file" class="hiddenInput" data-hj-allow="true">
<span class="icon-paperclip">
<img src="/img/attach.svg" alt="">
</span>
<div class="attach">Attach Files
</div>
</label>
</div>
<button class="send" type="submit">Send</button>
</form>
JS
const form = document.getElementById('form');
const sendmessage = document.getElementById('sendmessage');
form.addEventListener('submit', formSend);
async function formSend(e) {
e.preventDefault();
let error = formValidate(form);
let formData = new FormData(form);
formData.append('file', formFile.files[0]);
if (error === 0) {
sendmessage.classList.add('_sending');
let response = await fetch('sendmail.php', { \here is a problem
method: 'POST',
body: formData
});
if (response.ok) {
let result = await response.json();
alert(result.message);
formPreview.innerHTML = '';
form.reset();
sendmessage.classList.remove('_sending');
} else {
alert("Fail");
sendmessage.classList.remove('_sending');
}
}
}
function formValidate(form) {
let error = 0;
let formReq = document.querySelectorAll('._req');
for (let index = 0; index < formReq.length; index++) {
const input = formReq[index];
formRemoveError(input);
if (input.classList.contains('_email')) {
if (emailTest(input)) {
formAddError(input);
error++;
}
} else {
if (input.value === '') {
formAddError(input);
error++;
}
}
}
return error;
}
sendmail.php
<?php
use PHPMailerPHPMailerPHPMailer;
use PHPMailerPHPMailerException;
require 'PHPMailer/src/Exeption.php';
require 'PHPMailer/src/PHPMailer.php';
$mail = new PHPMailer(true);
$mail->CharSet = 'UTF-8';
$mail->setLanguage('en', 'phpmailer/language/');
$mail->IsHTML(true);
$mail->setFrom('[email protected]');
$mail->addAdress('[email protected]');
$mail->Subject = 'New Message';
$body = '<h1>Message on Site</h1>';
if(trim(!empty($_POST['Name']))){
$body.='<p><strong>Name:</strong> '.$_POST['Name'].'</p>';
}
if(trim(!empty($_POST['Email']))){
$body.='<p><strong>Email:</strong> '.$_POST['Email'].'</p>';
}
if(trim(!empty($_POST['Message']))){
$body.='<p><strong>Message:</strong> '.$_POST['Message'].'</p>';
}
if(!empty($_FILES['file']['tmp_name'])){
$filePath = __DIR__ . "/files/" . $_FILES['file']['name'];
if (copy($_FILES['file']['tmp_name'], $filePAth)) {
$fileAttach = $filePath;
$body.='<p><strong>File attached</strong>';
$mail->addAttachment($fileAttach);
}
}
$mail->Body = $body;
if(!$mail->sent()) {
$message = 'Error';
}else {
$message = "Successfully";
}
$response = ['message' => $message];
header('Content-type: application/json');
echo json_encode($response);
?>
Console error:
POST 192.168.88.21:3000/sendmail.php 404 (Not Found).
_refers to script.js:51
How do I run this file so there are no errors?