Topic: Form Gets Stuck in Validation
Expected behavior The form should submit and return a confirmation via JSON within the form itself. The message field should take input on ALL browsers.
Actual behavior The console information does not change until submit is clicked, it then sticks in "sending..." and does not submit the email. If the page is refreshed in Firefox, it will then submit the email, but it is unusable in all other browsers. In addition, the message field only accepts one character in Safari, it works fine in other browsers.
Resources (screenshots, code snippets etc.)
I am actually using MDB Pro 5.
Snippet: https://mdbootstrap.com/snippets/jquery/jlstory/2701365
Hosted site for test: https://intakt-design.com
Marcin Luczak staff answered 4 years ago
Hi,
Firstly I would like to ask whether you have hosted any PHP Server, e.g. Apache? Without that, your PHP code won't process mail sending, thus it won't send any response to the frontend code and you will be stuck on 'sending...' until you refresh the page.
I've also found some lines in your code that are mutually exclusive. If you want to send your form with AJAX you shouldn't be using action="mail.php" method="POST" onsubmit="return validateForm()
inside your form tag.
Instead you should only use <a class="btn btn-rounded waves-effect cta-btn-res col-12 col-lg-5 mt-3 mb-0" onclick="validateForm()">Submit</a>
, and allow validateForm()
function to manage your contact form.
I've created a snippet with your code changed slightly:https://mdbootstrap.com/snippets/jquery/marcin-luczak/2705367
Also, I've added 'quick-fix' in CSS for the problem with textarea on Safari, which is a bug with the iOS/Safari itself rather than MDB components.
textarea{
-webkit-user-select: text !important;
-khtml-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
Adding this code to your CSS file should fix your problem.
Also, we are planning to release PHP and NodeJS Contact Form integrations for MDB5 on November 23 so you will be able to use tools dedicated to MDB5.
Regards, Marcin
jlstory commented 4 years ago
Thank you! This is very well explained! However, the issue with getting stuck in "..sending" is still present. My site is hosted with Hostinger, and I have contacted them. This was their response:
"We don't use Apache and the email service on your account is fully active and running, so there are no issues from that end.
If the contact form doesn't execute or work properly, the issue would be somewhere within the code of the contact script itself"
"Yes, PHP is enabled and fully supported, along with contact forms built on it π As long as the script is correct and configured properly, there shouldn't be any issues executing it."
"Current PHP version should be fully enough (currently, you're using 7.2) If it turns out that the script is built and only compatible with a specific/older PHP version, you can change the PHP version."
jlstory answered 4 years ago
Thank you! This is very well explained! However, the issue with getting stuck in "..sending" is still present. My site is hosted with Hostinger, and I have contacted them. This was their response:
"We don't use Apache and the email service on your account is fully active and running, so there are no issues from that end.
If the contact form doesn't execute or work properly, the issue would be somewhere within the code of the contact script itself"
"Yes, PHP is enabled and fully supported, along with contact forms built on it π As long as the script is correct and configured properly, there shouldn't be any issues executing it."
"Current PHP version should be fully enough (currently, you're using 7.2) If it turns out that the script is built and only compatible with a specific/older PHP version, you can change the PHP version."
jlstory answered 4 years ago
I don't understand the reasoning, but someone on stack overflow suggested the following:
the sendMessage () function was returning an undefined error
I changed it to messageSending() in the validation and function messageSending, and it works?
Thanks!
Marcin Luczak staff answered 4 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.1
- Device: MacBook Pro
- Browser: all - Firefox Submits on Refresh
- OS: Big Sur
- Provided sample code: No
- Provided link: Yes