我们可以使用javascript手动停止woocommerce上的结帐流程吗？

Question

我们可以手动停止使用javascript在woocommerce上结帐吗？

我正在使用此代码进行提交，如果某些情况发生，我想停止处理。我尝试返回false，但不起作用。

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

请提出一些建议

Answer 1

您可以通过阻止表单的默认行为（提交）来阻止表单的提交：

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

有关preventDefault()的更多文档。

编辑

使用这些警报

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

您何时确切看到表单已提交？

Answer 2

带有验证器的事件中继

通过为附加到结账的提交事件构建一种中继系统，想出了一种方法。

只需将“canSubmit()”视为您的事件处理程序，并且仅当您希望结帐表单正常提交时才返回 true。

( ($) => {

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