Can we stop checkout process on woocommerce using javascript manually?

user_2786618 0
Viewed 657

Can we stop checkout process on woocommerce 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.woocommerce-checkout").on('submit', function() {
    var np = $('#notepopup').val();// val = 0
    if(ne == 0){
         return false;
    }
 });

please suggest something

woocommerce jquery javascript
3 Answers

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

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

More doc on preventDefault().

Edit

Using these alerts,

$("form.woocommerce-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?

user_50861000

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 );
user_52931560

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.woocommerce-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!

user_197482620
Related