Q&A
PHPでしたいのでしょうか
それとも必ずしもPHPでする必要はないのでしょうか
いずれにしてもコードはファイル毎にブロックを分けて、インデントをつけて読みやすくしてもらえると助かります。
前提・実現したいこと
formでチェックされたチェックボックスの値を送りたいのですが、nameはjavascriptの計算で使用してしまっていて
うまく送れません。何かいい方法がありましたらご教授ください。
初心者で説明不足なところがありましたら申し訳ありません。
よろしくお願いいたします。
発生している問題・エラーメッセージ
チェックボックスのnameは計算するjavascriptで”ｃ”として使用してしまっており、
GETで送った場合、当然全部ｃなので受け取れませんでした。
javascriptの方を直したかったのですがうまくいく方法が分かりませんでした。
チェックボックスに関係なくq1＝牛肉と送ってしまいます。
### 該当のソースコード <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>sample</title> </head> <body> <form name="sendform" action="sample_result.php" method="get"> //チェックボックスに関係なくq1＝牛肉と送ってしまいます。 //チェックされた場合に送りたいのですが何かいい方法はありませんでしょうか？ <label><input type="hidden" name="q1" value="牛肉" ><input type="checkbox" name="c" value="牛肉" id="q1">牛肉</label> <label><input type="hidden" name="q2" value="豚肉" ><input type="checkbox" name="c" value="豚肉" id="q2">豚肉</label> <label><input type="hidden" name="q3" value="豚肉" ><input type="checkbox" name="c" value="鶏肉" id="q3">鶏肉</label> <！--チェックされた物の栄養素を計算して表示--> <div class="a" id="calorie"></div> <div class="a" id="protein"></div> <div class="a" id="lipid"></div> <div class="a" id="carbohydrate"></div> <div class="a" id="calcium"></div> <div class="a" id="iron"></div> <div class="a" id="zinc"></div> <div class="a" id="magnesium"></div> <div class="a" id="folic_acid"></div> <div class="a" id="vitamin_a"></div> <div class="a" id="vitamin_d"></div> <div class="a" id="vitamin_e"></div> <div class="a" id="vitamin_k"></div> <div class="a" id="vitamin_b1"></div> <div class="a" id="vitamin_b2"></div> <div class="a" id="vitamin_c"></div> <div class="a" id="dietary_fiber"></div> <script type="text/javascript"> var c = document.getElementsByName( "c" ); var a = document.getElementsByClassName( "a" ); var v={ '牛肉' :[371,14.4,32.9,0.2,4,1.5,3,14,5,24,0.4,1.1,13,0.05,0.12,1,0], '豚肉' :[263,19.3,19.2,0.2,4,0.3,1.6,15,1,6,0.1,0.3,3,0.69,0.15,1,0], '鶏肉' :[200,16.2,14,0,5,0.4,1.6,19,11,39,0.1,0.2,53,0.07,0.18,3,0], } function myfunc(){ var s = [0,0.0,0.0,0.0,0,0.0,0.0,0.0,0,0,0,0.0,0,0.00,0.00,0,0.00]; for( var i = 0; i < c.length; i++ ){ var checkbox=c[i]; if( checkbox.checked ){ for( var k in s ){ s[k]+=v[checkbox.value][k]; s[k]=Math.round( s[k]*1000 )/1000; } } } for( var k in s ){ var id=a[k].getAttribute( "id" ); document.querySelector("input[name='" + id + "']").value = s[k]; } } window.onload = function(){ for( var i = 0; i < c.length; i++ ){ c[i].addEventListener( 'change', myfunc ); } } </script> //栄養素を計算して送信 <table> <td>エネルギー</td><td><input type="text" name="calorie" value="">(kcal)</td></tr> <td>たんぱく質</td><td><input type="text" name="protein" value="">(g)</td></tr> <td>脂質</td><td><input type="text" name="lipid" value="">(g)</td></tr> <td>炭水化物</td><td><input type="text" name="carbohydrate" value="">(g)</td></tr> <td>カルシウム</td><td><input type="text" name="calcium" value="">(mg)</td></tr> <td>鉄分</td><td><input type="text" name="iron" value="">(mg)</td></tr> <td>亜鉛</td><td><input type="text" name="zinc" value="">(mg)</td></tr> <td>マグネシウム</td><td><input type="text" name="magnesium" value="">(mg)</td></tr> <td>葉酸</td><td><input type="text" name="folic_acid" value="">(μg)</td></tr> <td>ビタミンＡ</td><td><input type="text" name="vitamin_a" value="">(μg)</td></tr> <td>ビタミンＤ</td><td><input type="text" name="vitamin_d" value="">(μg)</td></tr> <td>ビタミンＥ</td><td><input type="text" name="vitamin_e" value="">(mg)</td></tr> <td>ビタミンＫ</td><td><input type="text" name="vitamin_k" value="">(μg)</td></tr> <td>ビタミンB1</td><td><input type="text" name="vitamin_b1" value="">(mg)</td></tr> <td>ビタミンB2</td><td><input type="text" name="vitamin_b2" value="">(mg)</td></tr> <td>ビタミンＣ</td><td><input type="text" name="vitamin_c" value="">(mg)</td></tr> <td>食物繊維</td><td><input type="text" name="dietary_fiber" value="">(g)</td></tr> </table> <input type="submit" value="送信"> </form> </body> </html> 受け取るphp <?php $q1 = $_GET['q1']; $q2 = $_GET['q2']; $q3 = $_GET['q3']; $calorie = $_GET['calorie']; $protein = $_GET['protein']; $lipid = $_GET['lipid']; $carbohydrate = $_GET['carbohydrate']; $calcium = $_GET['calcium']; $iron = $_GET['iron']; $zinc = $_GET['zinc']; $magnesium = $_GET['magnesium']; $folic_acid = $_GET['folic_acid']; $vitamin_a = $_GET['vitamin_a']; $vitamin_d = $_GET['vitamin_d']; $vitamin_e = $_GET['vitamin_e']; $vitamin_k = $_GET['vitamin_k']; $vitamin_b1 = $_GET['vitamin_b1']; $vitamin_b2 = $_GET['vitamin_b2']; $vitamin_c = $_GET['vitamin_c']; $dietary_fiber = $_GET['dietary_fiber']; ?> ```ここに言語名を入力 ソースコード
試したこと
<label><input type="hidden" name="q1" value="牛肉" ><input type="checkbox" name="c" value="牛肉" id="q1">牛肉</label>
hidden属性でチェックボックスにくっつけてみましたが駄目でした。
javascriptをidでやってみましたが計算しませんでした。
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
データを受け取ってデータベースに入れるのはphpになりますが、
送るformは通常のhtmlファイルです。
栄養素を計算しているのはjavascriptになります。
javascriptはhtml内に書いています。
読みにくくて申し訳ございません。
回答2件
0
ベストアンサー
今回のケースではスクリプトの方を修正された方が早いのではないでしょうか。
javascript
1var c = document.getElementsByName( "c" ); 2var a = document.getElementsByClassName( "a" );
この部分で、cはnameで取っていて、aをclassで取っているという風に2つの指定方法をわざわざ分けていることに意味があるのかが不明なので推測での回答になりますが
まず、チェックボックスのhtmlを書き換えclass="c"を追加、nameにはname="beef"等、php側に送りたい名前を付けます。
html
1<label><input type="checkbox" name="beef" value="牛肉" class="c" id="q1">牛肉</label> 2<label><input type="checkbox" name="pork" value="豚肉" class="c" id="q2">豚肉</label> 3<label><input type="checkbox" name="chicken" value="鶏肉" class="c" id="q3">鶏肉</label>
javascript側は
javascript
1var c = document.getElementsByClassName( "c" );
こうすることで目的の値は取れるので、以下の計算もそのまま動くと思います。
投稿2019/06/29 07:33
総合スコア177
0
試してみましたが、 c パラメータで送信されてますよ。
クエリパラメータだけ抜き出したものがこちら。
q1=%E7%89%9B%E8%82%89&q2=%E8%B1%9A%E8%82%89&c=%E8%B1%9A%E8%82%89&q3=%E8%B1%9A%E8%82%89&c=%E9%B6%8F%E8%82%89
投稿2019/06/29 07:35
総合スコア6753
あなたの回答
tips
プレビュー
