Die*_*ngs 20 html javascript forms submit
让我们设想一个带有两个提交按钮的HTML表单.其中一个位于表格的上半部分,并做一些不那么重要的事情.另一个按钮是实际提交按钮,用于保存输入的数据.此按钮位于表单的末尾.这两个按钮将触发不同的动作网址.
有经验的用户喜欢通过按"输入"或"返回"而不是单击相应按钮来提交表单.
不幸的是,浏览器将查找当前表单的第一个提交按钮,并使用它来执行表单提交.因为在我的表单中第二个按钮是实际的提交按钮,我需要告诉浏览器使用这个特定按钮(或与之关联的action-url).
我没有链接javascript监听器,它正在寻找按键或类似的东西.所以我正在寻找一个更好的解决这个问题的方法.但是,欢迎javascript或jquery解决方案(没有keypressed-listerner).
非常感谢你的帮助.
Luc*_*cas 19
将您的第一个按钮更改为a <input type="button" />.
理论上至少,你可以submit在表单中有三个按钮.
按钮2是现有的"不太重要"按钮(从表单的中间向下),按钮3是现有表单中现有的"实际提交"按钮.
按钮1应该被隐藏(使用CSS display:none或visibility: hidden),并且应该执行与当前"实际提交"完全相同的功能.我认为它仍然是浏览器找到的第一个按钮,无论其可见性如何.
<form method="post" method="whatever.php" enctype="form/multipart">
<fieldset id="first">
<label>...<input />
<label>...<input />
<label>...<input />
<input type="submit" value="submit" style="visibility: hidden;" <!-- or "display: none" --> />
<input class="less_important" type="submit" value="submit" />
</fieldset>
<fieldset id="second">
<label>...<input />
<label>...<input />
<label>...<input />
<input type="submit" value="submit" class="actual_submit" />
</fieldset>
</form>
编辑回应评论:
我以为隐藏的按钮默认也被禁用了？[的md5sum]
这是一个有效的观点,但我在发布之前只在Firefox(3.5.7,Ubuntu 9.10)中进行了测试,其中两种方法的技术都是1.粘贴完整的xhtml文件(下面),这是我在这些评论之后进行测试的基础.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>3button form</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('input[type="submit"]').click(
function(e){
alert("button " + $(this).attr("name"));
}
);
}
);
</script>
</head>
<body>
<form method="post" method="whatever.php" enctype="form/multipart">
<fieldset id="first">
<label>...<input />
<label>...<input />
<label>...<input />
<input name="one" type="submit" value="submit" style="display:none;" /><!-- or "display: none" -->
<input name="two" class="less_important" type="submit" value="submit" />
</fieldset>
<fieldset id="second">
<label>...<input />
<label>...<input />
<label>...<input />
<input name="three" type="submit" value="submit" class="actual_submit" />
</fieldset>
</form>
</body>
</html>
display: none应该防止按钮成为表单的活动部分(包含在结果集中,并且符合默认按钮的条件);visibility: hidden不应该.但是这些情况都被某些浏览器弄错了.拥有一个不可见的第一个提交按钮的常规方法是将position: absolute;其移出页面(例如,使用left:-4000px).这是丑陋但可靠的.更改其tabindex也是一个好主意,因此它不会干扰预期的表格标签顺序.
至少有两点我必须提出这个评论.为了:
我很欣赏你对tabindex的评论,这是我从未想过的东西.
我很抱歉,如果我听起来有点狡猾,已经晚了,我累了...... yadda-yadda; 自从我回到家后,我一直在各种浏览器中进行测试,似乎Firefox 3.5+在Windows XP和Ubuntu 9.10上都提供相同的行为 - 报告"按钮一",所有Webkit浏览器(Midori,Epiphany,Safari和Chrome)都失败了并报告"按钮两个".
因此,display: none;对于提交按钮来说,这绝对是一个失败的想法.而visibility:hidden至少是有效的.
我的意思是,无论第一次提交是"display:none;"还是"visibility:hidden",点击"enter"都会触发表单提交事件或表单第一个提交按钮的click事件.
请注意我的jQuery技能是有限的,因此所使用的测试(我一次只运行试图防止执行中发生的冲突,评论我当时没有运行的那个,两者都被显示 - 一个,清楚,评论说)可能是不充分和不具代表性的.
| 归档时间： |
|
| 查看次数： |
14079 次 |
| 最近记录： |