html——form表单提交方法submit和button

form表单提交方法

1、type=“submit”

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

2、type=“image”

<form name="form" method="post" action="#"> 
   <input type="image" name="submit" src="btnSubmit.jpg"> 
</form>

3、使用链接来提交表单，javascript的DOM模型：

<form name="form" method="post" action="#"> 
   <a href="javascript:form.submit();">提交</a> 
</form>

这种方法实际上是调用了一个javascript函数，使用javacript函数来提交表单，方法就非常多非常灵活了，比如可以把它加入到任意一个标签的onclick事件中：

<form name="form" method="post" action="#"> 
  <div onclick="javascript:form.submit();"> 
    <span>提交</span> 
  </div> 
</form>

但是，如果一个表单里有需要有多个提交按钮怎么办呢？
比如一个表单里的提交按钮所指向的处理页面不同，这样由于表单在定义的时候就已经确定下表单数据的处理页面，所以单纯地在表单里放多个提交按钮是没有办法达到目的的。这就需要javascript。
首先定义一个函数：

代码如下:

<script language=javascript> 
    function query(){ 
       form.action="query.jsp"; 
       form.submit();
       } 
    function update(){ 
       form.action="update.jsp"; 
       form.submit();
       } 
</script>

通过javascript改变form的action属性值，这样就可以实现多提交按钮而且功能不同了，页面内代码如下：

<form name="form" method="post" action="#"> 
    <input type="button" name="query" onclick="query();" value="查询"> 
    <input type="button" name="update" onclick="update();" value="更新"> 
</form>

上面一段代码，使用的是普通的按钮，而提交功能的实现方法是在它的onclick事件中调用javascript函数.
有了上面这几种提交表单的方法,我想差不多够应付复杂的表单了.

表单提交值得注意的地方

注意：每个input标签都要有name属性，form要有action和method。
当然，这里也可以使用button代替input作为提交的按钮：
button的type属性有两个值：button和submit。当不写type属性时，其type的默认值是submit，点击的话也会直接提交数据。

使用form的onsubmit()方法对表单数据进行 验证后 再提交

<form id="form1" action="/test" method="post" onsubmit="return checkForm()">

<input type="submit" value="提交">
//或者
<button type="submit">提交</button>

<script type="text/javascript">
    function checkForm(){
        var user= document.getElementById('user').value;
        var psw= document.getElementById('psd').value;
        if (...) {
            //如果验证不通过
            return false;
        } else {
            //验证通过
            return true;
        }
    }
</script>

这里给form元素加上了onsubmit()方法，它会在“提交”按钮点击的时候被触发，该方法一定要有return返回值，如果值为false则不进行提交，如果为true则提交。

给input type='button’添加onclick事件，验证通过则调用submit()方法提交

<form id="form1" action="/test" method="post">
   <input type="button" value="提交" onclick="checkForm();">
</form>

function checkForm(){  
   var user= document.getElementById('user').value;
   var psw= document.getElementById('psd').value;  

   if(...){  
       //验证不通过 
     return false;  
   }  
   document.getElementById("form1").submit();  
} 

使用ajax对数据进行 验证后 再提交

<form id="form1" action="/test" method="post">
<input type="submit" value="提交" onclick="login()">
//或者
<button type="button" onclick="login()">提交</button>
<script type="text/javascript">
    function login() {
        $.ajax({
            type: "POST",                  
            dataType: "json",              
            url: "/users/login" ,          
            data: $('#form1').serialize(), //提交的数据
            success: function (result) {
                console.log(result);       //打印服务端返回的数据(调试用)
                if (result.resultCode == 200) {
                    alert("提交成功");
                }
                ;
            },
            error : function() {
                alert("提交失败");
            }
        });
    }
</script>

注意：
如果使用button，要先进行数据验证的话，就必须要将type的值设置为”button”，即表示它是一个按钮

这里提交的数据’data’，使用了serialize()方法将提交的表单值序列化（即a=1&b=2格式），当然你也可以写成：

{
    "username":username,
    "password":password
}

表单的 input、select 默认的样式是不同的，所以就造成了width设置的一样，但就是对不齐，可以设置box-sizing:border-box;来解决不一致问题。

我做的项目真实代码如下：

@RequestMapping(value = "/declareNewStartBackup")
	public ModelAndView declareNewStartBackup(String alternativeType, Long id, HttpServletRequest requestServlet) {
		LoginUser user = getLoginUser(requestServlet);
		ModelAndView md = new ModelAndView();
		BRePro brePro = new BRePro();
		if (id != null && id == -1) {
			brePro.setRespoMan(user.getAccountid()); // 责任人
			brePro.setRespoUnit(user.getOrgid().toString()); // 责任单位
			if (user != null && user.getEmp() != null && user.getEmp().getMobilephone() != null) {
				brePro.setRespoTel(user.getEmp().getMobilephone());
			}
			brePro.setAlternativeType(alternativeType);//新申报或者延续项目
			brePro.setProType(SysContent.proTtype1);
		} else {
			brePro = breproService.findBRePro(id);
		}
		md.addObject("brePro", JSON.toJSONString(brePro));
		md.addObject("alternativeType", alternativeType);
		if("1".equals(alternativeType)) {
			md.setViewName("biz/study/declare/declareNewStartBackup");
		}else if("2".equals(alternativeType)) {
			md.setViewName("biz/study/declare/declareNewStartBackupContinue");
		}
		return md;
	}

alternativeType：为新增页面默认的参数
brePro：jpa 对应的实体类
md.setViewName(“biz/study/declare/declareNewStartBackup”); 新增页面跳转的地址

   <div class="main">
        <form id="form" enctype="multipart/form-data"  action="${ctx}/BRePro/saveBRePro" method="post"> 
        	<input  type="hidden" name="proId" >
        	<input  type="hidden" name="alternativeType">
        	...

  var form = document.getElementById('form');
    var data='${brePro}';
    $(function () {
    	data =JSON.parse(data);
    	$("#form").form("load", data);
    });
    //表单保存
    function submitForm(){
    	if($("#proName").val() && $("#proName").val().trim()!=''){
        		form.submit();
    	}else {
    		alertInfo('请填写项目名称！');
    	}
    }

上面代码是对应的新增页面js

总结

表单具有默认的提交行为，默认是同步的，同步表单提交，浏览器会锁死（转圈儿）等待服务端的响应结果。
表单的同步提交之后，无论服务端响应的是什么，都会直接把响应的结果覆盖掉当前页面
后来有人想到了一种办法，来解决这个问题，那边是服务端重定向（服务端重定向针对异步请求无效)

消除自动填充：通过添加readonly＆onfocus =“this.removeAttribute（'readonly'）;
解决了这个问题。

<input type="password" name="Password" autocomplete="off" readonly 
       onfocus="this.removeAttribute('readonly');" >