WooCommerce/WordPress: how hide entire table form after submit (Admin Dashboard)?

Question

Desired outcome

I want display: none to be applied to the entire table after form submit button is clicked, because once I got the order number ( $order->get_id() ), in a second step I want to display the order details and a second form table to edit the weights of each item (and the initial form table with the list of orders would take too much space). (if required or helpful I can post screenshots of the two form tables).

Observations

I saw that with onsubmit="this.style.display='none'" (which I did not combine with the javascript code variations) the table cell holding the submit button clicked briefly became only a few pixels in height (but did not disappear entirely), but reappeared after a few seconds.

Steps including code

I made a plugin with a function hooked to add_menu_page and add_submenu_page 's.

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

Next, I made a query on on-hold orders.

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

Then, I created a form inside a table (wrapped in a <div> element) using a foreach loop. (For simplicity, I omitted table header and other table cells here...)

$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
    }

Once the form submit button is pressed, I want to hide the entire table. I tried some javascript code, but to no avail:

<script type="text/javascript">
        /* 3rd attempt */
        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();
        }
    
        /* 2nd attempt */
        document.getElementById("submit").onclick = function() {
            document.getElementById("table1").style.display = "none";
        }
        
        /* 1st attempt */
        document.forms['form_order_id'].addEventListener('submit', function (event) {
            this.style['display'] = 'none';
            event.preventDefault();
        });
</script>

P.S. I am still a rookie coder, I am thankful for any aid.

Answer 1

So I would take of on your html form the onsubmit()=..., once isnt needed and your javascript function should only have something like this.

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

or

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

this should do the job, if for some reason it does not, change the onclick from the input to the form tag.

Your code should look like so:

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