Hi there,
I am looking for a method to Prevent / Intercept the default Form Submission when a certain radio option is checked in a MB Frontend form.
To be clear this is NOT simply adding a disabled attribute to the <button type="submit">Submit</button> using JS. Which would obviously prevent the form submission. I am looking to add a custom event handler to the submit button.
The Challenge
==============
I have a MB Frontend Form where users can submit a FREE listing (which contains various fields). There is also an option here where users can submit a PAID listing by checking a radio option in the form. This form has the edit="true" attribute in the Shortcode so that users can update their post submission. When users select the PAID option I am looking to redirect users to the Stripe hosted payment gateway and pause the form submission. Once payment is made I can use some PHP logic to validate successful payment and update the post data.
Using some JS, I am attaching a custom event handler to the <button type="submit">Submit</button> on the form which communicates with my AJAX to fire a request to create a Stripe checkout session and process various bits of post data.
The Problem
============
I cannot Prevent / Intercept the default MB Frontend Form Submission, in order to process my own custom logic because no matter what I try the entire page always reloads after clicking "Submit", breaking my Stripe "fetch" request. In my custom submit handler I have tried:
submitButton.addEventListener('click', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
....Other logic and code....
But this has no effect?
I have also tried using a form submit handler instead:
form.addEventListener('submit', function (e) {
....Other logic and code....
But the result is the same... my Stripe 'fetch request breaks because of the page reload?
The Question
============
How can I intercept and prevent the page reload on "submit" in order to process my request?
Any help appreciated 🙂
.
