asp.netのrepeaterで出力したコントロールにjavascriptでアクセスする

ASP.NETRepeaterで動的に出力したコントロールにjavascriptでアクセスする方法を紹介します。

例として、登録ボタン押下時に、選手名のテキストボックスが未入力の場合はアラートを表示するようにします。

選手一覧
選手名国籍怪我キャプテン

まずはapsxファイルに更新ボタン押下時に必須チェックをするjavascriptのファンクションを定義します。

<script>
  //更新前の入力チェックを行います
  function checkMeisai(){
    return true;
  }
</script>

<!--javascriptでアクセスするためにtable要素にidを付与します-->
<table id="tblMeisai">
  <thead>
    <tr>
      <td></td>
      <td>選手名</td>
      <td>国籍</td>
      <td>怪我</td>
      <td>キャプテン</td>
    </tr>
  </thead>
  <tbody>
    <asp:Repeater ID="repeater1" runat="server">
      <ItemTemplate>
        <tr>
          <td><input type="button" id="btnDetail" value="詳細" runat="server" /></td>
          <td><input type="text" id="txtName" runat="server" /></td>
          <td><select id="selCountry" runat="server"></select></td>
          <td><input type="checkbox" id="chkInjure" runat="server" /></td>
          <td><input type="radio" id="rdoCap" runat="server" /></td>
        </tr>
      </ItemTemplate>
    </asp:Repeater>
  </tbody>
</table>
<input type="button" value="更新" onclick="return checkMeisai();">

onclickreturnの値がtrueの場合のみ処理を継続します。

javascriptでtableの要素にアクセスする

javascriptで要素にアクセスする場合はgetElementById('取得したいコントロールのID')でアクセスすることが多いですが、Repeaterで動的に出力した場合はコントロールのIDがどのような値になるのかわからないので、getElementsByTagName()でアクセスします。

最近のブラウザであればquerySelectorなどを使用したほうが簡単に取得できますが、古いブラウザにも対応するためにgetElementsByTagNameを例として紹介しています。

htmlの要素全体に対してgetElementsByTagName()を行うと、取得したいコントロール以外のコントロールも取得してしまうので、以下のようにtd要素まで特定してからgetElementsByTagName()でアクセスします。

//更新前の入力チェックを行います
function checkMeisai(){
  //table要素を取得します
  var tbl = document.getElementById('tblMeisai');
  var row; //tr要素を格納する
  var cell; //td要素を格納する
  //tbl.childrenはthead,tbody
  //tbl.children[1].childrenがtbodyのtr
  for(var i = 0; i < tbl.children[1].children.length; i++) {
    row = tbl.children[1].children[i]; //trを格納する
    cell = row.cells[1]; //選手名テキストボックスのあるtdを格納する(左から2番めのtd)
    //cellの中でinputタグの要素を検索する
    if(cell.getElementsByTagName('input')[0].value === ''){
      alert('選手名を入力してください。');
      return false;
    }
  }
  return true;
}

関連記事

  • asp.netのrepeaterで表示・編集・登録処理を行う その2

    asp.netのrepeaterで表示・編集・登録処理を行う その1でRepeaterを使って、下記のようなhtmlを動的に出力することが出来ました。今回はクライアント側での入力制御とサーバ側での登録...


  • asp.netのrepeaterで表示・編集・登録処理を行う その1

    ASP.NETのWEBサーバコントロールのRepeaterコントロールを使用し、データの表示・編集・登録処理の流れの実装例を紹介します。具体的には、DBに登録されているデータをRepeaterコントロ...


  • asp.net|repeaterで出力したラジオボタンを1つのみ選択する方法

    Repeaterの中にラジオボタンを定義して出力すると、下記のように複数選択できてしまいます。原因はRepeaterで出力する際にIDとNAME属性が変わってしまうためです。詳しくはaspnet-re...


  • asp.netのrepeaterで出力時にjavascriptのイベントを定義する

    asp.netのrepeaterで表示・編集・登録処理を行う その2でrepeaterを使って、表示→編集→登録の一連の流れが実装できました。今回は、表示→編集→登録のうち、編集について、もっと細かい...


  • asp.netのポストバックの基本

    aspでは、画面再表示時にテキストボックスなどのコントロールの値を保持・復元するためには、コントロールの値をsubmitし、サーバ処理でコントロールのプロパティに再セットして状態を復元する必要がありま...


  • asp.netのhtmlサーバコントロールの基本

    asp.netの基本・aspとの違いで紹介したコードはaspxファイルに(htmlレイアウトのファイル)に、まだstrNameやdetailなど、サーバ処理の変数が残っています。htmlサーバコントロ...


  • asp.netのイベントの基本と注意事項

    押下したボタンによってサーバ処理を分岐したい場合(例:登録ボタン、削除ボタン、検索ボタンなど)、いままでの方法では処理区分としてhiddenをsubmitし、処理を分岐していました。ASP.NETでは...


  • asp.netの基本・aspとの違い

    ここまでaspを用いてWEBアプリの基本を説明してきましたが、ここまでのサンプルコードを見てわかるように、aspはレスポンスするhtmlのレイアウトとサーバ処理が1つのファイルに記載しているため、複雑...


  • 地附山で自然に触れ合い心も体もリフレッシュ

    日常から抜けだして、自然に触れて心も体もリフレッシュしたいなら、長野県の地附山がおすすめです。トレッキングというよりもハイキングのような感じで、登山装備もいらずに気軽に歩けるのでおすすめスポットです。...


  • 須坂市の絶景スポット米子大瀑布の紹介

    8月の新緑の季節に行ってきました長野県須坂市の米子大瀑布の、壮大な自然が絶景でとても感動したので紹介します。米子大瀑布は、須坂市の山中にある2つの滝です。米子大瀑布にあるこれらの滝は日本の滝百選に選ば...