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

时间:2022-12-02 18:22:54

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