Topic: Bootstrap 5 Contact Form with PHP Tutorial

daencore priority asked 9 months ago


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


Grzegorz Bujański staff answered 9 months ago


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


daencore priority answered 9 months ago


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.


Grzegorz Bujański staff answered 9 months ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: 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