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

7 篇文章 0 订阅
4 篇文章 0 订阅

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.     
  9. //提交第一个表单   
  10.   tform1.submit();   
  11. //提交第二个表单   
  12.   tform2.submit();   
  13.       
  14.   
  15. }   
  16.   
  17. </script>   
  18.   
  19.     
  20. <!--  第一个表单,方法为post,会触发后台的login.do对应的servlet ,提交到_hiddenframe1里了,即login.do返回的结果会隐藏在_hiddenframe1中-->   
  21. <form name="form1" id="formid1" action="login.do" method="post"  target="_hiddenframe1">   
  22.     <input type="text" name="tname" value="张三">   
  23.     <input type="button" name="tsub" value="提交" onClick="javascript:submitit();">   
  24. </form>   
  25.   
  26. <!--  第二个表单,方法为post,会触发后台的sms.do对应的servlet ,提交到_hiddenframe2里了,即sms.do返回的结果会隐藏在_hiddenframe2中.其中通过style="display:none;"进行了隐藏。 -->   
  27.   
  28. <form name="from2" id="formid2" action="sms.do" method="post" style="display:none;"  target="_hiddenframe2">   
  29.     <input type="text" name="tname" value="王五">   
  30. </form>   
  31.   
  32.   
  33. <!-- 加入了style="display:none;"用于隐藏 -->   
  34. <iframe name="_hiddenframe1" style="display:none;"></iframe>   
  35.   
  36. <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" οnclick="sm1()" />  
    <input name="bt2" type="button" id="bt2" value="提交到2.asp" οnclick="sm2()" />  
</form>  
</body>  
</html> 
=============================================================================

用JS提交吧。

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

<input type='button' value='aa' οnclick="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" οnclick="tosubmit1()">
<input type="button" name="submit2" value="提交给2.asp" οnclick="tosubmit2()">
<input type="button" name="submit3" value="提交给3.asp" οnclick="tosubmit3()">
</form>
方法二:使用多个button按钮,定义每个按钮的onclick事件的处理过程,不需要判断按钮的value值,而直接定义form表单的action值,代码比较简单,如下:
<form name="submitform2" action="" method="post" target="_blank">
<input name="submit1" value="提交给1.asp" type="button" οnclick="submitform2.action='1.asp';submitform2.submit();">
<input name="submit2" value="提交给1.asp" type="button" οnclick="submitform2.action='2.asp';submitform2.submit();">
<input name="submit3" value="提交给1.asp" type="button" οnclick="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" οnclick="dothis(this)">
<input type="submit" name="submit2" value="提交给2.asp" οnclick="dothis(this)">
<input type="submit" name="submit3" value="提交给3.asp" οnclick="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>

 

 

 

 

 

 

  • 2
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Django中可以使用多个表单(Multiple Forms)来处理单个视图中的多个表单。这在需要在同一页面上收集多个表单数据的情况下非常有用。 下面是一个简单的例子: forms.py: ```python from django import forms class Form1(forms.Form): name = forms.CharField() class Form2(forms.Form): email = forms.EmailField() class Form3(forms.Form): message = forms.CharField(widget=forms.Textarea) ``` views.py: ```python from django.shortcuts import render from .forms import Form1, Form2, Form3 def multiple_forms(request): form1 = Form1() form2 = Form2() form3 = Form3() if request.method == 'POST': if 'form1_submit' in request.POST: form1 = Form1(request.POST) if form1.is_valid(): # 处理表单1的数据 pass elif 'form2_submit' in request.POST: form2 = Form2(request.POST) if form2.is_valid(): # 处理表单2的数据 pass elif 'form3_submit' in request.POST: form3 = Form3(request.POST) if form3.is_valid(): # 处理表单3的数据 pass context = { 'form1': form1, 'form2': form2, 'form3': form3 } return render(request, 'multiple_forms.html', context) ``` template: ```html <form method="POST"> {% csrf_token %} {{ form1.as_p }} <button type="submit" name="form1_submit">Submit Form 1</button> </form> <form method="POST"> {% csrf_token %} {{ form2.as_p }} <button type="submit" name="form2_submit">Submit Form 2</button> </form> <form method="POST"> {% csrf_token %} {{ form3.as_p }} <button type="submit" name="form3_submit">Submit Form 3</button> </form> ``` 在这个例子中,我们定义了三个表单(Form1、Form2、Form3),并在视图函数中创建了这三个表单的实例。然后,我们在视图函数中处理每个表单的提交,并在模板中显示这三个表单。 在模板中,我们为每个表单创建了一个单独的form元素,并使用不同的提交按钮来提交不同的表单。当表单数据提交时,视图函数会根据提交的表单名称来处理相应的表单数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值