Materialize CSS下Submit <button>失效但submit <input>可用的解决方法

哈哈，这个坑我踩过！当初换Materialize美化界面时也遇到过一模一样的问题，核心原因是Materialize的JS逻辑会干扰<button>标签的原生表单提交行为，再加上换标签时的小疏忽，直接导致提交功能失效了。

核心矛盾：Materialize交互逻辑 vs 表单原生提交 #

1. 按钮类型未明确指定：虽然大部分浏览器会默认表单内的<button>为type="submit"，但Materialize的JS组件在处理按钮时，会优先绑定自身的交互逻辑（比如波纹动画），如果按钮没有明确声明type属性，可能会被误判为普通按钮，无法触发表单提交流程。
2. 默认事件被阻断：Materialize为了实现按钮的动画效果，会给按钮添加click事件并调用preventDefault()，直接阻断了表单的原生提交行为——而你的PHP后端完全依赖原生表单提交来接收数据，自然就收不到请求了。

按优先级尝试下面的方案：

1. 给明确添加type="submit"属性 #

这是最基础也最有效的一步，确保按钮被浏览器和Materialize同时识别为提交控件：

<button id="submitFileUrlForDownload" type="submit" name="fileurlsubmitted" class="btn">提交</button>

注意一定要加上class="btn"，这是Materialize按钮的基础类，能保证JS正确初始化组件的同时，不阻断原生提交逻辑。

2. 手动触发表单原生提交（方案1无效时） #

如果Materialize的JS还是强行阻止了提交，就手动绑定点击事件，绕过它的默认处理：

const submitBtn = document.getElementById('submitFileUrlForDownload');
const targetForm = submitBtn.form;

submitBtn.addEventListener('click', function(e) {
  // 阻止Materialize的事件冒泡和默认行为
  e.stopPropagation();
  // 手动触发表单原生提交
  targetForm.submit();
});

或者直接监听表单的submit事件，确保它能正常执行：

document.querySelector('form').addEventListener('submit', function(e) {
  // 这里可以添加表单验证逻辑，不要调用preventDefault()
  // 让表单按原生流程提交到PHP后端
});

3. 禁用Materialize对该按钮的JS处理（极端情况） #

如果上面的方法都不行，可以给按钮添加data-no-auto-init属性，让Materialize不对这个按钮初始化交互逻辑：

<button id="submitFileUrlForDownload" type="submit" name="fileurlsubmitted" class="btn" data-no-auto-init>提交</button>

这样按钮会保持原生提交行为，只是可能会丢失Materialize的动画效果，适合优先保证功能的场景。

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