表单提交的按钮总结

Posted 2020-08-16

1.input标签提交

1.1>input[type=submit]

<form name=”form” method=”post” action=”#">
    <input type=”submit” name=”btn” value=”提交">
</form>

input的type属性是submit，会引发表单提交。
作为按钮的input控件同时被当做一个表单输入提交给了服务器。键值对是 btn=>‘提交‘;

1.2>input[type=button]
input的type属性还可以是button，这时它只是一个按钮，不会引发表单提交。

<form name=”form” method=”post” action=”#">
    <input type=”button” name=”btn” value=”提交">
</form>

2.button[type=submit]
type的默认值是submit，所以点击一个button,会引起表单提交
button[type]在IE中的默认值是button，这意味着它只是一个按钮而不会引发表单提交,请注意设置type=submit来兼容IE。
button可以设置name和value,提交表单时，value会被作为表单数据提交给服务器

<form>
     <input type="text" name=‘name‘>
     <button>提交</button>
</form>

 

 

用法举例

1.input[type=button]类型的js或者jquery提交

1.1>js方法提交

<form method="post"  name="form1" action="/Mz_report/excel_report">

<input  type=‘button‘ value=‘填报‘  onclick="show_confirm()">

</form>

 

function show_confirm(){  

    var result = confirm(‘请仔细确认填报数据是否正确，上报后不能修改‘);  

    if(result){  

        document.form1.submit();

    }else{  

        return false;

    }  

}

1.2>jquery方法提交,同时补充url地址

 

以下可以通过jquery将form表单提交到不同的/控制器/方法

<form method="post"  name="form1" id="searchForm" >

<input  type=‘button‘ value=‘填报‘  id="report">

</form>

 

$(‘#report‘).click(function(){

        $(‘#searchForm‘).attr(‘action‘,‘/Mz_report/excel_report‘);

})

 

 

2.button也可以设置type=reset，此时点击按钮会导致表单被重置（这还挺有用的）

 

<form action="form_action.asp" method="get">

　　First name: <input type="text" name="fname" />

　　Last name: <input type="text" name="lname" />

　　<button type="submit" value="Submit">Submit</button>

　　<button type="reset" value="Reset">Reset</button>

</form>