实现同时提交多个form(基础方法) 收集

分类: 1.2-JSP 1.3-J2EE 1.1J2se 1.0-Java相关2011-12-01 20:59 1644人阅读 评论(0) 收藏 举报

buttoninputactionjavascriptservletfunction

js实现同时提交多个form ——基础巩固

Js代码

<script language="javascript">  

  1. //点击提交按钮触发下面的函数
  2. function submitit(){  
  3. //第一个表单
  4. var tform1= document.getElementById("formid1");  
  5. //第二个表单
  6. var tform2= document.getElementById("formid2");  
  7. //提交第一个表单
  8.   tform1.submit();  
  9. //提交第二个表单
  10.   tform2.submit();  
  11. }  
  12. </script>  
  13. <!--  第一个表单,方法为post,会触发后台的login.do对应的servlet ,提交到_hiddenframe1里了,即login.do返回的结果会隐藏在_hiddenframe1中-->  
  14. <form name="form1" id="formid1" action="login.do" method="post"  target="_hiddenframe1">  
  15.     <input type="text" name="tname" value="张三">  
  16.     <input type="button" name="tsub" value="提交" onClick="javascript:submitit();">  
  17. </form>  
  18. <!--  第二个表单,方法为post,会触发后台的sms.do对应的servlet ,提交到_hiddenframe2里了,即sms.do返回的结果会隐藏在_hiddenframe2中.其中通过style="display:none;"进行了隐藏。 -->  
  19. <form name="from2" id="formid2" action="sms.do" method="post" style="display:none;"  target="_hiddenframe2">  
  20.     <input type="text" name="tname" value="王五">  
  21. </form>  
  22. <!-- 加入了style="display:none;"用于隐藏 -->  
  23. <iframe name="_hiddenframe1" style="display:none;"></iframe>  
  24. <iframe name="_hiddenframe2"></iframe> 

