質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.94%

javascriptでのphpの配列の添え字の要素指定の仕方が出来ない

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,928

score 74

前回も似たような質問をしたのですが、自分の理解が悪く。もう一度投稿させていただきました。

javascriptを使い、前の値と後ろの値を足しその答えを自動的に表示させたいです。

一回分のプログラムだと動きます。

for文でループをまわし、数回分を一度にやろうとすると動きません。数回分の計算を選択するセレクトボックスを表示し、ユーザーに選択してもらい、その際に結果を計算、表示し、入力し終わったら、ユーザーが入力した値をPOSTで送りたいです。

ネットで「select nameの配列 書き方」などや「javascript php 添え字 配列」と調べ、自分と同じような質問をした人がいたのですが、いまいち理解できませんでした。

もしわかる方がいたら、教えていただきたいです。

「javascript php 添え字 配列」と調べて出てこないということは、そもそもこのような動きの場合に、select nameを配列にし、それをjavascriptに渡すこと自体間違っているのでしょうか。

ファイル名:keisan1.php

<form name="form1" action = "keisan2.php">
<table border="1"  cellspacing="0" cellpadding="5">
<tr>
<th style="padding: 5px; border: 1px solid #333333; width:50px;">回数</th>
<th style="padding: 5px; border: 1px solid #333333; width:220px;">足し算</th>
<th style="padding: 5px; border: 1px solid #333333; width:110px;">計算結果</th>
</tr>

<?php for ($cnt = 0; $cnt < 2; $cnt++) { ?>
<tr>
<td><?php echo $cnt; ?>回目</td>
<td>
<select name="mae[<?php echo $cnt; ?>]" onChange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
+
<select name="usiro[<?php echo $cnt; ?>]" onChange="keisan()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>

<td><output name="field1">0</output></td>
</tr>
<?php } ?>
</table>
</form>

<script type="text/javascript">
function keisan(){
    var mae   = document.form1.["mae[<?php echo $cnt; ?>]"].selectedIndex;
    var usiro = document.form1.["usiro[<?php echo $cnt; ?>]"].selectedIndex;

    var total = mae + usiro;

    document.form1.field1.value = ""+total;
}
</script>
<input type="submit" value="次へ"></form>

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

PHPでの$cntのループの後で$cntをechoしても駄目ですね。
また、合計欄は複数あるので、それぞれ別のnameじゃないと駄目です。
ポイントじゃ無い部分としては、</form>が2つあります。

出来るだけオリジナルに沿ってイージーに書き換えるとこんな感じでしょうか。

<form name="form1" action = "keisan2.php">
<table border="1"  cellspacing="0" cellpadding="5">
<tr>
<th style="padding: 5px; border: 1px solid #333333; width:50px;">回数</th>
<th style="padding: 5px; border: 1px solid #333333; width:220px;">足し算</th>
<th style="padding: 5px; border: 1px solid #333333; width:110px;">計算結果</th>
</tr>

<?php for ($cnt = 0; $cnt < 2; $cnt++) { ?>
<tr>
<td><?php echo $cnt; ?>回目</td>
<td>
<select name="mae<?php echo $cnt; ?>" onChange="keisan<?php echo $cnt; ?>()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
+
<select name="usiro<?php echo $cnt; ?>" onChange="keisan<?php echo $cnt; ?>()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>

<td><output name="field<?php echo $cnt; ?>">0</output></td>
</tr>
<script type="text/javascript">
function keisan<?php echo $cnt; ?>(){
    var mae   = document.form1.mae<?php echo $cnt; ?>.selectedIndex;
    var usiro = document.form1.usiro<?php echo $cnt; ?>.selectedIndex;
    var total = mae + usiro;
    document.form1.field<?php echo $cnt; ?>.value = ""+total;
}
</script>
<?php } ?>
</table>

<input type="submit" value="次へ"></form>


ちゃんとするには、関数は1つで済むよう引数を渡したりする。
後、気になるのは、selectされている値じゃなくてindexを足しているところですね。常に一致しているなら良いのですが。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/01/07 00:18

    otnさん
    回答ありがとうございました。とても助かりました。
    </form>は、写し間違いでした。すみません。

    selectされている値じゃなくてindexを足しているというのは、
    <OPTION value="1">1</OPTION>
    このように書いた方がいいということであっていますか?

    キャンセル

  • 2016/03/30 17:37

    > このように書いた方がいいということであっていますか?
    ではなく、
    var mae = document.form1.mae<?php echo $cnt; ?>.selectedIndex;
    var usiro = document.form1.usiro<?php echo $cnt; ?>.selectedIndex;
    の部分です。
    たとえば、<option>10</option>から数字を始めた時に、selectedIndexで値を取得すると「0」となり、total の値がずれてしまう、と言うことです。
    var mae = parseInt( document.form1.mae<?php echo $cnt; ?>.value , 10 );
    var usiro = parseInt( document.form1.usiro<?php echo $cnt; ?>.value , 10 );
    こんな感じかな。

    キャンセル

0

PHP は HTML 出力だけに留めて JavaScript 側で対処する方法はいかがでしょうか。

<script>
'use strict';
function calc (event) {
    var target = event.target,
        elements = target.form.elements,
        i = +/^\w+-(\d+)/.exec(target.name)[1];

    elements['output-' + i].value = +(elements['mae-' + i].value) + +(elements['usiro-' + i].value);
}
</script>
<form id="sample" action="keisan2.php">
  <table border="1"  cellspacing="0" cellpadding="5">
    <tbody>
      <tr>
        <th style="padding: 5px; border: 1px solid #333333; width:50px;">回数</th>
        <th style="padding: 5px; border: 1px solid #333333; width:220px;">足し算</th>
        <th style="padding: 5px; border: 1px solid #333333; width:110px;">計算結果</th>
      </tr>
      <tr>
        <td>0回目</td>
        <td>
          <select name="mae-0" onchange="calc(event);">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
          +
          <select name="usiro-0" onchange="calc(event);">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          </select>
        </td>
        <td><output name="output-0">0</output></td>
      </tr>
      <tr>
        <td>1回目</td>
        <td>
          <select name="mae-1" onchange="calc(event);">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
          +
          <select name="usiro-1" onchange="calc(event);">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          </select>
        </td>
        <td><output name="output-1">0</output></td>
      </tr>
    </tbody>
  </table>
</form>

Re: fgfnabwym さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.94%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る