Fix: Form submit EventListeners were not fired

Lupul · Lupul · commit b911e1857dff · 2019-05-18T21:39:51.000+03:00
Native js submit() method does not trigger these events, it is not a jquery limitation as mentioned in PR: hestiacp#316 . Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit - Also removed inlined onclick javascript and moved that logic to a generic 'click' EventListener
diff --git a/web/js/init.js b/web/js/init.js
@@ -15,6 +15,14 @@ $(document).ready(function(){
         $("html, body").animate({ scrollTop: 0 }, "normal");
     });
 
+    $('.ui-button').on('click',function(evt){
+        var action = $(this).data('action');
+        var id = $(this).data('id');
+        if(action=='submit' && document.getElementById(id)){
+            evt.preventDefault();
+            $(document.getElementById(id)).submit();
+        }
+    });
 
             var isMobile = false; //initiate as false
             // device detection
diff --git a/web/js/pages/edit_server.js b/web/js/pages/edit_server.js
@@ -13,4 +13,3 @@
             $('.mail-relay').hide();
         }
     });
-});
diff --git a/web/templates/admin/add_cron.html b/web/templates/admin/add_cron.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/add_db.html b/web/templates/admin/add_db.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/add_dns.html b/web/templates/admin/add_dns.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/add_dns_rec.html b/web/templates/admin/add_dns_rec.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/add_firewall.html b/web/templates/admin/add_firewall.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/add_firewall_banlist.html b/web/templates/admin/add_firewall_banlist.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/add_ip.html b/web/templates/admin/add_ip.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/add_mail.html b/web/templates/admin/add_mail.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/add_mail_acc.html b/web/templates/admin/add_mail_acc.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/add_package.html b/web/templates/admin/add_package.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/add_user.html b/web/templates/admin/add_user.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/add_web.html b/web/templates/admin/add_web.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_backup_exclusions.html b/web/templates/admin/edit_backup_exclusions.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_cron.html b/web/templates/admin/edit_cron.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_db.html b/web/templates/admin/edit_db.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_dns.html b/web/templates/admin/edit_dns.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_dns_rec.html b/web/templates/admin/edit_dns_rec.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_firewall.html b/web/templates/admin/edit_firewall.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_ip.html b/web/templates/admin/edit_ip.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_mail.html b/web/templates/admin/edit_mail.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_mail_acc.html b/web/templates/admin/edit_mail_acc.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_package.html b/web/templates/admin/edit_package.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_server.html b/web/templates/admin/edit_server.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_server_bind9.html b/web/templates/admin/edit_server_bind9.html
@@ -13,7 +13,7 @@
               }
             }
           ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
       </div>
     </div>
diff --git a/web/templates/admin/edit_server_dovecot.html b/web/templates/admin/edit_server_dovecot.html
@@ -13,7 +13,7 @@
                   }
                 }
               ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
         </div>
       </div>
     </div>
diff --git a/web/templates/admin/edit_server_httpd.html b/web/templates/admin/edit_server_httpd.html
@@ -14,7 +14,7 @@
               }
             }
           ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
       </div>
     </div>
diff --git a/web/templates/admin/edit_server_mysql.html b/web/templates/admin/edit_server_mysql.html
@@ -13,7 +13,7 @@
                   }
                 }
               ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
         </div>
       </div>
     </div>
diff --git a/web/templates/admin/edit_server_nginx.html b/web/templates/admin/edit_server_nginx.html
@@ -14,7 +14,7 @@
                   }
                 }
               ?>
-                <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+                <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
         </div>
       </div>
     </div>
diff --git a/web/templates/admin/edit_server_pgsql.html b/web/templates/admin/edit_server_pgsql.html
@@ -13,7 +13,7 @@
               }
             }
           ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
         </div>
       </div>
     </div>
diff --git a/web/templates/admin/edit_server_php.html b/web/templates/admin/edit_server_php.html
@@ -13,7 +13,7 @@
                   }
                 }
               ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
         </div>
       </div>
     </div>
diff --git a/web/templates/admin/edit_server_service.html b/web/templates/admin/edit_server_service.html
@@ -13,7 +13,7 @@
               }
             }
           ?>
-          <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+          <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
         </div>
       </div>
     </div>
diff --git a/web/templates/admin/edit_user.html b/web/templates/admin/edit_user.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/edit_web.html b/web/templates/admin/edit_web.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="$('#vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/admin/list_firewall_banlist.html b/web/templates/admin/list_firewall_banlist.html
@@ -2,7 +2,7 @@
       <div class="l-sort clearfix noselect">
         <div class="l-unit-toolbar__buttonstrip">
           <a class="ui-button cancel" href="/list/firewall/"><i class="fas fa-arrow-left status-icon blue"></i> <?=__('Back')?></a>
-          <a href="/add/firewall/banlist" class="ui-button cancel" title="<?=__('Ban IP Address')?>"><i class="fas fa-plus-circle status-icon green"></i> <?=__('Ban IP Address')?></a>
+          <a href="/add/firewall/banlist/" class="ui-button cancel" title="<?=__('Ban IP Address')?>"><i class="fas fa-plus-circle status-icon green"></i> <?=__('Ban IP Address')?></a>
         </div>
         <div class="l-sort-toolbar clearfix">
           <table>
diff --git a/web/templates/user/edit_dns.html b/web/templates/user/edit_dns.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/user/edit_user.html b/web/templates/user/edit_user.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>
diff --git a/web/templates/user/edit_web.html b/web/templates/user/edit_web.html
@@ -13,7 +13,7 @@
                 }
               }
             ?>
-            <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="$('#vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
+            <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>
           </div>
         </div>
       </div>

Original file line number	Diff line number	Diff line change
`@@ -13,4 +13,3 @@`
`13`	`13`	`$('.mail-relay').hide();`
`14`	`14`	`}`
`15`	`15`	`});`
`16`		`-});`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`	`?>`
`16`		`- <a href="#" class="ui-button" title="<?=__('Save')?>" onclick="document.getElementById('vstobjects').submit();"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>`
	`16`	`+ <a href="#" class="ui-button" title="<?=__('Save')?>" data-action="submit" data-id="vstobjects"><i class="fas fa-save status-icon purple"></i> <?=__('Save')?></a>`
`17`	`17`	`</div>`
`18`	`18`	`</div>`
`19`	`19`	`</div>`