简述JavaScript提交表单的方式 (Using JavaScript Submit Form)


Posted in Javascript onMarch 18, 2016

最近做项目遇到用Javascript提交表单的问题, 之前也做过几次, 但是不够全面, 这次总结出了几种用JavaScript提交表单的方式, 并且对此作出了比较, 选出了一种最适合此项目的方式。

我目前正在为Sun Communication Suite做一个创建用户的小型系统,大家都知道我们可以通过表单,Ajax 和链接来访问服务器, 最简单的方法就是使用连接, 例如:<a href=UserServlet?event=SEARCH_MAILING_LIST¤tPage=1&keyword="+keyword+"&searchBy="+searchBy+"&cn="+request.getAttribute("cn")+">First Page</a>, 把所有需要的数据全部写到超链接上, 如果你能够观察一下就会知道,在上边的链接中只有currentPage是变化的, 其他参数event, keyword, searbyBy和cn是不变的, 那么我就想到如果我能够把这些不变的参数封装到一个表单中, 当用户点击上面的超链接的时候我用JavaScript把这个表单提交, 那么我自然会访问到服务器。

表单:

<form name="pagination" id="pagination" action="UserServlet" method="get">
<input type="hidden" name="currentPage" value="1"/>
<Input type="hidden" name="cn" value="<%=request.getAttribute("cn")%>"/>
<input type="hidden" name="keyword" value="<%=request.getAttribute("keyword")%>"/>
<input type="hidden" name="searchBy" value="<%=request.getAttribute("searchBy")%>"/>
<input type="hidden" name="event" value="SEARCH_USER_FOR_MAILING_LIST">
</form>

在提交表单的过程中, 我只需要把参数currentPage传给JavaScript就好了,所以我就把上面的连接改为下边的形式:

<a href=# onclick=document.pagination.currentPage.value="+pages[j]+";document.pagination.submit();><span style='color: red;'>["+pages[j]+"]</span></a>

大家要注意一定要把document.pagination.currentPage.value="+pages[j]+";写在document.pagination.submit();的前边, 这样在用户提交表单之前, 参数currentPage就已经被修改为我们需要的数值。 这样我就完成了用连接来提交表单, 但是我有遇到了一个问题, 我需要试用上面的这段代码在很多页面, 如果我能统一的写一段JavaScript的话,就会方面我以后对整个系统做维护, 所以我几写了一个JavaScript的函数。

function submitForm(id,currentPage){
//var currentPage = document.pagination.currentPage.value;
//alert(currentPage);
//currentPage=100;
//var currentPage = document.pagination.currentPage.value;
//alert(currentPage);
document.pagination.currentPage.value=currentPage;
var form = document.getElementById(id);
form.submit();
}

然后我在超连接的onclick事件上条用这个函数:

<a href=# onclick=submitForm('pagination',"+pages[j]+")>["+pages[j]+"]</a>, 大家可以看到整段代码简洁了不少。

所以我总结了一下,用Javascript提交表单大概有两种写法(根据我目前的理解)

1. document.formName.submit();

2. var form = document.getElementById(id);

form.submit();

下次我想和大家分享一下用JNDI实现分页。我把这次的代码附在下边, 大家可以参考一下。

commons.js

function submitForm(id,currentPage){
//var currentPage = document.pagination.currentPage.value;
//alert(currentPage);
//currentPage=100;
//var currentPage = document.pagination.currentPage.value;
//alert(currentPage);
document.pagination.currentPage.value=currentPage;
var form = document.getElementById(id);
form.submit();
}

