Topic: Bootstrap 5 Contact Form with PHP Tutorial
Expected behavior Hey, can you help me pls, i am a JS beginner. I hang on your tutorial on the point with AJAX. https://mdbootstrap.com/docs/standard/integrations/contact-form-php/#section-sending-with-ajax You wrote :
Our contact form is working correctly, however the user experience leaves much to be desired. Instead of reloading the page, we would like to send contact form on the same page. Let’s replace following JavaScript code
But i dont know what JS code i must replace? The JS from Frontend validation (https://mdbootstrap.com/docs/standard/integrations/contact-form-php/#section-frontend-validation)? when i do this the Frontend validation dosent work anymore. When i make a new JS with this code it came an error.
Thx for Help
It is the code responsible for sending the request to the api. Take a look at the snippet in the first example you send - there is an event listener on submit. Each form you place will reload the page by default - to prevent this, it is necessary to add an event listener to submit and block the default action (e.preventDefault ()). In this tutorial is exactly the form you are writing about
it looks like you deleted too much code. You just replace submitButton.addEventListener('click', (e) => { ... }
to form.addEventListener('submit', (e) => { ... }
validateForm function is still required
Yes i understand about the event listener but that is not my problem. When i insert the Code so i have an Error:
Uncaught ReferenceError: form is not defined
So when i define the form i become the Error when i click the submit button: "Uncaught ReferenceError:
validateForm is not defined
I think my code is in the wrong place? The tutorial does not state where the code belongs exactly or what needs to be replaced.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.2
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes