[HTML] 表单提交与阻止表单提交

本文转载自此处

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);