Скачать или смотреть How to Fix event.preventDefault() Not Working in WordPress Forms

Learn how to resolve issues with `event.preventDefault()` not functioning correctly in your WordPress form submissions by ensuring proper API URL formatting and JavaScript implementation.
---
This video is based on the question https://stackoverflow.com/q/63561042/ asked by the user 'Chinomso Johnson' ( https://stackoverflow.com/u/13143532/ ) and on the answer https://stackoverflow.com/a/63561602/ provided by the user 'eltha' ( https://stackoverflow.com/u/14157422/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Javascript event.prevent default not working on wordpress

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Troubleshooting event.preventDefault() in WordPress Forms

Creating a custom HTML page for your WordPress website can be an exciting venture, especially when building forms to interact with APIs. However, you might encounter some hiccups along the way, such as your form causing the page to reload upon submission instead of performing the desired action. This guide will guide you through understanding and fixing the issue of event.preventDefault() not working effectively in WordPress.

The Problem: Form Submission Causing Page Reload

You have created a form with an input field and a submit button with the intention of calling an API when the form is submitted. However, upon clicking the submit button, the page reloads, disrupting your API call and resulting in console errors. Here’s a summary of the situation you faced:

You are working with a custom HTML page on WordPress.

The form is designed to call an API and log the response.

However, the form submission is causing a page reload, leading to undesired behavior.

The Solution: Properly Using event.preventDefault()

The primary reason the form submission caused the page reload is due to the incorrect usage of the JavaScript involved in your API call. Specifically, the URL for your XMLHttpRequest was not enclosed in quotes. This is a common oversight that can disrupt the entire function of your code.

Step-by-Step Fix

Ensure Proper URL Formatting: Make sure that your API’s URL in the xhr.open() method is properly formatted. When you don’t wrap it in quotes, the JavaScript engine misinterprets the URL, leading to issues.

[[See Video to Reveal this Text or Code Snippet]]

Retrieve Input Value Inside the Event Listener: Make sure that you are obtaining the value of the input field at the time the form is submitted, especially if the input value might change. It should be retrieved within the submit event:

[[See Video to Reveal this Text or Code Snippet]]

Use the event Object Properly: Ensure that you call event.preventDefault() inside the event listener to stop the form from submitting and reloading the page.

Corrected Complete Example

Here’s how the complete code should look after the adjustments:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By ensuring that your XMLHTTPRequest's URL is properly formatted and making correct use of the event.preventDefault(), you can successfully prevent the form from causing a page reload, allowing your API call to function seamlessly. Be meticulous with your JavaScript syntax, and you will find that debugging issues like this becomes a much simpler task.

Now you can enjoy uninterrupted form submissions and explore the exciting outcomes returned by the API!