方法一:利用form的onsubmit()函数(经常使用)

  1. <script type="text/javascript">
  2. function validateForm(){
  3. if(document.reply.title.value == ""){ //通过form名来获取form
  4. alert("please input the title!");
  5. document.reply.title.focus();
  6. return false;
  7. }
  8. if(document.forms[0].cont.value == ""){ //通过forms数组获取form
  9. alert("please input the content!");
  10. document.reply.cont.focus();
  11. return false;
  12. }
  13. return true;
  14. }
  15. <form name="reply"  method="post" onsubmit="return validateForm( );">
  16. <input type="text" name="title"  size="80" /><br />
  17. <textarea name="cont" cols="80" rows="12"></textarea><br />
  18. <input type="submit" value="提交" >
  19. </form>
  20. 注意:
  21. 1.onsubmit属性内容一定要有return关键字,否则函数会直接执行,不会返回
  22. 2.validateForm一定要返回一个boolean类型的返回值
  23. 3.提交按钮要写成submit类型的

方法二:利用input类型为submit组件的onclick()函数

1.将上面form标签中的onsubmit="return validateForm()"属性,去掉。

2.为“提交”按钮添加onclick事件,如下:

<input type="submit" value="提交" onclick="return validateForm();">

方法三:利用button组件的onclick()函数,手动提交

  1. <script type="text/javascript">
  2. function modifyItem() {
  3. if (trim(document.getElementById("itemName").value) == "") {
  4. alert("物料名称不能为空!");
  5. document.getElementById("itemName").focus();
  6. return;
  7. }
  8. with (document.getElementById("itemForm")) {
  9. method = "post";
  10. action = "item.do?command=modify&pageNo=${itemForm.pageNo}";
  11. submit();
  12. }
  13. }
  14. //返回
  15. function goBack() {
  16. window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";
  17. }
  18. </script>
  19. <form name="itemForm" id="itemForm">
  20. <input name="itemNo" type="text"   id="itemNo" value="${ item.itemNo }" >
  21. <input name="itemName" type="text"   id="itemName" value="${ item.itemName }" >
  22. <input name="btnModify"  type="button" id="btnModify" value=“修改" onclick="modifyItem()">
  23. </form>
  24. 注意:
  25. 1.提交时,设置form的action和methods属性,然后利用form.submit()函数提交。

总结:

1.对form中的组件验证时,前两个使用的是name属性,包括form自身的。

2.如果提交表单时没有反应,同时确定提交表单部分代码没有问题,请查看提交表单前面的js代码,有时前面js的错误会引发莫名其妙的问题。

form提交的更多相关文章

  1. 关于button和form提交的一些问题

    1.form 中type 为submit 和button的区别 submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了. 如果表单在点击提交按钮后需要用JS进行处理( ...

  2. 解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象

    之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的f ...

  3. AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

  4. struts2中form提交到action中的中文参数乱码问题解决办法(包括取中文路径)

    我的前台页是这样的: <body>      <form action="test.action" method="post">     ...

  5. jquery.form.js实现将form提交转为ajax方式提交的使用方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...

  6. jquery.validate+jquery.form提交的三种方式

    原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...

  7. Extjs ajax form 提交

    1.form 提交 form.form.submit({ url: "/HandlerExcelToDB/UploadFile.ashx", params: {}, success ...

  8. 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

  9. HttpWebRequest结合HtmlAgilityPack实现网页form提交

    年前一个项目,需要在某个系统实现系统自动操作. 系统页面使用form提交,页面参数较多,也参数设计一系列计算逻辑,改动一个值,其他值自动改变. 传统方法使用正则表达式匹配参数,构建post参数进行请求 ...

  10. spring MVC做form提交Neither BindingResult nor plain target object for bean name 'command' available

    这两天在做spring3.0 MVC+hibernate3.2的练习中,做简单的form提交, 一直报java.lang.IllegalStateException: Neither BindingR ...

随机推荐

  1. tcp设置超时重传

    TCP超时和重传的基础是怎样根据给定连接RTT设置RTO,若TCP先于RTT开始重传,可能会在网络中引入不必要的重复数据,反之,若延迟至远大于RTT的间隔发送重传数据,整体网络利用率会随之下降.由于R ...

  2. P3379 【模板】最近公共祖先(LCA)(LCT)

    \(\color{#0066ff}{ 题目描述 }\) 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. \(\color{#0066ff}{输入格式}\) 第一行包含三个正整数N.M. ...

  3. ArrayList深度分析:ArrayList和数组间的相互转换

    一.ArrayList转换为数组ArrayList提供public <T> T[] toArray(T[] a)方法返回一个按照正确的顺序包含此列表中所有元素的数组,返回数组的运行时类型就 ...

  4. pycharm加开头注释

    选择 File and Code Templates -> Files -> Python Script #!/usr/bin/env python # encoding: utf-8 ' ...

  5. Qt 学习之路 2(24):Qt 绘制系统简介

    Qt 学习之路 2(24):Qt 绘制系统简介 豆子 2012年10月30日 Qt 学习之路 2 77条评论 Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制.整个绘图系统基于Q ...

  6. 复习一知识点:回调函数callback

    比如我们常用的异步请求: $.ajax({ url:"test.json", type: "GET", data: {username:$("#use ...

  7. [Maven]How do I tell Maven to use the latest version of a dependency?

    Link: http://stackoverflow.com/questions/30571/how-do-i-tell-maven-to-use-the-latest-version-of-a-de ...

  8. C语言中函数声明、形参、实参

    函数原型: 原型prototype是函数的声明:描述了函数的返回值与参数: 函数原型说明了两点: 1.该函数的返回值 2.该函数的参数及其类型 ++++++++++++++++++++++++++++ ...

  9. CodeForces - 476B -Dreamoon and WiFi(DFS+概率思维)

    Dreamoon is standing at the position 0 on a number line. Drazil is sending a list of commands throug ...

  10. spoj COT - Count on a tree(主席树 +lca,树上第K大)

    您将获得一个包含N个节点的树.树节点的编号从1到Ñ.每个节点都有一个整数权重. 我们会要求您执行以下操作: uvk:询问从节点u到节点v的路径上的第k个最小权重 输入 在第一行中有两个整数Ñ和中号.( ...