form中button未指明type时,默认type为submit
遇到了一个奇怪的现象:一个按钮打开一个Bootstrap模态框,模态框有几个表单字段和两个按钮,两个按钮可以关闭模态框,点击其中一个按钮关闭模态框后页面居然刷新了。
仔细检查后发现点击的按钮未指明type,浏览器把按钮type默认为submit了。
写个demo验证下:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><form><span>用户名</span><input type="text" name="username" /><span>密码</span><input type="text" name="password" /><button>提交</button><button>取消</button></form></body>
</html>
点击两个按钮效果以下,表单提交了,要阻止这种行为,在两个button上指明type="button"
表单提交后清除表单域
function clearForm(formId) {const form = document.getElementById(formId);const elements = form.elements;for (let i = 0, len = elements.length; i < len; ++i) {const element = elements[i];if (element.hasAttribute('data-clear') && element.getAttribute('data-clear') == '0') continue;switch (element.type) {case 'password':case 'text':case 'textarea':case 'file':element.value = '';break;case 'radio':case 'checkbox':element.checked = false;break;case 'select-one':case 'select-multiple':element.selectedIndex = -1;break;default:continue;}}}