- PR -

JavaScriptでTextBoxの合計

«前のページへ 1|2|3
投稿者投稿内容
レイル
常連さん
会議室デビュー日: 2008/10/14
投稿数: 37
投稿日時: 2009-03-03 10:38
引用:

FormViewのDataBoundからFindControlを使い、
ひとつづつTextBoxを指定すると合計は出るのですが
TextBoxが多くあるとその分FindContorolを入力しなくてはならないので、


サーバ側でやるなら

コード:
    Protected Sub Button_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles submit.Click
        Dim tmp As Integer = 0
        Dim sum As Integer = 0
        Dim obj As TextBox

        For i As Integer = 0 To 10
            obj = Div.FindControl(String.Format("SumBox{0}", i))
            If IsNothing(obj) = False Then
                If Integer.TryParse(obj.Text, tmp) = True Then
                    sum += tmp
                End If
            End If
        Next
    End Sub



引用:

JavaScriptにて指定するTextBoxをループさせて合計を出したいと思いました。


javascriptでやるならHiddenに格納してサーバ側で取得する。

コード:
    <div id="Div" runat="server">
        <asp:TextBox ID="SumBox1"  runat="server" Text="1"  /><br />
        <asp:TextBox ID="SumBox2"  runat="server" Text="2"  /><br />
        <asp:TextBox ID="SumBox3"  runat="server" Text="3"  /><br />
        <asp:TextBox ID="SumBox4"  runat="server" Text="4"  /><br />
        <asp:TextBox ID="SumBox5"  runat="server" Text="5"  /><br />
        <asp:TextBox ID="SumBox6"  runat="server" Text="6"  /><br />
        <asp:TextBox ID="SumBox7"  runat="server" Text="7"  /><br />
        <asp:TextBox ID="SumBox8"  runat="server" Text="8"  /><br />
        <asp:TextBox ID="SumBox9"  runat="server" Text="9"  /><br />
        <asp:TextBox ID="SumBox10" runat="server" Text="10" /><br />
        <input type="hidden" id="sum" runat="server" />
        <input type="button" value="input" onclick="javascript:SumFunc();" />
        <asp:Button ID="submit" Text="submit" runat="server" />
    </div>
    <script language="javascript" type="text/javascript">
        function SumFunc() {
            var sum = 0;
            var obj = window.document.getElementsByTagName("input");
            for (i=0; i<obj.length; i++) {
                if (obj(i).id.match(/SumBox/g)) {
                    var num = parseInt(obj(i).value, 10);
                    if (! isNaN(num)) {
                        sum += num;
                    }
                }
            }
            var hidden = window.document.getElementById("ctl00_ContentPlaceHolder1_sum");
            if (hidden != null) {
                hidden.value = sum;
            }
        }
    </script>
デューン
大ベテラン
会議室デビュー日: 2004/04/21
投稿数: 174
お住まい・勤務地: Tokyo
投稿日時: 2009-03-03 14:01
引用:

この様な合計の出し方はJavaScriptで行わない方が良いのでしょうか？


方法として、ループを使ってIDの一部分を自動生成するのはOKです。
良し悪しは別にして、力技で書きならべていくのだって間違いではありません。
やり方はいろいろあります。
そこは工夫のしどころです。

「サーバ処理の代替と考えるのは危険です。」というのは、サーバー側でも計算しなおす癖をつけて欲しいという意味で書きました(脆弱性がらみなので本件とは別の話でして、頭の片隅に置いておいてください)。


とりあえず、Kingさんやレイルさんのサンプルソースを参考に整理してみるといいでしょう。

あと、まるくさんもおっしゃってますが「一気に仕様を盛り込みすぎるとややこしくなるので」コメントを多めにつけながら一つ一つクリアしていくといいでしょう。


あーこ
会議室デビュー日: 2008/12/02
投稿数: 18
投稿日時: 2009-03-04 06:42
デューンさん、レイルさん、Kingさん、ぴあちゃんさん、まるくさん
ありがとうございます。

みなさまから頂いたサンプルを元に勉強したいと思います。

再度、報告したいと思います。
あーこ
会議室デビュー日: 2008/12/02
投稿数: 18
投稿日時: 2009-03-09 07:05
皆様のご助言のおかげで希望する動作にする事ができました。

これで一歩先に進めそうです。

レイルさんのコードを元に指定するIDを作成しているFORMにある

TextBoxのIDに置き換えたら、動作致しました。

本当にありがとうございました。
«前のページへ 1|2|3

スキルアップ／キャリアアップ（JOB@IT）