JavaScriptでRadioButton操作

このQ&Aのポイント
  • 開発環境:asp.net(VB) WebフォームにWebユーザーコントロールを貼り付けしています。Webユーザーコントロールにはラジオボタンが4つあります。ラジオボタンの選択によって、ラベルに入る文字が変わるようにしたいです。
  • javascriptで製造したいと思っていますが、「document.userfotm1.elementsは Null またはオブジェクトではありません。」と表示されてしまいます。どなたかご教示いただけますでしょうか。
  • JavaScriptの関数`ChangeLabel`を定義しています。この関数は、ラジオボタンの選択に応じてラベルに表示される文字を変更します。
回答を見る
  • ベストアンサー

javascriptでRadioButton操作

いつもお世話になります。 開発環境:asp.net(VB) WebフォームにWebユーザーコントロールを貼り付けしています。 Webユーザーコントロールにはラジオボタンが4つあります。 ラジオボタンの選択によって、ラベルに入る文字が変わるようにしたいです。 javascriptで製造したいと思っていますが、(1)の「document.userfotm1.elements["lbl" + i].value = "test1";」で、 「Microsoft JScript 実行時エラー:' document.userfotm1.elementsは Null またはオブジェクトではありません。」と表示されてしまいます。 どなたかご教示いただけますでしょうか。 (1)javascript ※ 「userfotm1」…Webユーザーコントロール全体選択したときのプロパティ値「ID名」を入力しています。(form名を入れるのが正しいようですが、Webユーザーコントロールではどれににあてはまるのか分かりません・・・。) function ChangeLabel(obj) { var maxCnt = 4; if (obj.id == "RadioButton1") { for (i = 1; i <= maxCnt; i++) { document.userfotm1.elements["lbl" + i].value = "test1"; } } else { for (i = 1; i <= maxCnt; i++) { document.userfotm1.elements["lbl"+ i].value = "test2"; } } } (2)定義 以下を4つ定義しています <asp:TableCell CssClass="TdData"><asp:Label ID="lbl1" runat="server"  Text="TESTA"></asp:Label></asp:TableCell> <asp:TableCell CssClass="TdData"><asp:Label ID="lbl2" runat="server"  Text="TESTB"></asp:Label></asp:TableCell> <asp:TableCell CssClass="TdData"><asp:Label ID="lbl3" runat="server"  Text="TESTC"></asp:Label></asp:TableCell> <asp:TableCell CssClass="TdData"><asp:Label ID="lbl4" runat="server"  Text="TESTD"></asp:Label></asp:TableCell> (3)Webユーザーコントロール .RadioButton1.Attributes.Add("onclick", "ChangeLabel(this)") .RadioButton2.Attributes.Add("onclick", "ChangeLabel(this)") .RadioButton3.Attributes.Add("onclick", "ChangeLabel(this)") .RadioButton4.Attributes.Add("onclick", "ChangeLabel(this)") よろしくおねがいします。

質問者が選んだベストアンサー

  • ベストアンサー
  • todo36
  • ベストアンサー率58% (728/1234)
回答No.1

getElementById(id) idはクライアントサイドのIDを指定する

idera_2010
質問者

お礼

ありがとうございます。 IDで解決しました。

