Hello guys. I am a beginner at coding. I have very small knowledge of php . I have created a webpage containing a form. When the form is submitted a mail needs to be send via phpmailer to a specific mail , and when there are errors the form can not be submitted. The problem that I am facing is that when I click on submit the form and the page is refreshing and I am loosing my data. I know that it has to smth to do with JavaScript but I do not know how fix it.
<pre><?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'vendor/phpmailer/phpmailer/src/Exception.php';
require 'vendor/phpmailer/phpmailer/src/PHPMailer.php';
require 'vendor/phpmailer/phpmailer/src/SMTP.php';
$errors = array();
if (isset($_POST["submit"])) {
if (empty($_POST["name"])) {
$errors['name'] = 'Please enter name';
}
if (empty($_POST["email"])) {
$errors['email'] = 'Please enter email';
} elseif (!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
$errors['email'] = 'Invalid email format';
}
if (empty($_POST["phone"])) {
$errors['phone'] = 'Please enter phone number';
}
if (empty($_POST["subject"])) {
$errors['subject'] = 'Please enter subject';
}
if (empty($_POST["message"])) {
$errors['message'] = 'Please enter message';
}
if (empty($errors)) {
try {
$mail = new PHPMailer(true);
$mail->isSMTP();
$mail->Host = 'smtp-relay.brevo.com';
$mail->SMTPAuth = true;
$mail->CharSet = 'UTF-8';
$mail->Username = 'pcelarnikdanevi@gmail.com';
$mail->Password = 'dLFZwc4KHas6QRmU';
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
$mail->Port = 587;
$mail->addAddress('pcelarnikdanevi@gmail.com');
$mail->setFrom($_POST['email']);
$mail->addReplyTo($_POST['email']);
$mail->isHTML(true);
$mail->Subject = $_POST["subject"];
$mail->Body = "This is the message from " . $_POST["message"];
echo "Before sending email.<br>";
$mail->send();
echo "Email sent successfully!<br>";
} catch (Exception $e) {
echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}<br>";
}
} else {
echo "Form not submitted.<br>";
}
}
?>
<pre> <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="b-form__inputWrap">
<label for="name">Име</label>
<input name="name" id="name">
<?php
if (isset($errors['name'])) {
echo "<div class='error'>{$errors['name']}</div>";
}
?>
</div>
<div class="b-form__inputWrap">
<label for="email">Е-маил адреса</label>
<input name="email" id="email">
<?php
if (isset($errors['email'])) {
echo "<div class='error'>{$errors['email']}</div>";
}
?>
</div>
<div class="b-form__inputWrap">
<label for="phone">Телефонски број</label>
<input name="phone" id="phone" placeholder="+389">
<?php
if (isset($errors['phone'])) {
echo "<div class='error'>{$errors['phone']}</div>";
}
?>
</div>
<div class="b-form__inputWrap">
<label for="subject">Наслов</label>
<input name="subject" id="subject">
<?php
if (isset($errors['subject'])) {
echo "<div class='error'>{$errors['subject']}</div>";
}
?>
</div>
<div class="b-form__inputWrap">
<label for="message">Порака</label>
<textarea name="message" id="message" placeholder="Внесета ја вашата порака"></textarea>
<?php
if (isset($errors['message'])) {
echo "<div class='error'>{$errors['message']}</div>";
}
?>
</div>
<button class="b-form__btn" type="submit" name="submit">Испрати</button>
</form>
What I have tried:
I have tried this .
<pre>document.addEventListener('DOMContentLoaded', function () {
var form = document.querySelector('form');
form.addEventListener('submit', function (event) {
event.preventDefault();
var formData = new FormData(form);
fetch('./contact.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
console.log('Success:', data.message);
} else {
console.error('Error:', data.message);
}
})
.catch(error => {
console.error('Error:', error);
});
});
});
But this producing an error and not sending an email <pre>contactUs.js:165 Error: SyntaxError: Unexpected token '<', "
<!DOCTYPE "... is not valid JSON