JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.0/bootbox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
<form id="pageForm1" class="" action="user.php?goto=info_view" method="post" enctype="application/x-www-form-urlencoded" accept-charset="utf-8">

  <!-- many     input fields -->

  <div class="row">

    <div class="col-12 text-center">

      <button type="submit" class="btn" id="button_submit1" name="viewUser" title="View Info">View Info</button>

      <button type="submit" class="btn" id="button_submit2" name="editUser" title="Edit Info">Edit Info</button>

      <button type="submit" class="btn" id="button_submit3" name="delUser" title="Delete Info">Delete Info</button>

      <button type="submit" class="btn" id="button_submit4" name="resetPwdUser" title="Reset Password">Reset Passwd</button>


    </div>

  </div>

</form>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  let formHandled = false;

  const form1 = document.getElementById('pageForm1');

  if (form1) {
    form1.addEventListener('submit', event => {
      let btn = document.getElementById(event.submitter.id);
      console.log(event.submitter.id);

      if (!formHandled) {
        event.preventDefault();

        bootbox.confirm({
          size: 'small',
          centerVertical: true,
          message: 'Proceed With Action?',
          callback: function(result) {
            if (result) {
              formHandled = true;

              if (btn) {
                btn.click();
              }
            } else {
              formHandled = false;
            }
          }
        }); // end bootbox.confirm

        return false;
      } // end of if( !formHandled )

    }); //end of form1.addEventListener
  } // end of if form1
});