爱周末 » 表单 http://zhoumo123.cn 知识分享，共同进步。zhoumo123.cn Thu, 07 Nov 2019 05:53:49 +0000 zh-CN hourly 1 http://wordpress.org/?v=4.0.1 jquery表单提交获取元素值并显示 http://zhoumo123.cn/web/form/825.html http://zhoumo123.cn/web/form/825.html#comments Sun, 28 Sep 2014 03:20:53 +0000 http://zhoumo123.cn/?p=825 看下面的例子，控制jquery对象，表单提交后，通过jquery中的方法获取元素的值，并将获取的数据显示出来。

query-1.3

 

html代码如下：


<!doctype html>
<html>
<head>
<title>控制jQuery对象</title>
<script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
.divFrame{width:260px;border:solid 1px #666;font-size:10pt}
.divTitle{background-color:#eee;padding:5px}
.divContent{padding:8px;font-size:9pt}
.divTip{width:244px;border:solid 1px #666;padding:8px;font-size:9pt;margin-top:5px;display:none}
.txtCss{border:solid 1px #ccc}
.divBtn{padding-top:5px}
.divBtn .btnCss{border:solid 1px #535353;width:60px}
</style>
<script type="text/javascript">
$(function(){
$("#btnSubmit").click(function(){
var oTxtValue=$("#Text1").val(); //获取文本框的值
var oRdoValue=$("#Radio1").is (":checked")?"男":"女"; //获取单选框按钮值
var oChkValue=$("#Checkbox1").is (":checked")?"已婚":"未婚";//获取复选框按钮值
$("#divTip").css("display","block").html(oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue); //显示提示文本元素
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">请输入如下信息</div>
<div class="divContent">
姓名：<input id="Text1" type="text" class="txtCss"/><br />
性别：<input id="Radio1" name="rdoSex" type="radio" value="男" />男
<input id="Radio2" name="rdoSex" type="radio" value="女" />女<br />
婚否：<input id="Checkbox1" type="checkbox" />
<div class="divBtn"><input id="btnSubmit" type="button" value="提 交" class="btnCss" /></div>
</div>
</div>
<div id="divTip" class="divTip"></div>
</body>
</html>

 

 

]]> http://zhoumo123.cn/web/form/825.html/feed 0 防止表单重复提交的几种策略 http://zhoumo123.cn/web/form/30.html http://zhoumo123.cn/web/form/30.html#comments Thu, 22 May 2014 01:48:20 +0000 http://zhoumo123.cn/?p=30 阅读全文 ]]> 表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题，比如：

  • 点击提交按钮两次。
  • 点击刷新按钮。
  • 使用浏览器后退按钮重复之前的操作，导致重复提交表单。
  • 使用浏览器历史记录重复提交表单。
  • 浏览器重复的HTTP请求。

几种防止表单重复提交的方法

禁掉提交按钮。表单提交后使用Javascript使提交按钮disable。这种方法防止心急的用户多次点击按钮。但有个问题，如果客户端把Javascript给禁止掉，这种方法就无效了。

我之前的文章曾说过用一些Jquery插件效果不错。

Post/Redirect/Get模式。在提交后执行页面重定向，这就是所谓的Post-Redirect-Get (PRG)模式。简言之，当用户提交了表单后，你去执行一个客户端的重定向，转到提交成功信息页面。

这能避免用户按F5导致的重复提交，而其也不会出现浏览器表单重复提交的警告，也能消除按浏览器前进和后退按导致的同样问题。

在session中存放一个特殊标志。当表单页面被请求时，生成一个特殊的字符标志串，存在session中，同时放在表单的隐藏域里。接受处理表单数据时，检查标识字串是否存在，并立即从session中删除它，然后正常处理数据。

如果发现表单提交里没有有效的标志串，这说明表单已经被提交过了，忽略这次提交。

这使你的web应用有了更高级的XSRF保护。

在数据库里添加约束。在数据库里添加唯一约束或创建唯一索引，防止出现重复数据。这是最有效的防止重复提交数据的方法。

你是如何克服数据重复提交问题的？你遇到过什么重复提交数据的现实例子吗？

 

[译文链接] http://www.vaikan.com/prevent-duplicate-form-submission/

]]> http://zhoumo123.cn/web/form/30.html/feed 0