[js] view plaincopy

  1. <script language="javascript"> 
  2. //点击提交按钮触发下面的函数
  3. function submitit(){ 
  4. //第一个表单
  5. var tform1= document.getElementById("formid1"); 
  6. //第二个表单
  7. var tform2= document.getElementById("formid2"); 
  8. //提交第一个表单
  9.   tform1.submit(); 
  10. //提交第二个表单
  11.   tform2.submit(); 
  12. </script> 
  13. <!--  第一个表单,方法为post,会触发后台的login.do对应的servlet ,提交到_hiddenframe1里了,即login.do返回的结果会隐藏在_hiddenframe1中--> 
  14. <form name="form1" id="formid1" action="login.do" method="post"  target="_hiddenframe1"> 
  15.     <input type="text" name="tname" value="张三"> 
  16.     <input type="button" name="tsub" value="提交" onClick="javascript:submitit();"> 
  17. </form> 
  18. <!--  第二个表单,方法为post,会触发后台的sms.do对应的servlet ,提交到_hiddenframe2里了,即sms.do返回的结果会隐藏在_hiddenframe2中.其中通过style="display:none;"进行了隐藏。 --> 
  19. <form name="from2" id="formid2" action="sms.do" method="post" style="display:none;"  target="_hiddenframe2"> 
  20.     <input type="text" name="tname" value="王五"> 
  21. </form> 
  22. <!-- 加入了style="display:none;"用于隐藏 --> 
  23. <iframe name="_hiddenframe1" style="display:none;"></iframe> 
  24. <iframe name="_hiddenframe2"></iframe> 

除上面原始的方法外,目前的ajax技术就能很方便的实现多个表单提交。可以使用目前广泛被使用的jQuery框架。

一个表单form、submit提交到多个不同页面 

在做管理页面的时候常常遇到这样的情况:全选所有列表,然后进行多个操作(删除、转移等),这样每条记录做一个表单比较麻烦,HTML代码太多而且操作复杂。通常会遇到了一个表单提交到不同的处理页面,比如执行删除的delete.asp 或者move.asp 。上网找了下资料,大多数方法都是通过Javascipt来实现了以上的功能,代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>一个表单、多个提交按钮、提交到多个不同页面</title>  
</head>  
<script>  
function sm1(){   
document.getElementById("form_78").action="1.asp";   
document.getElementById("form_78").submit();   
}   
function sm2(){   
document.getElementById("form_78").action="2.asp";   
document.getElementById("form_78").submit();   
}   
</script>  
<form action="" method="post" name="form_78" id="form_78">  
    <input name="mytext" type="text" id="mytext" />  
    <input name="bt1" type="button" id="bt1" value="提交到1.asp" onclick="sm1()" />  
    <input name="bt2" type="button" id="bt2" value="提交到2.asp" onclick="sm2()" />  
</form>  
</body>  
</html> 
=============================================================================

用JS提交吧。

<input type='button' value='aa' onclick="dosubmit('show')" />

<input type='button' value='aa' onclick="dosubmit('js')" />

<script>

function dosubmit(otype){

document.myform.action='123.asp?otype=' + otype;

document.myform.submit();

}

</script>

==================================================================================

JS一个表单提交到多个页面的方法汇总
作者:bcw52    文章来源:网络    点击数:71    更新时间:2010-12-3

方法一:使用多个button按钮,为每个按钮的onclick事件设计一个子过程,通过读取按钮的值来判断向谁提交数据,源代码如下:
<script language="javascript">
function tosubmit1()
{
document.submitform1.action="1.asp";
document.submitform1.submit();
}  
function tosubmit2()
{
document.submitform1.action="2.asp";
document.submitform1.submit();
}
function tosubmit3()
{
document.submitform1.action="3.asp";
document.submitform1.submit();
}
</script>
</head>    
<form name="submitform1" action="" method="post" target="_blank">
<input type="button" name="submit1" value="提交给1.asp" onclick="tosubmit1()">
<input type="button" name="submit2" value="提交给2.asp" onclick="tosubmit2()">
<input type="button" name="submit3" value="提交给3.asp" onclick="tosubmit3()">
</form>
方法二:使用多个button按钮,定义每个按钮的onclick事件的处理过程,不需要判断按钮的value值,而直接定义form表单的action值,代码比较简单,如下:
<form name="submitform2" action="" method="post" target="_blank">
<input name="submit1" value="提交给1.asp" type="button" onclick="submitform2.action='1.asp';submitform2.submit();">
<input name="submit2" value="提交给1.asp" type="button" onclick="submitform2.action='2.asp';submitform2.submit();">
<input name="submit3" value="提交给1.asp" type="button" onclick="submitform2.action='3.asp';submitform2.submit();">
</form>
方法三:同样使用多个button按钮,也同样为每个按钮设计一个onclick事件子过程,不同的是使用switch case语句来判断button按钮的value值,从而作相应的处理,代码如下:
<form name="submitform3" action="" method="post" target="_blank">
<input type="submit" name="submit1" value="提交给1.asp" onclick="dothis(this)">
<input type="submit" name="submit2" value="提交给2.asp" onclick="dothis(this)">
<input type="submit" name="submit3" value="提交给3.asp" onclick="dothis(this)">
</form>
<script language="javascript">
function dothis(obj)
{
switch(obj.value)
{
case "提交给1.asp":
document.submitform3.action="1.asp";
break;
case "提交给2.asp":
document.submitform3.action="2.asp";
break;
case "提交给3.asp":
document.submitform3.action="3.asp";
break;
}
}
</script>

实现同时提交多个form(基础方法) 收集的更多相关文章

  1. 实现同时提交多个form(基础方法) 收集(转)

    方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

  2. js实现无刷新表单提交文件,将ajax请求转换为form请求方法

    最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...

  3. asp.net.mvc 中form表单提交控制器的2种方法和控制器接收页面提交数据的4种方法

    MVC中表单form是怎样提交? 控制器Controller是怎样接收的? 1..cshtml 页面form提交 (1)普通方式的的提交

  4. form(form基础、标签渲染、错误显示 重置信息、form属性、局部钩子、全局钩子)

    form基础 Django中的Form使用时一般有两种功能: 1.生成html标签 2.验证输入内容 要想使用django提供的form,要在views里导入form模块 from django im ...

  5. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  6. ASP.NET 中HTML和Form辅助方法

    Form辅助方法 Form最重要的属性就是action和method,action指明form中的数据被提交到哪里,method指明用什么方法,默认为GET,下面是一个简单的例子: <form ...

  7. js的form基础知识点

    在HTML 中,表单是由<form>元素来表示的,而在JavaScript 中,表单对应的则是HTMLForm-Element 类型.HTMLFormElement 继承了HTMLElem ...

  8. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  9. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

随机推荐

  1. BlockingQueue drainTo()

    BlockingQueue BlockingQueue的核心方法:放入数据: offer(anObject):表示如果可能的话,将anObject加到BlockingQueue里,即如果Blockin ...

  2. ORACLE中函数MONTHS_BETWEEN的使用

    格式:MONTHS_BETWEEN(DATE1,DATE2) MONTHS_BETWEEN函数返回两个日期之间的月份数. SQL> ', 'yyyymmdd')) as months from ...

  3. 基于rest_framework和redis实现购物车的操作,结算,支付

    前奏: 首先,要在主机中安装redis,windows中安装,下载一个镜像,直接进行下一步的安装,安装成功后,在cmd中输入redis-cli 安装python的依赖库: redis     和   ...

  4. Convert Sorted List to Binary Search Tree&&Convert Sorted Array to Binary Search Tree——暴力解法

    Convert Sorted List to Binary Search Tree Given a singly linked list where elements are sorted in as ...

  5. .net core 2.0学习记录(三):内置IOC与DI的使用

    本篇的话介绍下IOC和ID的含义以及如何使用.Net Core中的DI. 一.我是这么理解IOC和DI的: IOC:没有用IOC之前是直接new实例来赋值,使用IOC之后是通过在运行的时候根据配置来实 ...

  6. Web测试中容易被忽略的Charset问题

    今天继续进行一个更综合的脚本制作,录制设置.进行录制.脚本修改,一切都轻车熟路,进行得很顺利.经过近一个小时的对比和修改,OK,脚本大功告成,终于可以小试牛刀了,嘿嘿.    运行,replay lo ...

  7. vue验证码组件

    1.效果图 2.全部代码: <template> <div class="join_formitem"> <label class="enq ...

  8. Foxmail 登录 qq 账号时无法登录 提示我们设置了独立密码或使用授权码登录的解决方法

    Foxmail 登录 qq 账号时无法登录  提示我们设置了独立密码或使用授权码登录的解决方法 1.首先我们设置我们邮箱的类型如下图所示 2.打开网页版的qq邮箱  在设置--->账户---&g ...

  9. 【cocos2d-js网络教程篇】cocos2d-js http网络请求

    前言 刚入手cocos2d-js,看到网上的JS的http网络请求,大部分都是错的.原因在于,js-tests里面的网络请求实例没有给出加载完成事件.正确的加载完成事件如下: var xhr = cc ...

  10. 再聊语言,模式,OOD

    今天与人再次聊到这个话题,有人在为"到底该用什么模式"而烦恼,我相信,每个都经历过这个阶段一定都会感觉很熟悉这个烦恼我认为, 模式不是目的,只是工具,达到设计目标的工具,我们不会因 ...