関連するQ&A

  • クリックしたボタンのIDの取得

    あるプログラムをASP.NETとC#で作っています。 ASP側に、 <asp:ImageButton ID="btn1" runat="server" onclick="btn_Click" /> <asp:ImageButton ID="btn2" runat="server" onclick="btn_Click" /> <asp:Label ID="label1" runat="server" Text=""></asp:Label> とある場合に、btn1とbtn2、押された方のID名をlabel1に表示するには、btn_Clickイベントにはどう書けば良いでしょうか?

  • ASP.NET WEBアプリケーションで作成されたページより他の既存ペ

    ASP.NET WEBアプリケーションで作成されたページより他の既存ページへデータを投げたいと考えているのですがセキュリティ上難しいのでは?と考えています。しかし、なんとか代替案がないかと思っておりどなたかヒントをいただけないでしょうか? <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox3" runat="server" Height="72px" TextMode="MultiLine" Width="651px"></asp:TextBox> <br /> <asp:Button ID="Button1" runat="server" Text="Button" />&nbsp;&nbsp; <asp:Button ID="Button2" runat="server" Text="Button" /> <br /> <br /> <asp:Label ID="Label1" runat="server"></asp:Label> 例えばこんな簡単なaspxのページで構成されているとします。 テキストボックスに入れた値を既存のWEBページ(Yahooへのログインだとか)へ入れ込みたいのですが・・・クライアントにスクリプトで作ってとかなら余裕で出来ると思うのですがサーバサイドで仕込むことは難しいでしょうか?回避策とかもあるとなおうれしいのですが・・・よろしくお願いします。

  • 【ASP.NET】 ログインコントロールにおいて

    おせわになります。 Visualstudio 2005 のASP.NET VB でWEBサイトを作成しております。 ASP.NET  で ログインコントロールを使って、認証ページを作っているのですが。 ID PASSWORD この2つのIDをログインコントロール内で、使用しているのは分かるのですが、 このIDに加え ID 名前 PASSWORD という3つのデータによって、ログイン制御を行いたいと考えております。 ログインコントロール内で、テーブルを追加して、「名前」を増やした所、 このIDをVB.NET側で、受け取れません。 ASP.NET 側の ログインコントロールのソースは /////// ここからが問題の箇所 ///////////// <tr> <td align="right" style="height: 24px; width: 149px;"> <asp:Label ID="Label2" runat="server" AssociatedControlID="USERID">ID: </asp:Label></td> <td style="height: 24px; width: 312px;"> <asp:TextBox ID="USERID" runat="server" MaxLength="5" OnTextChanged="USERID_TextChanged" Width="152px"> </asp:TextBox> <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="USERID" ErrorMessage="ユーザーIDは5文字以下にしてください。" ToolTip="ユーザーIDは10文字以下にしてください" Type="String" ValidationGroup="Login1">*</asp:RangeValidator> </td> </tr> /////// ここまでが問題の箇所 //////////// /////// ここからは通常に起動 ///////////// <tr> <td align="right" style="height: 24px; width: 149px;">  <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">氏名(カナ):</asp:Label></td> <td style="height: 24px; width: 312px;"> <asp:TextBox ID="UserName" runat="server" Width="152px" OnTextChanged="UserName_TextChanged" MaxLength="10"> </asp:TextBox> <asp:RangeValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="ユーザー名は10文字以下にしてください。" Type ="String" ToolTip="ユーザー名は10文字以下にしてください" ValidationGroup="Login1"> *</asp:RangeValidator> </td> </tr> <tr> <td align="right" style="height: 29px; width: 149px;"> <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">パスワード: </asp:Label> </td> <td style="width: 312px; height: 29px;"> <asp:TextBox ID="Password" runat="server" TextMode="Password" Width="152px"> </asp:TextBox> <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="パスワードが必要です。" ToolTip="パスワードが必要です。" ValidationGroup="Login1"> * </asp:RequiredFieldValidator> </td> </tr> <tr> <td align="center" colspan="2" style="color: red"> <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal> </td> </tr> VB.NET 側では以下のスクリプトで指定しています。 Protected Sub LoginButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Login1.LoggedIn ////////// 受け取れない ////////////////// Dim strID As String = Login1.UserID.ToString ////////// 受け取れる ////////////////// Dim strID As String = Login1.UserName.ToString ////////// 受け取れる ////////////////// Dim strID As String = Login1.Password.ToString このように、LOGIN コントロールに UserIDを追加できません。 よって、session などに、 UserID のVALUE を受け取れるようにしたいのですが、 asp.net側の 設定はどのようにしたらよろしいのでしょうか。 ログインコントロールは あきらめて、通常の独自の認証システムを作るべきですかね。 ログインコントロールに 通常のテキストボックスとして、追加はできないものでしょうか。 どなたかご存知の方、いらっしゃいましたら、教えていただけますと幸いです。 どうぞ宜しくお願いいたします。

  • ASP GridViewの高さを固定にするには?

    GridViewで全角10文字がちょうど表示できる幅を設定した場合、 10文字を超えるデータを表示しようとするととセル内で折り返してしまいます。 折り返しせず、10文字だけ表示するにはどうすればいいのでしょうか? <div id="containerData" class="containerData" onscroll="containerHeader.scrollLeft=this.scrollLeft;" runat="server"> <asp:UpdatePanel ID="UpdPlView" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:GridView ID="grdList" runat="server" CellPadding="0" AutoGenerateColumns="False" DataSourceID="sqldsList" ShowHeader="False" AllowPaging="False" ShowFooter="True" GridLines="None"> <Columns> <asp:TemplateField HeaderText=""> <ItemTemplate> <table cellspacing="0" class="detailRow"> <tr> <td style="width:100px;"><asp:Label ID="lbl1" runat="server" Text='<%# Eval("Field1") %>'></asp:Label></td> <td style="width:500px;"><asp:Label ID="lbl2" runat="server" Text='<%# Eval("Field2") %>'></asp:Label></td> </tr> </table> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> </div> </div> ***スタイルシート*** .containerData { font-size: 11pt; border: solid 1px black; height: 500px; } .detailRow tr { height:30px; background:white; } .detailRow td { border-bottom: 1px solid black; }

  • EmptyDataTemplateを再表示

    EmptyDataTemplateのラベル値を画面のLinkButtonのクリック時に変更したいと思っています。 LinkButtonのクリック時に以下の通り記述することで、値はセットされているのですが、 画面上で再表示されません。 UpdatePanelでトリガーも設定しているのですが、どうすればよいでしょうか? <サーバー側> Protected Sub btnON_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnON.Click If grdList.Rows.Count = 0 Then CType(grdList.Controls(0).Controls(0).FindControl("emptyName"), Label).Text = "説明A" End If End Sub <クライアント側> <asp:LinkButton ID="btnON" runat="server"><asp:Label ID="lblON" Text="ボタン1" runat="server" /></asp:LinkButton> <div id="Data" runat="server"> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:GridView ID="grdList" runat="server" ~省略~ > <%-- データがない場合 --%> <EmptyDataTemplate> <table > <tr> <th><asp:Label ID="emptyNo" Text="NO" runat="server" /></th> <th><asp:Label ID="emptyName" Text="説明○" runat="server" /></th>   ☆ここの値 </tr> </table> </EmptyDataTemplate> <Columns> ~データ表示省略~ </Columns> </asp:GridView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnON" EventName="Click" /> </Triggers> </asp:UpdatePanel> </div>

  • javascriptでlabelの値取得

    vs2012(c#)で <asp:Label ID="test" runat="server" Text="abc" Visible="true"></asp:Label> の値をjavascriptで取得したいのですが、下記で実行すると l1はnullになり取得できません。 var l1 = document.getElementById("test"); var data = l1.innerText; console.log(data); そのようにすれば取得できるでしょうか

  • gridviewの中のCSSを変更したい

    画面にチェックボックスがあります。 チェックボックスを Trueにした時、gridviewのaタグを有効にし、Falseにした時、無効にしたいと思っています。 vb側のチェックボックスを変更した時に、どのように記述すればよいでしょうか? できなければ、Falseの時に、aタグのclassを空白にしてもいいかなと思っています。 どなたかご教授ください。 <div id="containerData" class="containerData" onscroll="containerHeader.scrollLeft=this.scrollLeft;" runat="server"> <asp:GridView ID="grdList" runat="server" AutoGenerateColumns="False" DataSourceID="sqldsList" CssClass="List" DataKeyNames="NO" SelectionMode="None" CellPadding="0" CellSpacing="0" GridLines="None" > <Columns> <asp:TemplateField HeaderText="番号"> <ItemTemplate> <a class="tooltip" title='<%# Eval("NO") %>'> <custom:textLabel ID="lblNo" CssClass="No detailRow" runat="server" Text='<%# Eval("NO") %>' /> </a> </ItemTemplate> <ItemStyle CssClass="rowStyle"></ItemStyle> </asp:TemplateField> <asp:TemplateField HeaderText="名前"> <ItemTemplate> <a class="tooltip" title='<%# Eval("NAME") %>'> <custom:textLabel ID="lblName" CssClass="Name detailRow" runat="server" Text='<%# Eval("NAME") %>' /> </a> </ItemTemplate> <ItemStyle CssClass="rowStyle"></ItemStyle> </asp:TemplateField> </Columns> </asp:GridView> </ContentTemplate> </div>

  • <asp>タグの属性情報が取得できない

    いつも利用させていただいております。 宜しくお願いします。 今、VS2005のASP.NETを使用してプログラミングをしているのですが どうしてもタグの属性情報が取得できないため、ご存知の方が おりましたら是非アドバイスを・・・と思い投稿させていただいています。 以下にソースを記載いたします <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>test</title> <script language="javascript" type="text/javascript"> <!-- function test(){ alert(document.getElementById("Label1").getAttribute('Visible')); } // --> </script> </head> <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> <asp:Label ID="Label1" runat="server" Text="Label" Visible="true"> </asp:Label> </div> </form> </body> </html> 上記ソースで「getElementById("Label1").getAttribute('Visible')」と言う部分が今回のターゲットです。 通常のHTMLタグ(div,・・・・)ですとなんら問題なくそれぞれの属性を取得できるのですが、こと<asp: タグで始まる属性を取得しようとすると・・・  ID→取得できました。  text→取得できません。  Visible→取得できません。 上記状態となってしまいます。 そこでご質問です。 ・<asp:タグの属性は[getAttribute]で取得できないのでしょうか? ・もし、取得できない場合は、何とか[Visible]をOnClickイベントで  "false"にしたいと考えています。 以上です。もしご存知の方がいましたら、なにとぞご教授の程 宜しくお願いします。 環境  WindowXP  VS2005 EnterPriseEdition  SQLServer2005

  • FormView から別画面でカレンダーを開き、値を前の画面に戻したい

    以下の環境で開発を行っております。 Windows XP(Professional) Visual Web Developer 2008 Express Edition Internet Explorer 8 【質問】 FormView ではなくて Form から別画面でカレンダーを開き値を戻す事はできたのですが、FormView を使った画面からデータを戻すことができず、エラーがでてしまいます。構文が間違っているのでしょうか? 【test.aspx】 <html> <head> <title>日付テスト</title> <script language="javascript" type="text/javascript"> function calendarPicker(strField) { window.open('DatePicker.aspx?field=' + strField, 'calendarPopup', 'width=250,height=220,resizable=yes'); } </script> </head> <body> <form id="Form1" method="post" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStrings %>"> </asp:SqlDataSource> <asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> 日付:<asp:TextBox ID="TextBox" runat="server" style="text-align: center"></asp:TextBox> <a href="javascript:;" onclick="calendarPicker('Form1.FormView1.TextBox');">▼</a><br /> </ItemTemplate> </asp:FormView> </form> </body> </html> 【DatePicker.aspx.vb】 Private Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar1.DayRender e.Cell.Controls.Clear() Dim Link As System.Web.UI.HtmlControls.HtmlGenericControl Link = New System.Web.UI.HtmlControls.HtmlGenericControl Link.TagName = "a" Link.InnerText = e.Day.DayNumberText Link.Attributes.Add("href", String.Format("JavaScript:window.opener.document.{0}.value = '{1:d}'; window.close();", Request.QueryString("field"), e.Day.Date)) If e.Day.IsSelected Then Link.Attributes.Add("style",Me.Calendar1.SelectedDayStyle.ToString()) End If e.Cell.Controls.Add(Link) End Sub

  • FormViewのEditItemTemplateに配置したボタンへのjavascript組み込み

    はじめまして セバといいます。 VBでaspxを利用しシステムを開発していますが、 次のような現象が発生し困っています。 仕様 1.FormviewのItemTemplateに配置している「edit_Chage」ボタンで FormviewをEditmodeに変更します。 2.FormviewのEditItemTemplateには「hello」ボタンを配置し、 ボタン押下時にjavascriptを起動します。 問題点 FormviewのFormView1_ModeChangedにてイベントを拾い、 「hello」ボタンにjavascriptを組み込もうとしていますが、 この時点では「hello」ボタンのインスタンスが生成おらず、 『オブジェクト参照がオブジェクト インスタンスに設定されていません。』 のエラーになってしまいます。 サンプルプログラム /////////////////////////////// Default.aspx <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">​ <html xmlns="​http://www.w3.org/1999/xhtml">​ <head runat="server"> <title>無題のページ</title> </head> <body> <form id="form1" runat="server"> <div> </div> <asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"> <EditItemTemplate> tmp1: <asp:TextBox ID="tmp1TextBox" runat="server" Text='<%# Bind("tmp1") %>' /> <asp:Button ID="Button1" runat="server" Text="hello" /> <br /> <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" /> &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="キャンセル" /> </EditItemTemplate> <InsertItemTemplate> </InsertItemTemplate> <ItemTemplate> tmp1: <asp:Label ID="tmp1Label" runat="server" Text='<%# Bind("tmp1") %>' /> <br /> <asp:Button ID="Button2" runat="server" CommandName="edit" Text="edit_Chage" /> </ItemTemplate> </asp:FormView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:testConnectionString %>" SelectCommand="SELECT [tmp1] FROM [tmpTBL]"> </asp:SqlDataSource> </form> </body> </html> /////////////////////////////// Default.aspx.vb Partial Class _Default Inherits System.Web.UI.Page Protected Sub FormView1_ModeChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles FormView1.ModeChanged '「Hello」ボタンへのjavascript組み込み If FormView1.CurrentMode = FormViewMode.Edit Then Dim btn As Button btn = CType(FormView1.FindControl("Button1"), Button) Dim sbScript As New System.Text.StringBuilder() sbScript.Append("alert('Hello')") btn.Attributes("onclick") = sbScript.ToString() End If End Sub End Class //////////////////////// また、 「Hello」ボタンのインスタンスを強制的に作ろうと、 Default.aspx.vbにFormView1.DataBind()を組み込みましたが、 インスタンスは生成されたものの、 onclickタグは生成されませんでした。 If FormView1.CurrentMode = FormViewMode.Edit Then Dim btn As Button FormView1.DataBind() <--- ここに追加 btn = CType(FormView1.FindControl("Button1"), Button) EditItemTemplateに配置したボタンにプログラムでjavascriptを組み込みたいのですが、 どなたか解決方法をご存知な方がいましたら、ご教示願いします。

専門家に質問してみよう