将Button中的属性存储在隐藏字段中

时间:2012-02-21 11:45:01

标签: jquery

我有两个按钮。两个按钮都有两个属性 - “data-from”和“data-to”。单击任何按钮时,需要将这些属性值传递给隐藏字段,并且需要提交表单(POST)。在提交之前,我还需要从隐藏字段中提醒属性值。我该怎么做?

注意:以下代码是使用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>

读:

  1. How do i Pass the Value To hidden using attr in jquery

1 个答案:

答案 0 :(得分:0)

你的代码几乎就在那里。它在提交功能上失败了,您可以使用通用$('表单')(如果您的页面中只有一个表单,或者您可以将其更改为$('#form1')。您还需要更改表单中的操作和方法。

现在,我发现你使用的是非标准属性来存储值,这个“有效”但在语法上并不正确。如果要通过验证,可能需要更改它。

<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>