网页表单form中提交的两种方式
来源:互联网 发布:软件开发流程图 编辑:程序博客网 时间:2024/05/17 23:20
本文是我本人在开发网页时,在表单中加入了button按钮,本来是用于jQuery点击相应事件的按钮,然后,但我点击button时,发现不是达到jQuery指定效果,原本以为class标签或者其他代码写错,找了很久,之后查找资料,知道表单form提交除了submit提交还有button也会提交,所以总结如何处理不然button 提交表单。两种方式:
**一种是在jQuery代码最后加一句:return false,禁止表单提交;
另一种是定义button标签方式为:<button type="button" id="addFile">新增一个附件**</button>
即指定type为button
以下是一个表单上传文件并且可以在页面添加多个file的前台页面代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery-1.7.2.js"></script><script type="text/javascript"> $(function(){ //全局变量 var i=2; //通过表格来进行操作 $("#addFile").click(function(){ alert("www"); $(this).parent().parent().before("<tr class='file'><td>File" + i +":</td><td><input type='file' name='file" + i +"'/></td></tr><tr class='desc'><td>Desc" + i +":</td><td><input type='text' name='desc" + i +"'/><button type='button' id='delete" + i +"'>删除</button></td></tr>"); i++; //获取新添加的删除按钮 $("#delete"+(i-1)).click(function(){ //获取要删除的行即desc var $tr=$(this).parent().parent(); //file行也要删除删除 $tr.prev("tr").remove(); $tr.remove(); //对i重新排序 $(".file").each(function(index){ var n=index+1; $(this).find("td:first").text("File"+n); $(this).find("td: last input").attr("name","file"+n); }); $(".desc").each(function(index){ var n=index+1; $(this).find("td:first").text("Desc"+n); $(this).find("td: last input").attr("name","desc"+n); }); }); //return false,禁止提交表单 return false; }); });</script><body> <font color="red">${msg }</font> <br><br> <form action="UploadServlet" method="post" enctype="multipart/form-data"> <input type="hidden" id="fileNum" name="fileNum" value="1"/> <!-- 通过表格包装成一个整体 --> <table> <tr class="file"> <td>File1:</td> <td><input type="file" name="file1"/></td> </tr> <tr class="desc"> <td>Desc1:</td> <td><input type="text" name="desc1"/></td> </tr> <tr> <td><input type="submit" id="submit" value="提交"/></td> <!-- 必须指定类型是type="button"否则,点击后会提交表单 --> <td><button type="button" id="addFile">新增一个附件</button></td> </tr> </table> </form></body></html>代码实例仅供参考,请勿copy。哈哈!!
阅读全文
0 0
- 网页表单form中提交的两种方式
- Form表单中数据的两种提交方式
- Form表单提交的两种方式
- form表单的两种提交方式
- form表单提交的两种方式
- form表单提交的两种方式
- easyui form 表单提交两种方式
- form表单提交两种方式
- form表单两种提交方式的区别
- 用超链接提交form表单的两种方式
- Ajax提交Form表单的两种简单方式
- 浏览器在提交form表单时有两种提交方式
- ExtJs中form表单提交的三种方式
- form表单的几种提交方式
- form表单提交的几种方式
- Form表单的几种提交方式
- form表单的六种提交方式
- Form表单的6种提交方式
- SSM框架的整合之路
- H5基础知识第十四课时(用JQuery实现鼠标悬浮时改变样式)
- 跑马灯的代码 和状态选择器的应用
- 原帖删了,我找出来只看得
- 初学ajax,实现用户名重复提示、二级/三级联动下拉框
- 网页表单form中提交的两种方式
- 电调板的调试
- uva10054--欧拉回路--串珠子
- 【js基础】注册时验证输入合法性
- I/O流的汇总一
- 字符及字符串操作函数
- POJ3190 Stall Reservations (贪心+优先队列)
- IOS制作GIF图
- 线段树 之 离散化