どうしてもうまく動作しません！！

質問

多数の方に教えていただいて大変感謝しておりますが、なんせ経験の浅い状態で高いハードルを超えようとしいている無謀な私をお許しください。

http://oshiete1.goo.ne.jp/kotaeru.php3?q=796874
http://oshiete1.goo.ne.jp/kotaeru.php3?q=800754

で、教えていただいたとおりに入力したのですが、横取り丸でパケットを見ると、商品番号と価格が何も入ってないのです。長文になりますが、よろしくお願いいたします。

なお、シャンプーとトリートメントがそれぞれ４種あります。

回答No.6

mrumesuke · ベストアンサー

・関数定義と、関数の呼び出し方が一致していません。
function setvalue(shouhinnumber, shouhinmei, kakaku, bikou1, bikou2, formid)
　　　　　　　　　　 ↑　　　　　　　　.↑　　　　　 　 ↑　　　↑　　　↑　　　↑
　　　　　　┌──┘　┌────┘　　　　┌─┘┌─┘　　　　引数なし
setvalue('FHS26M', 'シャンプー（乾燥肌）', 1800, 'form1');

※name属性と変数名の間に相関性はありません。
つまり、name属性と同じ変数名をつけたところで、値が自動的に渡されるというようなことはありません。

・ラジオボタンのvalueは、ユーザの選択操作によって自動的にセットされます。
※要素配列へのアクセスは、何番目の要素かを添字（インデックス）で指定する必要があります。
×　frm.bikou1.value
○　frm.bikou1[0].value　←補足のソースの場合、"M (260ml)"にアクセスできる。添字は0から始まる。

以上を踏まえると、修正が必要な個所はsetvalue関数ということになると思います。
----------------------------------------------
function setvalue(shouhinnumber, shouhinmei, kakaku, /* bikou1, bikou2, */ formid) { //引数bikou1, bikou2不要
frm = document.getElementById(formid);
frm.shouhinnumber.value = shouhinnumber;
frm.shouhinmei.value = shouhinmei;
// frm.bikou1.value = bikou1; // 不要
// frm.bikou2.value = bikou2; // 不要
frm.kakaku.value = kakaku;
}
----------------------------------------------
（ちなみに、コメントを削除するとbikou2を追加する前のコードそのままだったりします）

回答No.5

mrumesuke

とりあえず動くようになったようで、私としてもほっとしました。

ところで備考２はどのように追加されたのでしょうか。
手掛かりが少ないため回答に窮してしまいます。
補足願います。

補足

<script type="text/javascript">
<!--
// 値をセットする処理
function setvalue(shouhinnumber, shouhinmei, kakaku, bikou1, bikou2, formid) {
frm = document.getElementById(formid);
frm.shouhinnumber.value = shouhinnumber;
frm.shouhinmei.value = shouhinmei;
frm.bikou1.value = bikou1;
frm.bikou2.value = bikou2;
frm.kakaku.value = kakaku;
}

