alertify确认框调用表单submit时报错：submit is not a function

问题根源 #

你的表单里存在一个name="submit"且id="submit"的提交按钮，这会直接覆盖表单对象的原生submit()方法——因为表单元素会自动把内部name属性匹配的元素挂载为自身属性，此时formObj.submit指向的是那个按钮元素，而非表单的提交方法，所以调用时会抛出“不是函数”的错误。

解决方案 #

1. 修改提交按钮的名称和ID

把按钮的name和id改成非submit的取值，避免覆盖表单原生方法：

<form name="formulario" id="edit-form" method="POST" action="#" enctype="multipart/form-data">
  <input class="button" type="submit" name="submit-btn" id="submit-btn" onclick="return showAlertConfirm('¿Está seguro de que desea editar el registro?','edit-form',url)" value="Editar" />
</form>

2. 优化JavaScript中的事件监听逻辑

你当前每次点击按钮都会给表单新增一个submit事件监听，多次点击后会累积多个监听，可能引发意外问题。实际上onclick返回false已经阻止了表单默认提交行为，无需重复绑定监听，可移除相关代码：

//Funcione alertify para editar/eliminar registro
function showAlertConfirm(message,formId,url) {
  // Display the confirmation dialog
  alertify.confirm(
    "ATENCIÓN",
    message,
    function () {
      console.log("ok clicked");
      console.log(formId);
      console.log(document.getElementById(formId));          
      let formObj = document.getElementById(formId);
      formObj.submit();
     
    },
    function () {
      console.log("Cancel clicked"); 
      setTimeout(function() {
        showNotification("Operación Cancelada");        
        // Después de 5 segundos, redirige
        setTimeout(function() {
            window.location.href = url;
        }, 5000);
    }, 0); // Espera 5 segundos antes de mostrar la notificación
    }
  );

  // Always return false to prevent the default form submission
  return false;
}

验证 #

修改后再次点击按钮，确认弹窗触发后点击“确认”，表单就能正常调用submit()方法完成提交了。

内容的提问来源于stack exchange，提问作者joserodriguezan