javascript - Error: my website Form submission fails to send
one text
first of all my level is 0 in PHP and i'm learning to make websites.
my PHP Form doesn't work, when i press send message button this error pops out "Error: Form submission failed and no error message returned from: contact.php". I don't know what the problem is.
This is html form :
<form id="contact-form" action="contact.php" method="post" data-toggle="validator" role="form" class="php-email-form">
<div class="row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
</div>
<div class="col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
</div>
</div>
<div class="form-group mt-3">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
</div>
<div class="my-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center">
<button id="submit" type="submit">Send Message</button>
</div>
</form>
This is contact.php
<?php
$receiving_email_address = 'myemail@blabla.com';
$to = 'myemail@blabla.com';
$name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_SPECIAL_CHARS);
$from = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
$subject = filter_input(INPUT_POST, 'subject', FILTER_SANITIZE_SPECIAL_CHARS);
$message = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_SPECIAL_CHARS);
if (filter_var($from, FILTER_VALIDATE_EMAIL)) {
$headers = ['From' => ($name?"<$name> ":'').$from,
'X-Mailer' => 'PHP/' . phpversion()
];
mail($to, $subject, $message."\r\n\r\nfrom: ".$_SERVER['REMOTE_ADDR'], $headers);
die('OK');
} else {
die('Invalid address');
}
echo $contact->send();
?>
this is my contact.js
(function () {
"use strict";
let forms = document.querySelectorAll('.php-email-form');
forms.forEach( function(e) {
e.addEventListener('submit', function(event) {
event.preventDefault();
let thisForm = this;
let action = thisForm.getAttribute('action');
let recaptcha = thisForm.getAttribute('data-recaptcha-site-key');
if( ! action ) {
displayError(thisForm, 'The form action property is not set!')
return;
}
thisForm.querySelector('.loading').classList.add('d-block');
thisForm.querySelector('.error-message').classList.remove('d-block');
thisForm.querySelector('.sent-message').classList.remove('d-block');
let formData = new FormData( thisForm );
if ( recaptcha ) {
if(typeof grecaptcha !== "undefined" ) {
grecaptcha.ready(function() {
try {
grecaptcha.execute(recaptcha, {action: 'php_email_form_submit'})
.then(token => {
formData.set('recaptcha-response', token);
php_email_form_submit(thisForm, action, formData);
})
} catch(error) {
displayError(thisForm, error)
}
});
} else {
displayError(thisForm, 'The reCaptcha javascript API url is not loaded!')
}
} else {
php_email_form_submit(thisForm, action, formData);
}
});
});
function php_email_form_submit(thisForm, action, formData) {
fetch(action, {
method: 'POST',
body: formData,
headers: {'X-Requested-With': 'XMLHttpRequest'}
})
.then(response => {
return response.text();
})
.then(data => {
thisForm.querySelector('.loading').classList.remove('d-block');
if (data.trim() == 'OK') {
thisForm.querySelector('.sent-message').classList.add('d-block');
thisForm.reset();
} else {
throw new Error(data ? data : 'Form submission failed and no error message returned from: ' + action);
}
})
.catch((error) => {
displayError(thisForm, error);
});
}
function displayError(thisForm, error) {
thisForm.querySelector('.loading').classList.remove('d-block');
thisForm.querySelector('.error-message').innerHTML = error;
thisForm.querySelector('.error-message').classList.add('d-block');
}
})();
Source