将按钮中的属性存储在“隐藏"字段中 [英] Store Attributes from Button in a Hidden field
问题描述
我有两个按钮.这两个按钮都具有两个属性-数据自"和数据至".单击任何按钮时，这些属性值需要传递到隐藏字段，并且表单需要提交(POST).提交之前，我还需要提醒隐藏字段中的属性值.我该怎么办?
I have two buttons. Both buttons have two attributes – "data-from" and "data-to". When any of the button is clicked, these attribute values need to be passed on to a hidden field and the form need to be submitted (POST). Before submitting, I need to alert the attribute values from the hidden fields also. How do I do that?
注意:以下代码是使用ASP.NET Webforms编写的.
Note: The following code is written using ASP.NET Webforms.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function ()
{
$('#mainDiv input[type="button"]').on('click', function ()
{
alert('HAi');
$('#from').val($(this).attr('data-from'));
$('#to').val($(this).attr('data-to'));
//alert($('#from').val);
//alert($('#to').val);
$('this').closest('form').submit();
});
});
</script>
</head>
<body>
<div id="mainDiv">
<form id="form1" runat="server">
<div>
<input type="button"
value="Show March Programs"
data-from="01-03-2012"
data-to="31-03-2012" />
<input type="button"
value="Show 2012 Programs"
data-from="01-01-2012"
data-to="31-12-2012" />
<input type="hidden" id="from" value="1" />
<input type="hidden" id="to" value="2" />
</div>
</form>
</div>
</body>
</html>
阅读:
推荐答案
您的代码已经差不多了.提交功能失败，可以使用通用$('form')(如果页面中只有一个表单，或者可以将其更改为$('#form1').还需要更改表单中的操作和方法.
Your code is almost there. It was failing on the submit function which you can use either the generic $('form') (in case you have only one form in your page or you can change it to $('#form1'). You need to change also the action and method in your form.
现在，我看到您正在使用非标准属性来存储值，这是有效的"方法，但在语法上不正确.如果要通过验证，可能需要更改它.
Now, I see that you are using non-standard attributes to store values, this 'works' but is not syntactically correct. You might need to change it if you want to pass the validation.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function ()
{
$('#mainDiv input[type="button"]').on('click', function ()
{
alert('HAi');
$('#from').val($(this).attr('data-from'));
$('#to').val($(this).attr('data-to'));
alert($('#from').val());
alert($('#to').val());
$('form').submit();
});
});
</script>
</head>
<body>
<div id="mainDiv">
<form id="form1" runat="server" action="index.html">
<div>
<input type="button"
value="Show March Programs"
data-from="01-03-2012"
data-to="31-03-2012" />
<input type="button"
value="Show 2012 Programs"
data-from="01-01-2012"
data-to="31-12-2012" />
<input type="hidden" id="from" value="1" />
<input type="hidden" id="to" value="2" />
</div>
</form>
</div>
</body>
</html>
这篇关于将按钮中的属性存储在“隐藏"字段中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
