一个表单多个按钮提交区分判断的方法

2012-09-18 4 条评论 31,168 次阅读 被赞了 0 次

 
在一个表单中有多个个提交按钮，想实现点击不同的按钮，实现不同的操作。那么该怎么办呢？

此时我们可以用javascript脚本判断来进行选择。参考方案如下各示例。

参考方案1：

在开头定义javascript然后在正文中的按钮上用onClick="return calc_form()"来转向

code: ' + ddLang + advanced + '
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function print_form()
{
  document.form.action = "print_page.php?id=<?=$id?>";
  document.form.target = "_blank";
}
 
function sub_form()
{
  document.form.input_ok.value = 1;
  document.form.action = "buy_list.php?id=<?=$id?>";
  document.form.target = "";
}
 
function save_form()
{
 
  document.form.input_ok.value = 2;
  document.form.action = "buy_list.php?id=<?=$id?>";
  document.form.target = "";
}

参考方案2：

最简单的办法：为每一个按钮写一段脚本

code: ' + ddLang + advanced + '
1
2
3
4
5
6
<form id=frm1 name=frm1 method=post action="">
<input id=sendvalue name=sendvalue>
<input type=button id=btn1 name=btn1 onclick="send1()" value="提交1">
<input type=button id=btn1 name=btn1 onclick="send2()" value="提交2">
<input type=button id=btn1 name=btn1 onclick="send3()" value="提交3">
</form>
code: ' + ddLang + advanced + '
1
2
3
4
5
6
7
8
9
10
11
<script>
  function send1() {
    frm1.sendvalue = 1;
    frm1.submit();
  }
 
  function send2() {
    frm1.sendvalue = 2;
    frm1.submit();
  }...
</script>

参考方案3：

code: ' + ddLang + advanced + '
1
2
3
4
5
6
7
8
9
10
11
12
switch ($submit)
{
case "添加":
  echo "选择的是添加";
  break;
case "删除":
  echo "选择的是删除";
  break;
case "重命名":
  echo "选择的是重命名";
  break;
}

参考方案4：

一个表单多个按钮，用脚本实现表单的分向提交的另一种方法

code: ' + ddLang + advanced + '
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form method="post" action="option.php?action=mailsend_out" id="writemail">
  <input type="submit" value="发送邮件" onClick="sendmail()" id="sendmaila">
  <input type="button" value="存为草稿" onClick="savedraft();" id="saveddd">
  <input type="hidden" name="saveD" value="">
  <input type="button" onClick="history.back();" value="返回" id="backhistory">
  <script>
    function savedraft() {
      document.getElementById("saveD").value = "savedraft";
      //alert(document.getElementById("saveD").value);
      document.getElementById("writemail").submit();
    }
 
    function sendmail() {
      document.getElementById('sendmaila').disabled = 'disabled';
      document.getElementById('sendmaila').value = '发送中，请等待…..';
      document.getElementById('saveddd').disabled = 'disabled';
      document.getElementById('backhistory').disabled = 'disabled';
      document.getElementById('writemail').submit();
    }
  </script>
</form>
</coolcode>

其中<input type="hidden" name="saveD" value="">是关键，也就是设置一个hidden的input，在按了不同的按钮赋值给此hidden不同的值，那么在option.php?action=mailsend_out的处理步骤中只要判断saveD的value就可以了
此条目发表在 javascript 分类目录。将固定链接加入收藏夹。

参考方案5： 

在某些情况下，我们希望同一个表单可以根据用户的选择，提交给不同的后台处理程序。

即，表单的分向提交。如，我们希望实现用户在发送贴子的时候，既发送提交功能又有预览功能时，就会遇到上述问题。即，当用户点击提交按钮时，我们希望表单提交给"提交"处理程序；而当用户点击预览按钮时，我们希望表单提交给"预览"处理程序。那么，如何实现上述功能呢？下面代码可以很好的解决这个问题。

code: ' + ddLang + advanced + '
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form name="form" method="post">
  测试表单:
  <input name="test">
  <br>
  <input type="button" value="提交" onClick=send()>
  <input type="button" value="预览" onClick=preview()>
</form>
<script language=javascript>
  function send() {
    document.form.action = "send.asp"
    document.form.submit()
  }
 
  function preview() {
    document.form.action = "preview.asp"
    document.form.submit()
  }
</script>

关于上面实例的两点说明：

        1、在整个表单中，不应有名字为action或submit的标签，否则将会产生"对象不支持此属性和方法"的错误(但是在firefox中这个没有报错)。如代码 "<input type=''xxxx'' name=''action'' >"在表单中是不允许出现的；

        2、在form标签中应该存在name属性。即，应该给表单取一个名字。语句document.form.action和document.form.submit中的"form"也就是表单的名字。

        表单的分向提交不仅仅使用在论坛的程序中，它还可以运用在许多场合下。恰当的运用表单的分向提交功能可以大大的增强网站的人性化程度。

        有时调试程序就出现了这样的问题，就是出现了"对象不支持此属性和方法"的错误，一直无法定位出来，都快疯掉了，原来就是因为一个button命名为submit了。
 

参考方案6：

一个文本框两个按钮怎么分别提交数据 ?

code: ' + ddLang + advanced + '
1
2
3
4
5
6
7
8
9
10
11
<script language=javascript>
  function ask() {
    document.all.dform.action = "ask.asp";
    document.all.dform.submit();
  }
</script>
<form action="search.jsp" method=get name=dform>
  <input type=text>
  <input type=submit value="搜索">
  <input type=button value="提问" onclick="cancel();">
</form>

相关文章:

Default Thumbnail用VC6.0实现按钮或标签的超级链接 Default ThumbnailJAVA中Jtable标签设置超级链接：基于Java Swing的超链接标签和超链接按钮的实现 Default Thumbnail30个基于CSS设计的优秀导航和按钮设计教程 Default Thumbnail表单提交Post和Get方式传值的区别
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
  1. 加盟店排行榜说道：
    2012年10月21日 6:42 下午

    今天提早来拜访楼主，楼主的文字工笔感觉很适合我们阅读，感谢楼主的文章，很不错，坚持写下去，兄弟我们支持你！

    回复
  2. 圆刀片说道：
    2012年10月16日 3:27 上午

    我们希望实现用户在发送贴子的时候，既发送提交功能又有预览功能时，就会遇到上述问题。

    回复
  3. 长春PBT说道：
    2012年10月1日 8:15 下午

    我们希望实现用户在发送贴子的时候，既发送提交功能又有预览功能时，就会遇到上述问题。

    回复
  4. cnjoel博客说道：
    2012年09月20日 7:40 下午

    兄弟 申请交换链接
    我的 cnjoel博客 http://www.cnjoel.com/
    贵站做好了，请查。
    [reply=任侠,2012-09-20 04:45 PM]挺好的博客，链接已添加，欢迎时常互访！[/reply]

    回复
  5. 老左说道：
    2012年09月19日 7:06 下午

    这个方法不错。

    回复

回复 cnjoel博客 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code