function checkform(formid) {
frm = document.getElementById(formid);
// alert(frm.shouhinnumber.value+"\n"+frm.shouhinmei.value+"\n"+frm.bikou1.value+"\n"+frm.bikou2.value+"\n"+frm.kakaku.value);
// 選択されていたので送信
frm.submit();
return;
}
//-->
</script>
<FORM id="form1" action="cgi-bin/cart/setcook.cgi" method="POST">
<INPUT type="hidden" name="shouhinnumber" value="">
<INPUT type="hidden" name="shouhinmei" value="">
<INPUT id="sm260" type="radio" name="bikou1" value="M (260ml)" onClick="setvalue('FHS26M', 'シャンプー（乾燥肌）', 1800, 'form1');"><LABEL for="sm260">乾燥肌の方：M (260ml)</LABEL> <BR>
<INPUT id="sm500" type="radio" name="bikou1" value="M (500ml)" onClick="setvalue('FHS50M', 'シャンプー（乾燥肌）', 3400, 'form1');"><LABEL for="sm500">乾燥肌の方：M (500ml)</LABEL><BR>
<INPUT id="sn260" type="radio" name="bikou1" value="N (260ml)" onClick="setvalue('FHS26N', 'シャンプー（脂性肌）', 1600, 'form1');"><LABEL for="sn260">脂性肌の方：N (260ml)</LABEL><BR>
<INPUT id="sn500" type="radio" name="bikou1" value="N (500ml)" onClick="setvalue('FHS50N', 'シャンプー（脂性肌）', 3000, 'form1');"><LABEL for="sn500">脂性肌の方：N (500ml)</LABEL><BR>
<INPUT type="hidden" name="kakaku" value="">
<SELECT name="kazu">
<OPTION>0 </OPTION>
<OPTION>1 </OPTION>
<OPTION>2 </OPTION>
<OPTION>3 </OPTION>
<OPTION>4 </OPTION>
<OPTION>5 </OPTION>
</SELECT>
<BR>
<INPUT type="button" value="送信" onClick="checkform('form1');">
</FORM>
ちなみにこれは備考２を必要としません。
もし、備考１：タイプと備考２：カラーの組み合わせが出た場合を想定してなのですが…。
なお、タイプ・カラーはCGIにて定義済みです。
前回同様にSUBMIT以前にスクリプトエラーを起こします。。。

回答No.4

mrumesuke

関数の使い方（引数の数、値）が、関数定義と一致していないようです。

×
setvalue('FHT26M', 'トリートメント（乾燥肌）', 1800); // 引数が不足しています。
○
setvalue('FHT26M', 'トリートメント（乾燥肌）', 1800, 'form1'); // 変数formidに文字列'form1'を渡します。

×
checkform(form1); // これは、未定義の変数form1を渡すことを意味します。
○
checkform('form1'); // 変数formidに文字列'form1'を渡します。

パケットキャプチャで動作を確認することは大切なことですが、その前にブラウザのエラー通知機能を最大限に活用してスクリプトのエラーを潰しましょう。

お礼

早い返事を頂き、本当に感謝尽くしでなりません。
この問題に半週間を費やし、引きこもり状態で解決できずに、頼るツテもなかったので、本当に助かります。

ご指摘いただいたとおりに訂正してみます。
お手数おかけしてすいません。
結果は補足にてさせていただきます。

ありがとうございましたm(__)m

補足

おかげさまで「一通り」動くことができましたことを心からお礼申し上げます。

最後の質問なのですが、備考２を追加すると、前回同様のエラーが14行目と表示されてしまいます。
また、値が入らなかったり…。

お手数ですが、どうかお願いいたします。

回答No.3

VineLinux

多分、ショッピングカートのＣＧＩは何を使ってるのか教えてあげたほうがいいかもね！

補足

