html

您所在的位置:网站首页 718sportplus按钮 html

html

2023-11-27 08:37| 来源: 网络整理| 查看: 265

form表单提交方法 1、type=“submit” 2、type=“image” 3、使用链接来提交表单,javascript的DOM模型: 提交

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

提交

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

代码如下:

function query(){ form.action="query.jsp"; form.submit(); } function update(){ form.action="update.jsp"; form.submit(); }

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

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

表单提交值得注意的地方

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

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

//或者 提交 function checkForm(){ var user= document.getElementById('user').value; var psw= document.getElementById('psd').value; if (...) { //如果验证不通过 return false; } else { //验证通过 return true; } }

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

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

function checkForm(){ var user= document.getElementById('user').value; var psw= document.getElementById('psd').value; if(...){ //验证不通过 return false; } document.getElementById("form1").submit(); } 使用ajax对数据进行 验证后 再提交 //或者 提交 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("提交失败"); } }); }

注意: 如果使用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”); 新增页面跳转的地址

... 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'); 解决了这个问题。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3