Submit woocommerce order tracking form from My Account custom tab

Question

So I created a new custom tab in My Account menu called "Shipping Tracking" and the content inside this page is the form-tracking.php template.

My problem is when I press the submit button to track an order it redirects me to my account dashboard page. So I tried to create an ajax form submission with no success based on this post WooCommerce track order submit AJAX

I don't mind if the form submission will be in ajax or with page refresh, I just want to stay in Shipping Tracking page

My code:

    /*
     * Step 1. Add Link (Tab) to My Account menu
     */
    add_filter ( 'woocommerce_account_menu_items', 'shippingTracking_link', 40 );
    function shippingTracking_link( $menu_links ){
        
        $menu_links = array_slice( $menu_links, 0, 5, true ) 
        + array( 'shipping-tracking' => 'Shipping Tracking' )
        + array_slice( $menu_links, 5, NULL, true );
        unset( $menu_links['downloads'] );
        return $menu_links;
    
    }
    /*
     * Step 2. Register Permalink Endpoint
     */
    add_action( 'init', 'misha_add_endpoint' );
    function misha_add_endpoint() {
        // WP_Rewrite is my Achilles' heel, so please do not ask me for detailed explanation
        add_rewrite_endpoint( 'shipping-tracking', EP_ROOT | EP_PAGES );
    
    }
    /*
     * Step 3. Content for the new page in My Account, woocommerce_account_{ENDPOINT NAME}_endpoint
     */
    add_action( 'woocommerce_account_shipping-tracking_endpoint', 'misha_my_account_endpoint_content' );
    function misha_my_account_endpoint_content() {
//get the order tracking form template
        wc_get_template( 'order/form-tracking.php' );
    }
    /*
     * Step 4
     */
    // Go to Settings > Permalinks and just push "Save Changes" button.

Answer 1

OK So I managed to make it work like this:

Using wc_get_template( 'order/form-tracking.php' ); makes the form useless so we need to change that to echo do_shortcode('[woocommerce_order_tracking]');

and inside form-tracking.php I had to change the

action="<?php echo esc_url( get_permalink( $post->ID ) ); ?>"

to

action="<?php wc_get_endpoint_url('shipping-tracking', '', get_permalink(get_option('woocommerce_myaccount_page_id'))); ?>"

in order to stay at the same page in My Account endpintes after submission (in my case it's "/my-account/shipping-tracking")

Full Example:

function.php:

    /*
     * Step 1. Add Link (Tab) to My Account menu
     */
    add_filter ( 'woocommerce_account_menu_items', 'shippingTracking_link', 40 );
    function shippingTracking_link( $menu_links ){
        
        $menu_links = array_slice( $menu_links, 0, 5, true ) 
        + array( 'shipping-tracking' => 'Shipping Tracking' )
        + array_slice( $menu_links, 5, NULL, true );
        unset( $menu_links['downloads'] );
        return $menu_links;
    
    }
    /*
     * Step 2. Register Permalink Endpoint
     */
    add_action( 'init', 'misha_add_endpoint' );
    function misha_add_endpoint() {
        // WP_Rewrite is my Achilles' heel, so please do not ask me for detailed explanation
        add_rewrite_endpoint( 'shipping-tracking', EP_ROOT | EP_PAGES );
    
    }
    /*
     * Step 3. Content for the new page in My Account, woocommerce_account_{ENDPOINT NAME}_endpoint
     */
    add_action( 'woocommerce_account_shipping-tracking_endpoint', 'misha_my_account_endpoint_content' );
    function misha_my_account_endpoint_content() {
//get the order tracking form template
       echo do_shortcode('[woocommerce_order_tracking]');
    }
    /*
     * Step 4
     */
    // Go to Settings > Permalinks and just push "Save Changes" button.

form-tracking.php:

<form action="<?php wc_get_endpoint_url('shipping-tracking', '', get_permalink(get_option('woocommerce_myaccount_page_id'))); ?>" method="post" class="woocommerce-form woocommerce-form-track-order track_order">

    <p><?php esc_html_e( 'To track your order please enter your Order ID in the box below and press the "Track" button. This was given to you on your receipt and in the confirmation email you should have received.', 'woocommerce' ); ?></p>

    <p class="form-row form-row-first"><label for="orderid"><?php esc_html_e( 'Order ID', 'woocommerce' ); ?></label> <input class="input-text" type="text" name="orderid" id="orderid" value="<?php echo isset( $_REQUEST['orderid'] ) ? esc_attr( wp_unslash( $_REQUEST['orderid'] ) ) : ''; ?>" placeholder="<?php esc_attr_e( 'Found in your order confirmation email.', 'woocommerce' ); ?>" /></p><?php // @codingStandardsIgnoreLine ?>
    <p class="form-row form-row-last"><label for="order_email"><?php esc_html_e( 'Billing email', 'woocommerce' ); ?></label> <input class="input-text" type="text" name="order_email" id="order_email" value="<?php echo isset( $_REQUEST['order_email'] ) ? esc_attr( wp_unslash( $_REQUEST['order_email'] ) ) : ''; ?>" placeholder="<?php esc_attr_e( 'Email you used during checkout.', 'woocommerce' ); ?>" /></p><?php // @codingStandardsIgnoreLine ?>
    <div class="clear"></div>

    <p class="form-row"><button type="submit" class="button" name="track" value="<?php esc_attr_e( 'Track', 'woocommerce' ); ?>"><?php esc_html_e( 'Track', 'woocommerce' ); ?></button></p>
    <?php wp_nonce_field( 'woocommerce-order_tracking', 'woocommerce-order-tracking-nonce' ); ?>

</form>