How Do I Hide/Show HTML Buttons using JavaScript

Question

Please I have two buttons on my forms, the first is to Process while the Second is to Submit.

1. I want the Submit Button (Second button) to be hidden at Form load.
2. I want the Process Button (First button) to be visible at Form load.
3. When the Process Button is clicked, it should become invisible while making the submit button to be visible.
4. The Process button(First button) after it has been clicked, should remain invisible until the user refresh the page/load the page.

How do I handle this in the JavaScript.

My Html is pasted below

               <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <button type="button" class="btn btn-primary" onclick="ReceiptDialog(this, 'ReceiptTypeCode');">Process</button>
                        <a href="#dialog3" class="btn btn-primary" style="float:right" title="Confirm" data-toggle="modal" onclick="dialog3();">Receipt</a>
                    </div>
                </div>

Please note that ReceiptDialog() is a modal popup and diaglog3() is a modal submit confirmation (Y/N).

Any assistance will be greatly appreciated.

Best regards,

Abiodunajai

Answer 1

looks like you are bootstrap 5, the class name "d-none" is used to hide elements. add this to hide, remove to show

$("#id").addClass("d-none"); // hide
$("#id").removeClass("d-none"); // show