DOM基础测试35 - Form表单

[JaimeCheng]

题目：

原issue

回答：

// 我的回答 7分
// 1
var form = document.getElementById('loginForm')
// 2
form.onsubmit = function (e) {
  e.preventDefault()
}
// 3,4,5
form.onsubmit = function (e) {
   e.preventDefault();
   // 4 ajax提交之前设置disabled属性为true
   form.querySelector("input[type='submit']").disabled = true
   var data = {}
   // 3 获取所有提交数据
   var all = form.querySelectorAll("[name]")
   for (var i = 0;i<all.length; i++) {
      data[all[i].name] = all[i].value
   }
   // 5 获取form 外隐藏元素
   var out = document.querySelector("input[type='hidden']")
   data[out.name] = out.value
   // 4 ajax提交成功后disabled设为false
   form.querySelector("input[type='submit']").disabled = false
}

满分回答 | 优秀回答1 | 优秀回答2

总结：

1. 本次小测回答的有些仓促了；
2. 了解下 new FormData() 的使用；
3. js原生表单的一些属性完全不熟悉，还有表单数据的 append；
4. 按钮的 disabled 属性设置为 '' 同样具有禁用效果；

> 在线demo <

[JaimeCheng]

zxx: 本期要点 1.

document.getElementById('loginForm');  // 方法1：经典的 id 选择器
document.querySelector('#loginForm');  // 方法2：万能的 querySelector
document.forms.loginForm;  // 方法3：表单原生方法，还可以写作：document.forms['loginForm']
loginForm;   // 方法4：标签的 id 可以直接当变量来用 尽量不用，变量容易被覆盖

2. loginForm.addEventListener('submit', function(event) {
   event.preventDefault(); // 推荐
   // 其他操作...
   return false // 主要用老的ie
   });

3. new FormData(loginForm)    // IE10+

4. setAttribute('disabled', '')或者loginForm.querySelector('[type="submit"]').disabled = true;

5. <input name="from" type="hidden" form="loginForm">   // IE10+