mailingListMemberAdd.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page import="java.util.LinkedList" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page import="my.gov.rmp.webmail.domain.User" %>
<%@ page import="my.gov.rmp.webmail.util.Pager" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add Member to Mailing List:<%=request.getAttribute("cn")%></title>
<script type="text/javascript" src="../js/commons.js"></script>
</head>
<body>
<jsp:include page="../inc/admin/headerMail.jsp"/>
<div id="main"> 
<div id="contents" >
<h2>Add new members to mailing list: <span style="color:blue;"><%=request.getAttribute("cn")%></span></h2>
<form name="addMailingListMember" id="addMailingListMember" action="UserServlet" method="post">
<table cellspacing="5" cellpadding="5">
<% 
Pager pager =(Pager) request.getAttribute("pager");
int currentPage =pager.getCurrentPage();
int pageSize = pager.getPageSize();
int i=(currentPage-1)*pageSize;
LinkedList users = (LinkedList)request.getAttribute("users");
if(!users.isEmpty()){
%>
<tr style="font-weight:bold"><td>No.      
</td><td>UID:</td><td>gCode:</td><td>Givenname:</td><td>Surname:</td><td>Mail:</td><td>Description:</td></tr>
<%
for(Iterator iter = users.iterator();iter.hasNext();){
User user = (User) iter.next();
i++;
// Attributes attrs = user.getAttrs();
%>
<tr><td><%=i%>.  <input type="checkbox" name="uid" value="<%=user.getUid()%>" /></td>
<td width="15%"><%=user.getUid()%></td>
<td><%=user.getGCode()%></td>
<td><%=user.getGivenName()%></td>
<td><%=user.getSn()%></td>
<td width="30%"><%=user.getMail()%></td>
<td><%if(user.getDescription()==null||user.getDescription().length()==0){%>Not Set<%} else %><%=user.getDescription()%></td>
</tr> 
<%
}
%>
<input type="hidden" name="cn" value="<%=request.getParameter("cn")%>"/>
<input type="hidden" name="event" value="ADD_MAILING_LIST_MEMBER" />
<tr><td><button onclick="return selectAllCheckBoxs('uid');">Select All</button></td><td><button onclick="return deselectAllCheckBoxs('uid')">Deselect All</button></td><td></td><td><input type="submit" name="submit" value="Add to Mailing List"/></td></tr>
</table>
</form>
<hr>
<P STYLE="margin-top:-5px;"><strong>Pages:</strong>
<form name="pagination" id="pagination" action="UserServlet" method="get">
<input type="hidden" name="currentPage" value="1"/>
<Input type="hidden" name="cn" value="<%=request.getAttribute("cn")%>"/>
<input type="hidden" name="keyword" value="<%=request.getAttribute("keyword")%>"/>
<input type="hidden" name="searchBy" value="<%=request.getAttribute("searchBy")%>"/>
<input type="hidden" name="event" value="SEARCH_USER_FOR_MAILING_LIST">
</form>
<%
int[] pages = pager.getPages();
String keyword = request.getAttribute("keyword").toString();
String searchBy = request.getAttribute("searchBy").toString();
if(pager.isHasFirst()){
out.println("<a href=UserServlet?event=SEARCH_USER_FOR_MAILING_LIST¤tPage=1&keyword="+keyword+"&searchBy="+searchBy+"&cn="+request.getAttribute("cn")+">First Page</a>  ");
}
if(pager.isHasPrevious()){
out.println("<a href=# onclick=submitForm('pagination',"+(pager.getCurrentPage()-1)+")>Prev Page</a>  ");
}
for(int j=0;j<pages.length;j++){
if(pager.getCurrentPage()==pages[j]){
out.println("<a href=# onclick=document.pagination.currentPage.value="+pages[j]+";document.pagination.submit();><span style='color: red;'>["+pages[j]+"]</span></a>");
}else {
out.println("<a href=# onclick=submitForm('pagination',"+pages[j]+")>["+pages[j]+"]</a>");
}
}
if(pager.isHasNext()){
out.println("<a href=# onclick=submitForm('pagination',"+(pager.getCurrentPage()+1)+")>Next Page</a>  ");
}
if(pager.isHasLast()){
out.println("<a href=# onclick=submitForm('pagination',"+pager.getTotalPage()+")>Last Page</a>  ");
}
%>
</P>
<%
} else {
//make the mailing list member availabe when user are trying to re-run the search 
//request.setAttribute("members", members);
%>
<p>No results are matched your keyword or the user that you are looking for is already a member of this mailing list, please specify another keywork and <a href="<%=request.getContextPath()%>/admin/mailingListMemberSearch.jsp?cn=<%=request.getParameter("cn")%>">Search Again</a></p>
<% 
}
%>
</div>
</div>
</body>
</html>
Javascript 相关文章推荐
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 #Javascript
Javascript的表单验证-初识正则表达式
Mar 18 #Javascript
Javascript的表单验证-提交表单
Mar 18 #Javascript
Javascript的表单与验证-非空验证
Mar 18 #Javascript
悬浮广告方法日常收集整理
Mar 18 #Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 #Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 #Javascript
You might like
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
Python中使用PIPE操作Linux管道
2015/02/04 Python
简单实现python收发邮件功能
2018/01/05 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
Django框架验证码用法实例分析
2019/05/10 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
python计算auc的方法
2020/09/09 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript