diff --git a/module/program/js/product.ui.js b/module/program/js/product.ui.js
new file mode 100644
index 0000000000..d4bed84caf
--- /dev/null
+++ b/module/program/js/product.ui.js
@@ -0,0 +1,17 @@
+/**
+ * Submit data to product batch edit page by html form while click on the batch edit button.
+ */
+window.onClickBatchEdit = function(event)
+{
+    const checkedList = zui.DTable.query(event.target).$.getChecks();
+
+    if(!checkedList.length) return;
+
+    const formData = new FormData();
+    checkedList.forEach(function(id)
+    {
+        formData.append('productIDList[]', id);
+    });
+
+    postAndLoadPage($(event.target.closest('button')).data('url'), formData, '', {app: 'product'});
+};
diff --git a/module/program/ui/product.html.php b/module/program/ui/product.html.php
index c36552f16d..254588f1e0 100644
--- a/module/program/ui/product.html.php
+++ b/module/program/ui/product.html.php
@@ -37,7 +37,18 @@ $products = initTableData($products, $cols, $this->product);
 foreach($products as $product) $data[] = $this->product->formatDataForList($product, $users, $usersAvatar);
 
 $summary = sprintf($lang->product->pageSummary, count($data));
-$footToolbar = common::hasPriv('product', 'batchEdit') ? array('items' => array(array('text' => $lang->edit, 'class' => 'btn batch-btn size-sm primary', 'data-url' => $this->createLink('product', 'batchEdit', "programID={$programID}")))) : null;
+$footToolbar = common::hasPriv('product', 'batchEdit') ?
+    array(
+        'items' => array(
+            array(
+                'text'     => $lang->edit,
+                'class'    => 'btn secondary toolbar-item size-sm',
+                'data-url' => $this->createLink('product', 'batchEdit', "programID={$programID}"),
+                'onClick'  => jsRaw('window.onClickBatchEdit')
+            )
+        )
+    ) :
+    null;
 
 dtable
 (