[HTML] 表單提交與阻止表單提交
阿新 • • 發佈:2019-02-11
1. submit按鈕
<input type="submit">
按鈕不在<form></form>
中不會提交表單。
2. <button>
按鈕
<button>text<button>
相當於submit按鈕,在<form></form>
中點選,會提交表單。
3. 阻止submit預設事件
submit按鈕click事件中的e.preventDefault();
會阻止submit按鈕提交表單。
document.querySelector('#button1').addEventListener('click' ,function(e){
e.preventDefault();
},false);
4. 阻止form預設事件
form的submit事件中e.preventDefault();
會阻止表單提交。
document.querySelector('#form1').addEventListener('submit',function(e){
e.preventDefault();
},false);
5. 讓submit按鈕disabled
(1)點選前讓按鈕disabled會導致click事件不觸發。
document.querySelector('#button1' ).setAttribute('disabled',true);
(2)submit按鈕的click事件中disable按鈕,會阻止表單提交。
document.querySelector('#button1').addEventListener('click',function(){
var button=this;
button.setAttribute('disabled',true);
},false);
注:
document.querySelector('#button1').addEventListener('click',function(){
var button=this;
button.setAttribute('disabled',true);
//仍然會阻止表單提交
setTimeout(function(){
button.removeAttribute('disabled');
},0);
},false);