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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

2462閲覧

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

fgfnabwym

総合スコア78

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/01/06 14:15

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

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

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

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

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

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

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

ファイル名:keisan1.php

html

1<form name="form1" action = "keisan2.php"> 2<table border="1" cellspacing="0" cellpadding="5"> 3<tr> 4<th style="padding: 5px; border: 1px solid #333333; width:50px;">回数</th> 5<th style="padding: 5px; border: 1px solid #333333; width:220px;">足し算</th> 6<th style="padding: 5px; border: 1px solid #333333; width:110px;">計算結果</th> 7</tr> 8 9<?php for ($cnt = 0; $cnt < 2; $cnt++) { ?> 10<tr> 11<td><?php echo $cnt; ?>回目</td> 12<td> 13<select name="mae[<?php echo $cnt; ?>]" onChange="keisan()"> 14<option>0</option> 15<option>1</option> 16<option>2</option> 17<option>3</option> 18<option>4</option> 19<option>5</option> 20</select> 21+ 22<select name="usiro[<?php echo $cnt; ?>]" onChange="keisan()"> 23<option>0</option> 24<option>1</option> 25<option>2</option> 26<option>3</option> 27<option>4</option> 28<option>5</option> 29</select> 30</td> 31 32<td><output name="field1">0</output></td> 33</tr> 34<?php } ?> 35</table> 36</form> 37 38<script type="text/javascript"> 39function keisan(){ 40 var mae = document.form1.["mae[<?php echo $cnt; ?>]"].selectedIndex; 41 var usiro = document.form1.["usiro[<?php echo $cnt; ?>]"].selectedIndex; 42 43 var total = mae + usiro; 44 45 document.form1.field1.value = ""+total; 46} 47</script> 48<input type="submit" value="次へ"></form>

イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

HTML

1<script> 2'use strict'; 3function calc (event) { 4 var target = event.target, 5 elements = target.form.elements, 6 i = +/^\w+-(\d+)/.exec(target.name)[1]; 7 8 elements['output-' + i].value = +(elements['mae-' + i].value) + +(elements['usiro-' + i].value); 9} 10</script> 11<form id="sample" action="keisan2.php"> 12 <table border="1" cellspacing="0" cellpadding="5"> 13 <tbody> 14 <tr> 15 <th style="padding: 5px; border: 1px solid #333333; width:50px;">回数</th> 16 <th style="padding: 5px; border: 1px solid #333333; width:220px;">足し算</th> 17 <th style="padding: 5px; border: 1px solid #333333; width:110px;">計算結果</th> 18 </tr> 19 <tr> 20 <td>0回目</td> 21 <td> 22 <select name="mae-0" onchange="calc(event);"> 23 <option>0</option> 24 <option>1</option> 25 <option>2</option> 26 <option>3</option> 27 <option>4</option> 28 <option>5</option> 29 </select> 30 + 31 <select name="usiro-0" onchange="calc(event);"> 32 <option>0</option> 33 <option>1</option> 34 <option>2</option> 35 <option>3</option> 36 <option>4</option> 37 <option>5</option> 38 </select> 39 </td> 40 <td><output name="output-0">0</output></td> 41 </tr> 42 <tr> 43 <td>1回目</td> 44 <td> 45 <select name="mae-1" onchange="calc(event);"> 46 <option>0</option> 47 <option>1</option> 48 <option>2</option> 49 <option>3</option> 50 <option>4</option> 51 <option>5</option> 52 </select> 53 + 54 <select name="usiro-1" onchange="calc(event);"> 55 <option>0</option> 56 <option>1</option> 57 <option>2</option> 58 <option>3</option> 59 <option>4</option> 60 <option>5</option> 61 </select> 62 </td> 63 <td><output name="output-1">0</output></td> 64 </tr> 65 </tbody> 66 </table> 67</form>

Re: fgfnabwym さん

投稿2016/03/30 09:34

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

HTML

1<form name="form1" action = "keisan2.php"> 2<table border="1" cellspacing="0" cellpadding="5"> 3<tr> 4<th style="padding: 5px; border: 1px solid #333333; width:50px;">回数</th> 5<th style="padding: 5px; border: 1px solid #333333; width:220px;">足し算</th> 6<th style="padding: 5px; border: 1px solid #333333; width:110px;">計算結果</th> 7</tr> 8 9<?php for ($cnt = 0; $cnt < 2; $cnt++) { ?> 10<tr> 11<td><?php echo $cnt; ?>回目</td> 12<td> 13<select name="mae<?php echo $cnt; ?>" onChange="keisan<?php echo $cnt; ?>()"> 14<option>0</option> 15<option>1</option> 16<option>2</option> 17<option>3</option> 18<option>4</option> 19<option>5</option> 20</select> 21+ 22<select name="usiro<?php echo $cnt; ?>" onChange="keisan<?php echo $cnt; ?>()"> 23<option>0</option> 24<option>1</option> 25<option>2</option> 26<option>3</option> 27<option>4</option> 28<option>5</option> 29</select> 30</td> 31 32<td><output name="field<?php echo $cnt; ?>">0</output></td> 33</tr> 34<script type="text/javascript"> 35function keisan<?php echo $cnt; ?>(){ 36 var mae = document.form1.mae<?php echo $cnt; ?>.selectedIndex; 37 var usiro = document.form1.usiro<?php echo $cnt; ?>.selectedIndex; 38 var total = mae + usiro; 39 document.form1.field<?php echo $cnt; ?>.value = ""+total; 40} 41</script> 42<?php } ?> 43</table> 44 45<input type="submit" value="次へ"></form>

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

投稿2016/01/06 14:57

otn

総合スコア84380

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fgfnabwym

2016/01/06 15:18

otnさん 回答ありがとうございました。とても助かりました。 </form>は、写し間違いでした。すみません。 selectされている値じゃなくてindexを足しているというのは、 <OPTION value="1">1</OPTION> このように書いた方がいいということであっていますか?
kei344

2016/03/30 08: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 ); こんな感じかな。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問