网页表单form中提交的两种方式

本文是我本人在开发网页时，在表单中加入了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(){//获取要删除的行即descvar $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。哈哈！！

网页表单form中提交的两种方式相关推荐

HTML表单校验非空的两种方式
HTML表单校验非空的两种方式第一种方式第二种方式实例:校验表单中姓名为非空第一种方式 let reg = /\S/; 第二种方式 let reg_name = /^\w+$/; 实例:校验表 ...
Android中保存图片的两种方式
Android中保存图片的两种方式第一种是保存到数据库: 1.保存到数据库: 2.从数据库读取: 二是以图片格式保存到本地 1. A.声明tempFile以保存到指定路径: B.保存到tempFil ...
宇宙中至少有两种方式能灭绝人类，第一种仅需两秒
来源:科学的乐园在科幻小说<三体Ⅲ:死神永生>之中,歌者文明"母世界"的宇宙飞船曾经利用宇宙规律武器二向箔来摧毁地球文明,将地球所处的三维世界完全变成了一个二维世界. ...
Servlet获取Excel中数据的两种方式
Servlet解析Excel文件的两种方式简单分享一下Servlet通过解析Excel文件得到其中数据的两种方式第一种:前端获取思路:通过layui的第三方插件 layui.excel 解析ex ...
java声明异常必须抛出吗_简述java中抛出异常的两种方式
java编程中经常遇到异常,这时就需要利用java中的异常抛出机制,在java中提供了两种抛出异常的方法:try{} catch() {}和throw. 一.抛出异常的两种方式 (1) 首先我们来看 ...
网页表单回车自动提交问题
文章目录 1 当前问题 2 问题原因 3 解决问题 3.1 取消text默认提交行为 3.2 取消表单的默认提交行为 3.3 增加隐藏不显示的text 4 问题扩展 1 当前问题网页中,一个form ...
python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式
本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...
python中异常处理的两种方式_Python 之异常处理
一错误和异常 •错误分两种: 1.语法错误 1 #!/usr/bin/env python 2 #-*- coding:utf-8 -*- 3 #举列 4 print('hello world' # ...
JavaScript中避免Form重复提交的两种方案
1.javascript ,设置一个变量,只允许提交一次. <script language="javascript"> var checkSubmitFlg ...

网页表单form中提交的两种方式

网页表单form中提交的两种方式相关推荐

最新文章

热门文章