高機能ショッピングカートACART
(顧客データクッキー保存バージョン）
by Anglers-net WebDesign
http://www.freecart.jp
です。

回答No.2

mrumesuke

いくつか不明瞭な点があるため、憶測で回答することをご了承ください。

【前提条件】
(1)シャンプーとトリートメントでフォームを分け、前者をform1、後者をform2としている。
(2)form1用の外部スクリプトform1.jsと、form2用の外部スクリプトform2.jsを用意している。
(3)form1.jsとform2.jsで同じ名前の関数を定義している。
上記のような状況だと仮定して話を進めます。
この前提条件に誤りがあるときは指摘してください。

【問題点】
その前提に基づいて貼られていない部分を補完すると、souce1のようになるかと思います。
(source1)_______________________________
<FORM id="form1" ... >
...
<SCRIPT language="JavaScript" src="script/form1.js"></SCRIPT></FORM>
<FORM id="form2" ... >
...
<SCRIPT language="JavaScript" src="script/form2.js"></SCRIPT></FORM>
________________________________________
このようにしてスクリプトを切り替えているつもりとお見受けしました。
結論から言うと、そんなことはできません。
なぜならsource1は、source2やsource3とほぼ等価であるからです。
(source2)_______________________________
<SCRIPT language="JavaScript" src="script/form1.js"></SCRIPT>
<SCRIPT language="JavaScript" src="script/form2.js"></SCRIPT>
<FORM id="form1" ...> ... </FORM>
<FORM id="form2" ...> ... </FORM>
________________________________________
(source3)_______________________________
<SCRIPT language="JavaScript">
function setvalue( ... ) {
frm = document.getElementById("form1");
...
}
function checkform(form1) {
frm = document.getElementById("form1");
...
</SCRIPT>
<SCRIPT language="JavaScript">
function setvalue( ... ) {
frm = document.getElementById("form2");
...
function checkform(form2) {
frm = document.getElementById("form2");
...
</SCRIPT>
<FORM id="form1"> ... </FORM>
<FORM id="form2"> ... </FORM>
________________________________________
関数setvalue()とcheckform()が二度定義されているのがお分かりでしょうか。
これでは先に定義してあるシャンプー(form1)用の関数が呼ばれることはありません。

【対策】
対策方法ですが、２つ考えられます。
(a)関数名を付け直す。
ページ内でユニークな（『一意の』とも言います）名前を付ける。
この方式ではフォームが増えるに従って関数も増えることになり、後々のメンテナンスが大変です。
(source4)_______________________________
<SCRIPT language="JavaScript">
function setvalue1( ... ) {
frm = document.getElementById("form1");
...
}
function checkform1() {
frm = document.getElementById("form1");
...
}
function setvalue2( ... ) {
frm = document.getElementById("form2");
...
}
function checkform2() {
frm = document.getElementById("form2");
...
}
</SCRIPT>
<FORM id="form1" ... >
<INPUT id="m260" type="radio" name="form1" value="" onclick="setvalue1('FH26M', 'シャンプー（乾燥肌）', 'M (260ml)', 1890);"><LABEL for="m260">乾燥肌の方：M (260ml)</LABEL> \1,890-<BR>
...
<INPUT type="button" value="送信" onclick="checkform1();" name="submit1">
</FORM>
<FORM id="form2" ... >
<INPUT id="tm260" type="radio" name="form2" value="" onclick="setvalue2('FHT26M', 'トリートメント（乾燥肌）', 'M (260ml)', 1890);"><LABEL for="tm260">乾燥肌の方：M (260ml)</LABEL> \1,890-<BR>
...
<INPUT type="button" value="送信" onclick="checkform2();" name="submit1">
</FORM>
________________________________________

(b)関数に汎用性を持たせる。
フォームのidを関数の引数として渡すことにより、フォームの増減やエラー処理の追加等の将来的な仕様変更に、柔軟に対応することができます。
q=800754の回答がこの方式です。
(source5)_______________________________
<SCRIPT language="JavaScript">
function setvalue(formid, shouhinnumber, shouhinmei, bikou1, kakaku) {
frm = document.getElementById(formid);
...
}
function checkform(formid) {
frm = document.getElementById(formid);
...
}
</SCRIPT>
<FORM id="form1" ... >
<INPUT id="m260" type="radio" name="form1" value="" onclick="setvalue('form1', 'FH26M', 'シャンプー（乾燥肌）', 'M (260ml)', 1890);"><LABEL for="m260">乾燥肌の方：M (260ml)</LABEL> \1,890-<BR>
...
<INPUT type="button" value="送信" onclick="checkform('form1');" name="submit1">
</FORM>
<FORM id="form2" ... >
<INPUT id="tm260" type="radio" name="form2" value="" onclick="setvalue('form2', 'FHT26M', 'トリートメント（乾燥肌）', 'M (260ml)', 1890);"><LABEL for="tm260">乾燥肌の方：M (260ml)</LABEL> \1,890-<BR>
...
<INPUT type="button" value="送信" onclick="checkform('form2');" name="submit1">
</FORM>
________________________________________

以上です。
不明な点はご質問ください。

お礼

丁寧な解説をしていただき、心から感謝しています。
全く、そのとおりの環境での実行です。
憶測が当たっていたのでびっくりしました。

ビルダーで制作し、FFFTPでアップロードしており、データの流れを横取り丸のInetSpyでチェックしながら調整しています。
しかし、本日の調整はどんどん悪化する一方で、kazuの値が入るようになったとたん、kakakuの値などがNULL（値なし：kakaku=&kazu=1&...）になります。

CGIへのPOST成功しているデータは
shouhinnumber=OS03&shouhinmei=%83e%83X%83g%8f%a4%95i&kakaku=1234&kazu=1&SUBMIT=%83J%81%5B%83g%82%C9%82%A2%82%EA%82%E9
です。
これから察するに、商品ナンバー・商品名・（備考１・備考２）・価格・数・送信の順番かと思われます。

補足

<script type="text/javascript">
<!--
// 値をセットする処理
function setvalue(shouhinnumber, shouhinmei, kakaku, formid) {
frm = document.getElementById(formid);
frm.shouhinnumber.value = shouhinnumber;
frm.shouhinmei.value = shouhinmei;
frm.kakaku.value = kakaku;
}

// ラジオボタンが選択されているかをチェックする処理
function checkform(formid) {
frm = document.getElementById(formid);
// alert(frm.shouhinnumber.value+"\n"+frm.shouhinmei.value+"\n"+frm.bikou1[i].value+"\n"+frm.kakaku.value);
// 選択されていたので送信
frm.submit();
return;
}
//-->
</script>
<FORM id="form1" action="cgi-bin/cart/setcook.cgi" method="POST">
<INPUT type="hidden" name="shouhinnumber" value="">
<INPUT type="hidden" name="shouhinmei" value="">
<INPUT id="sm260" type="radio" name="bikou1" value="M (260ml)" onClick="setvalue('FHS26M', 'シャンプー（乾燥肌）', 1800);"><LABEL for="sm260">乾燥肌の方：M (260ml)</LABEL> <BR>
<INPUT id="sm500" type="radio" name="bikou1" value="M (500ml)" onClick="setvalue('FHS50M', 'シャンプー（乾燥肌）', 3400);"><LABEL for="sm500">乾燥肌の方：M (500ml)</LABEL><BR>
<INPUT id="sn260" type="radio" name="bikou1" value="N (260ml)" onClick="setvalue('FHS26N', 'シャンプー（脂性肌）', 1600);"><LABEL for="sn260">脂性肌の方：N (260ml)</LABEL><BR>
<INPUT id="sn500" type="radio" name="bikou1" value="N (500ml)" onClick="setvalue('FHS50N', 'シャンプー（脂性肌）', 3000);"><LABEL for="sn500">脂性肌の方：N (500ml)</LABEL><BR>
<INPUT type="hidden" name="kakaku" value="">
<SELECT name="kazu">
<OPTION>0 </OPTION>
<OPTION>1 </OPTION>
<OPTION>2 </OPTION>
<OPTION>3 </OPTION>
<OPTION>4 </OPTION>
<OPTION>5 </OPTION>
</SELECT>
<BR>
<INPUT type="button" value="送信" onClick="checkform(form1);">
</FORM>
<FORM id="form2" action="cgi-bin/cart/setcook.cgi" method="POST">
<INPUT type="hidden" name="shouhinnumber" value="">
<INPUT type="hidden" name="shouhinmei" value="">
<INPUT id="tm260" type="radio" name="bikou1" value="M (260ml)" onClick="setvalue('FHT26M', 'トリートメント（乾燥肌）', 1800);"><LABEL for="tm260">乾燥肌の方：M (260ml)</LABEL> <BR>
<INPUT id="tm500" type="radio" name="bikou1" value="M (500ml)" onClick="setvalue('FHT50M', 'トリートメント（乾燥肌）', 3400);"><LABEL for="tm500">乾燥肌の方：M (500ml)</LABEL><BR>
<INPUT id="tn260" type="radio" name="bikou1" value="N (260ml)" onClick="setvalue('FHT26N', 'トリートメント（脂性肌）', 1600);"><LABEL for="tn260">脂性肌の方：N (260ml)</LABEL><BR>
<INPUT id="tn500" type="radio" name="bikou1" value="N (500ml)" onClick="setvalue('FHT50N', 'トリートメント（脂性肌）', 3000);"><LABEL for="tn500">脂性肌の方：N (500ml)</LABEL><BR>
<INPUT type="hidden" name="kakaku" value="">
<SELECT name="kazu">
<OPTION>0 </OPTION>
<OPTION>1 </OPTION>
<OPTION>2 </OPTION>
<OPTION>3 </OPTION>
<OPTION>4 </OPTION>
<OPTION>5 </OPTION>
</SELECT>
<BR>
<INPUT type="button" value="送信" onclick="checkform(form2);"></FORM>

回答No.1

mrumesuke

なんだかどこに回答したらよいものか迷ってしまいますが・・・

仕様をもっと明確にするか、現在のコードを張ってください。

補足

<FORM id="form2" action="hcgi-bin/cart/setcook.cgi" method="POST">
<INPUT id="tm260" type="radio" name="form2" value="" onclick="setvalue('FHT26M', 'トリートメント（乾燥肌）', 'M (260ml)', 1890);"><LABEL for="tm260">乾燥肌の方：M (260ml)</LABEL> \1,890-<BR>
<INPUT id="tm500" type="radio" name="form2" value="" onclick="setvalue('FHT50M', 'トリートメント（乾燥肌）', 'M (500ml)', 3570);"><LABEL for="tm500">乾燥肌の方：M (500ml)</LABEL> \3,570-<BR>
<INPUT id="tn260" type="radio" name="form2" value="" onclick="setvalue('FHT26N', 'トリートメント（脂性肌）', 'N (260ml)', 1680);"><LABEL for="tn260">脂性肌の方：N (260ml)</LABEL> \1,680-<BR>
<INPUT id="tn500" type="radio" name="form2" value="" onclick="setvalue('FHT50N', 'トリートメント（脂性肌）', 'N (500ml)', 3150);"><LABEL for="tn500">脂性肌の方：N (500ml)</LABEL> \3,150-<BR>
<INPUT type="hidden" name="shouhinnumber" value="">
<INPUT type="hidden" name="shouhinmei" value="">
<INPUT type="hidden" name="bikou1" value="">
<INPUT type="hidden" name="kakaku" value="">
<SELECT name="kazu">
<OPTION>0 </OPTION>
<OPTION>1 </OPTION>
<OPTION>2 </OPTION>
<OPTION>3 </OPTION>
<OPTION>4 </OPTION>
<OPTION>5 </OPTION>
</SELECT>
<BR>
<INPUT type="button" value="送信" onclick="checkform(form2);" name="submit2"><SCRIPT language="JavaScript" src="script/form2.js"></SCRIPT></FORM>

(form2.js)
/// 商品番号と商品名と備考1に値をセットする処理
function setvalue(shouhinnumber, shouhinmei, bikou1, kakaku) {
frm = document.getElementById("form2");
frm.shouhinnumber.value = shouhinnumber;
frm.shouhinmei.value = shouhinmei;
frm.bikou1.value = bikou1;
frm.kakaku.value = kakaku;
}
//セットされた値をCGIへポストする処理
function checkform(form2) {
frm = document.getElementById("form2");
//alert(frm.shouhinnumber.value+"\n"+frm.shouhinmei.value+"\n"+frm.bikou1.value+"\n"+frm.kakaku.value);
frm.submit();
return;
}

上記のフォームを2つ（シャンプー・トリートメント）で設置したいのですが、送信されたパケットを見ると、数量０（kazu=0）になるんです。