4

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

Rikhi Sahu
  • 655
  • 1
  • 7
  • 19
  • What is variable `ne`? … Please could you add the complete 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 Aug 28 '18 at 21:13
  • ne is just a variabe which i am defining updated code please check – Rikhi Sahu Aug 28 '18 at 21:16
  • @LoicTheAztec it goes inside if but return false or e.preventDefault() doesn't hold process to the same page. – Rikhi Sahu Aug 28 '18 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 `
    ` and many other active code and events involved…
     – LoicTheAztec Aug 28 '18 at 21:25

3 Answers3

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

StevenFoster
  • 31
  • 2
2

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?

Alfred Wallace
  • 1,741
  • 1
  • 14
  • 32
2

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 );
Cody Rees-Whitley
  • 46
  • 5