如何在不刷新页面的情况下结束数据库的编辑模式连接？

Question

需要您的帮助。

我有2个单击事件，一个在表上，用于添加模式，一个在另一个表上，用于更新模式。这两种模式都有一个输入属性，当我单击添加和更新时，它会更改值。我的问题是从更新模式开始，然后添加单击事件，当我（按钮）提交添加值时，该模式仍在更新中。它将更改现有值，而不向数据库添加其他值。

我如何结束更新模式以让位添加模式？

<form method="post" id="api_crud_form">
    <h4 class="modal-title" id="h4">Add / Update Item</h4>
    <hr>
    <div class="row">
        <div class="col-md-1">

            <button type="submit" name="button_action" id="button_action-insert" class="btn btn-danger btn-sm form-control" value="Insert">Save</button>

            <button type="submit" name="button_action" id="button_action-update" class="btn btn-danger btn-sm form-control" value="Update">Update</button>

          <input type="hidden" name="product_id" id="product_id" />
          <input type="hidden" name="order_id" id="order_id" />
          <input type="text" name="tran_id" id="tran_id" value="<?php echo $tran_id; ?>" />
          <input type="hidden" name="tran_amount" id="tran_amount" />

            <input type="hidden" name="action" id="action" value="insert" />
        </div>
        <div class="col-md-2">
            <input type="text" name="tran_quantity" id="tran_quantity" placeholder="Enter Quantity here" autocomplete="off" class="input form-control" />
        </div>
        <div class="col-md-7">
            <input type="text" name="product_description" id="product_description" class="input form-control" readonly/>
        </div>
        <div class="col-md-2">
            <input type="text" name="product_price" style="text-align: right;" id="product_price" class="input form-control" readonly/>
        </div>
    </div>
    <hr>
</form>

这是JS代码

$('#api_crud_form').on('submit', function(event){
    event.preventDefault();

    if($('#tran_quantity').val() == '') {

        alert("Enter Quantity");
    } else if ($('#tran_quantity').val() == '0') {

        alert("Enter a valid number!");
    } else if ($('#product_description').val() == '') {

        alert("You have not selected an item yet.");
    } else if ($('#product_price').val() == '') {

        alert("You have not selected an item yet.");
    } else {

        var form_data = $(this).serialize();
        $.ajax({
            url:"action.php",
            method:"POST",
            data:form_data,
            success:function(data) {

                fetch_data();
                $('#api_crud_form')[0].reset();
                $('#apicrudModal').modal('hide');
                if(data == 'insert') {
                    alert("Item inserted successfully!");
                }

                if(data == 'update') {
                    alert("Item updated successfully");
                }
            }
        });
    }
});