こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

フォーム上で複数の同じスクリプトを動作させるには

選択したチェックボックスのvalue値がテキストボックスに表示されるjavascriptについてなのですが、
一つのフォーム上にclass名の異なる複数のチェックボックスを設置した場合、動作しなくなってしまいます。
正確には最初に記述したチェックボックス(下の場合はkeyword1)が動作しません。

一つのフォーム上でclass名の異なる複数のチェックボックスを設置するには、javascriptをどのように書き換えればいいのでしょうか?
よろしくお願いします。

<form method="post" action="sample.cgi" name="hoge">
<td>
<script language="javascript">
function check(f){
f.keyword1.value="";
for (var i=0; i<f.length;i++){
if(f[i].className=="food" && f[i].checked==true){
f.keyword1.value += f[i].value;
}
}
f.keyword1.readOnly=(f.keyword1.value!="");
}
</script>
<input type="checkbox" class="food" name="food" onClick="check(this.form)" value="野菜">野菜
<input type="checkbox" class="food" name="food" onClick="check(this.form)" value="魚">魚
<input type="checkbox" class="food" name="food" onClick="check(this.form)" value="惣菜">惣菜
<input value="" size="50" type="text" name="keyword1">
</td>
<td>
<script language="javascript">
function check(f2){
f2.keyword2.value="";
for (var i=0; i<f2.length;i++){
if(f2[i].className=="city" && f2[i].checked==true){
f2.keyword2.value += f2[i].value;
}
}
f2.keyword2.readOnly=(f2.keyword2.value!="");
}
</script>
<input type="checkbox" class="city name="city" onClick="check(this.form)" value="東京">東京
<input type="checkbox" class="city name="city" onClick="check(this.form)" value="大阪">大阪
<input type="checkbox" class="city name="city" onClick="check(this.form)" value="福岡">福岡
<input value="" size="50" type="text" name="keyword2">
</td>
</form>

投稿日時 - 2014-01-14 19:21:45

QNo.8429776

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

5人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

関数 check はグローバルスコープに定義されるので、二番目の check が一番目を上書きしています。
対策としては

* 別の名前に分ける
* 一つの関数で条件分けする
* 一つの関数にして、function check(form, textName, checkClassName) の様に汎用化する
* 一つの関数にして、text と checkbox に専用のクラスを追加して汎用化する

下に行くほど大変ですがお勧めです

投稿日時 - 2014-01-15 09:52:47

お礼

上書きが原因なんですね。
何通りかの対策を教えていただきありがとうございます。

>下に行くほど大変ですがお勧めです
>一つの関数にして、function check(form, textName, checkClassName) の様に汎用化する
本来でしたらば上のような方法で対応してみたいところですが、初心者の私には難題なので、
まずは別の名前に分けて上書きされないように対応してみます。
ありがとうございました。

投稿日時 - 2014-01-15 16:23:02

ANo.1

同じ名前のユーザー関数を定義してはいけません
名前を変えるか、ひとつのcheck()内で分岐して処理してください

投稿日時 - 2014-01-14 22:08:33

お礼

ユーザー関数を上書きしてしまっているんですね。
ありがとうございました。

投稿日時 - 2014-01-15 16:16:12

あなたにオススメの質問