Prevent / Intercept Form Submission when radio option is checked?

Support MB Frontend Submission Prevent / Intercept Form Submission when radio option is checked?Resolved

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #48267
    CodogCodog
    Participant

    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 🙂

    #48272
    PeterPeter
    Moderator

    Hello Codog,

    I'm afraid that it isn't possible to prevent the frontend submission form process on clicking the submit button. If you don't want to reload the page, you can enable Ajax to submit the post without reloading.

    #48280
    CodogCodog
    Participant

    No problem Peter, thanks for the feedback.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.