Can we stop checkout process on woomerce using javascript manually?

I am using this code for submit and want to stop process if certain condition occurs. I tried return false but it doesn't work.

 JQuery("form.woomerce-checkout").on('submit', function() {
    var np = $('#notepopup').val();// val = 0
    if(ne == 0){
         return false;
    }
 });

please suggest something

Can we stop checkout process on woomerce using javascript manually?

I am using this code for submit and want to stop process if certain condition occurs. I tried return false but it doesn't work.

 JQuery("form.woomerce-checkout").on('submit', function() {
    var np = $('#notepopup').val();// val = 0
    if(ne == 0){
         return false;
    }
 });

please suggest something

• javascript
• jquery
• woomerce

• What is variable ne? … Please could you add the plete code and the details about the context. Why do you want to stop checkout process? Why are you using Javascript? … Sorry but your question is just too vague actually and kind of unclear. – LoicTheAztec Commented Aug 28, 2018 at 21:13
• ne is just a variabe which i am defining updated code please check – Rikhi Sahu Commented Aug 28, 2018 at 21:16
• @LoicTheAztec it goes inside if but return false or e.preventDefault() doesn't hold process to the same page. – Rikhi Sahu Commented Aug 28, 2018 at 21:19
• Yes I know I have tried myself with both… I think it doesn't work because there is at least another delegated event from the <form> and many other active code and events involved… – LoicTheAztec Commented Aug 28, 2018 at 21:25

3 Answers 3

For anyone looking for a solution this now, the below code worked for me. It needs jQuery(document).ready(function($) and to use the event checkout_place_order to work like so:

jQuery(document).ready(function($) {
    
        jQuery("form.woomerce-checkout").on('checkout_place_order', function(e) {
            console.log("Submission Stopped");
            return false;
        });
});

If you require WooCommerce's validation to run first before stopping the checkout, there is a solution here!

You can prevent the form from submitting by prevent its default behavior (submit):

$("form.woomerce-checkout").on('submit', function(e) {
    if(ne == 0){
         e.preventDefault();
    }
 });

More doc on preventDefault().

Edit

Using these alerts,

$("form.woomerce-checkout").on('submit', function(e) {
    alert("Before if ");
    if(ne == 0){
         alert("Inside if ");
         e.preventDefault();
    }
    alert("After if ");
 });

When exactly do you see you form submitted?

Event Relay with Validator

Figured out a way of doing this by building a kind of Relay system for the submit events attached to the checkout.

Just treat the "canSubmit()" as your event handler and return true only if you want the checkout form to submit as normal.

( ($) => {

    var confirmDetails = true;

    function canSubmit( e ) {
        // Handle event here. Return true to allow checkout form to submit
        return false;
    }

    function init() {

        // Use set timeout to ensure our $( document ).ready call fires after WC
        setTimeout( () => {
            var checkoutForm = $( 'form.checkout' );

            // Get JQuery bound events
            var events = $._data( checkoutForm[0], 'events' );
            if( !events || !events.submit ) {
                return;
            }

            // Save Submit Events to be called later then Disable Them
            var submitEvents = $.map( events.submit, event => event.handler );
            $( submitEvents ).each( event => checkoutForm.off( 'submit', null, event ) );  

            // Now Setup our Event Relay
            checkoutForm.on( 'submit', function( e )  {
                e.preventDefault();
                var self = this;

                if( !canSubmit( ...arguments ) ) {
                    return;
                }

                // Trigger Event
                $( submitEvents ).each( ( i, event ) => {
                    var doEvent = event.bind( self );
                    doEvent( ...arguments );
                } );

            } );

        }, 10);
    }

    $( document ).ready( () => init() );

} )( jQuery );