最速怪談選手権

javascriptの計算結果を個別に名前を付けてformで送る方法を教えてください。

締切済

  • 質問者：みずおち
  • 質問日時：
  • 回答数：1件

お忙しいところお読みいただきありがとうございます。
今個人で子供たちの為のWEBアプリを作成しているのですが
どうにも詰まってしまっておりご教授頂けますでしょうか。

チェックボックスで食材をチェックします。
食材には栄養素が登録してあり、チェックをすると加算されていきます。
加算された結果は表示されます。
ここまでが出来ております。

加算された結果をresult.phpにGETで送信したいのですが、
valueに代入する式が分からずうまく送信できません。
どうかよろしくお願いいたします。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>sample</title>
</head>
<body>
<label><input type="checkbox" name="c" value="牛肉">牛肉</label>
<label><input type="checkbox" name="c" value="豚肉">豚肉</label>
<label><input type="checkbox" name="c" value="鶏肉">鶏肉</label>
<label><input type="checkbox" name="c" value="牛レバー">牛レバー</label>
<label><input type="checkbox" name="c" value="豚レバー">豚レバー</label>
<label><input type="checkbox" name="c" value="鳥レバー">鳥レバー</label>
<label><input type="checkbox" name="c" value="ハム">ハム</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],
'牛レバー' :[132,19.6,3.7,3.7,5,4,3.8,17,1000,11000,0,0.3,1,0.22,3,30,0],
'豚レバー' :[128,44.88,7.48,5.5,11,28.6,15.18,20,1782,13000,2.86,0.88,0,0.75,7.92,44,0],
'鳥レバー' :[111,18.9,3.1,0.6,5,9,3.3,19,1300,14000,0.2,0.4,14,0.38,1.8,20,0],
'ハム' :[196,16.5,13.9,13,10,0.5,1.1,19,2,0,0.6,0.3,3,0.6,0.1,50,2.5],

}
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.getElementById( id ).innerText = id + " : " + s[k];
}
}
window.onload = function(){
for( var i = 0; i < c.length; i++ ){
c[i].addEventListener( 'change', myfunc );
}
}
</script>


<form name="sendform" action="result.php" method="get">
<input type="submit" value="結果を送信">
<input type="hidden" name="calorie" value="">
<input type="hidden" name="protein" value="">
<input type="hidden" name="lipid" value="">
<input type="hidden" name="carbohydrate" value="">
<input type="hidden" name="calcium" value="">
<input type="hidden" name="iron" value="">
<input type="hidden" name="zinc" value="">
<input type="hidden" name="magnesium" value="">
<input type="hidden" name="folic_acid" value="">
<input type="hidden" name="vitamin_a" value="">
<input type="hidden" name="vitamin_d" value="">
<input type="hidden" name="vitamin_e" value="">
<input type="hidden" name="vitamin_k" value="">
<input type="hidden" name="vitamin_b1" value="">
<input type="hidden" name="vitamin_b2" value="">
<input type="hidden" name="vitamin_c" value="">
<input type="hidden" name="dietary_fiber" value="">
</form>



</body>
</html>

質問者からの補足コメント

  • ありがとうございます。
    <form name="sendform" action="result.php" method="get">
    <input type="submit" value="結果を送信">
    <input type="hidden" name="calorie" value="">
    valueの値にはなんて入れたらよろしいのでしょうか。

    No.1の回答に寄せられた補足コメントです。 補足日時：2019/06/21 03:34
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1

  • 回答者： yasaenyasa
  • 回答日時：

document.getElementById( id ).innerText = id + " : " + s[k];


の次の行に
document.querySelector("input[name='" + id + "']").value = s[k];
を追加すればいけますよ。
この回答への補足あり
    • good
    • 1
    • 件
通報する
この回答へのお礼

出来ました。ありがとうございました。

通報する
お礼日時：2019/06/21 04:31

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報