WooCommerce/WordPress: как скрыть всю форму таблицы после отправки (Административная панель)?

Желаемый результат

Я хочу, чтобы display: none применился ко всему table после нажатия кнопки submit формы, потому что, получив номер заказа ($order->get_id()), на втором шаге я хочу отобразить детали заказа и вторую таблицу формы для редактирования веса каждого товара (а начальная таблица формы со списком заказов займёт слишком много места). (если необходимо или полезно, я могу опубликовать скриншоты двух таблиц формы).

Наблюдения

Я заметил, что с onsubmit="this.style.display='none'" (которое я не комбинировал с вариантами кода на javascript) ячейка таблицы с кнопкой submit, нажатой на короткое время, стала лишь на несколько пикселей ниже (но не исчезла полностью) и снова появилась через несколько секунд.

Шаги с включением кода

Я создал плагин с функцией, подключенной к add_menu_page и add_submenu_page.

add_menu_page( 
        'Packing-App', // $page_title
        'Pack-App', // $menu_title
        'manage_options', // $capability
        'pg-packapp1', // $menu_slug
        'fn_packapp1', // $function
        'dashicons-tickets', // $icon_url
    54 // $position
);

add_submenu_page( 
        'pg-packapp1', // $parent_slug
        'All Open Orders', // $page_title
        'Open Orders', // $menu_title
        'manage_options', // $capability
        'pg-packapp1', // $menu_slug
        'fn_packapp1' // callable $function = ''
        // int $position = null
);

add_submenu_page( 
        'pg-packapp1', // $parent_slug
        'One Open Order', // $page_title
        'One Order', // $menu_title
        'manage_options', // $capability
        'pg-packapp2', // $menu_slug
        'fn_packapp2' // callable $function = ''
        // int $position = null
);

Далее я сделал запрос на заказы со статусом on-hold.

$on_hold_orders = wc_get_orders( 
    array (
        'limit' => -1,
        'post_type' => 'shop_order',
        'status'    => 'on-hold'
    )
);

Затем я создал form внутри table (обвернутой в элемент <div>) с циклом foreach. (Для простоты я опустил заголовок таблицы и другие ячейки таблицы здесь…)

$edit_form1 = ' edit';
foreach( $on_hold_orders as $order) {
    ?>
    <div class="table1" id="table1">
    <tr>
    <td>    
    <form 
        onsubmit="this.style.display='none'"
        id="form_1"
        name="form_order_id"
        action="#"
        method="post"
        >

        <input 
            type="hidden" 
            name="frub_id"
            value="<?= $order->get_id() ?>"
        />

        <input 
            onclick="myClick()"
            type="submit" 
            name="<?= $order->get_id() ?>"
            value="<?= $order->get_id() . $edit_form1 ?>"
        />
        </form>
    </td>
    </tr>
    </div>
    <?php
    }

После нажатия кнопки submit формы я хочу скрыть всю таблицу. Я пробовал несколько кусков кода на javascript, но безуспешно:

<script type="text/javascript">
        /* 3-я попытка */
        function myClick(){
            var form = document.getElementById("form_order_id");
            form.style.display = "none";
            document.getElementById("table1").style.display = "none";
            document.getElementById("form_1").style.display = "none";
            document.getElementById("submit").style.display = "none";
            document.getElementById("9275").style.display = "none";
            document.getElementById("table_id").style.display = "none";
            event.preventDefault();
        }

        /* 2-я попытка */
        document.getElementById("submit").onclick = function() {
            document.getElementById("table1").style.display = "none";
        }

        /* 1-я попытка */
        document.forms['form_order_id'].addEventListener('submit', function (event) {
            this.style['display'] = 'none';
            event.preventDefault();
        });
</script>

P.S. Я все еще начинающий программист, благодарен за любую помощь.

Итак, я бы убрал из формы атрибут onsubmit()=…, так как он не нужен, и ваша функция на javascript должна содержать только что-то вроде этого.

document.getElementById("form_1").style.display = "none";

или

document.getElementById("form_1").style.visibility = "hidden";

Это должно сработать, если по какой-то причине не сработает, замените onclick у input на tag формы.

Ваш код должен выглядеть так:

<form onclick="myClick()" id="form_1" name="form_order_id" action="#" method="post" >               
   <input type="hidden" name="frub_id" value="<?= $order->get_id() ?>" />
   <input type="submit" name="<?= $order->get_id() ?>" value="<?= $order->get_id() . $edit_form1 ?>" />
</form>
<script type="text/javascript">
   function myClick(){
      document.getElementById("form_1").style.display = "none";
   }
</script>