1

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.

1 Answer 1

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.