隠しフィールドのボタンの属性を保存する

ボタンが2つあります。両方のボタンには、「data-from」と「data-to」の2つの属性があります。いずれかのボタンをクリックすると、これらの属性値を隠しフィールドに渡す必要があり、フォームを提出する必要があります（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>

READING：

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

出典

2012-02-21 Lijo

同じ名前 'データfrom'との2つの属性？ –

それはタイプミスでした。二つの異なる属性は、各ボタンの上に存在する。 – Lijo

あなたのコードはほとんどあり。あなたがあなたのページに一つのフォームしかない場合や、$（ '＃form1'）に変更することができる場合には、汎用の$（ 'form'）のどちらかを使うことができます。

ここで、標準でない属性を使用して値を格納していることがわかりましたが、これは機能しますが構文的には正しいわけではありません。検証。

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

出典

2012-02-21 11:58:17 Alfonso

感謝。それは動作します。 – Lijo

隠しフィールドのボタンの属性を保存する

答えて

関連する問題