▼次のようにページ内のdivタグのidの名前によって、formタグ内の要素をdisableにすることはJava scriptによって可能でしょうか?
<div id="AA">のとき、別の場所にある<form id="BB">内のselect要素などすべての要素をdisableにする。
また同時に、id="BB"に指定したスタイルシートの記述を書き換えることは可能でしょうか?
何かよい方法をご存知でしたら教えてください。よろしくお願いいたします。
No.1
- 回答日時:
「<div id="AA">の時」という意味がわかりません。
formのBBをdisableにするのは以下ですが、
トリガーがAAをどうしたときなのかはっきりさせた方がよいです。
それとスタイルシートの記述を変えるというのも、
なにをどうしたいのかもっと具体的に質問なさると
回答しやすいと思いますよ。
<form>
<input type="button" onClick="changeBB(true)" value="off">
<input type="button" onClick="changeBB(false)" value="on">
</form>
<form id="BB">
<select name="s">
<option>select1
<option>select2
<option>select3
<option>select4
</select><br>
<input type="radio" name="r" checked>radio1<br>
<input type="radio" name="r">radio2<br>
<input type="radio" name="r">radio3<br>
<input type="radio" name="r">radio4<br>
<input type="text" value="text"><br>
<input type="button" value="button" onClick="alert('test')"><br>
</form>
<script>
function changeBB(num){
var BB=document.getElementById("BB");
for (var i =0; i<=BB.length -1 ;i++){
BB.elements[i].disabled=num;
}
}
</script>
この回答への補足
こんにちは、yambejpさん。早速の回答ありがとうございます。
拙い説明でご迷惑をおかけして申し訳ありません。
もう少しわかりやすいよう、質問の内容を変更/整理してみました。
勉強不足で申し訳ありませんが、何かよい方法がありましたら教えてください。
よろしくお願いします。
■実現したい内容
フォームで商品を購入するショッピングサイトのカート。
在庫があるときは「カートに入れられる」、在庫がないときは「カートが使えない」
■HTMLの記述
・在庫があるとき<div id="instock">。<form id="cart">は「カートに入れられる」状態。
・在庫がないとき手入力で<div id="soldout">と書き換える。<form id="cart">は「カートが使えない」状態(disable)
・if <div id="instock"> then formを表示。if <div id="soldout"> then formをdisable
<form id="cart">
<select>
<option>1</option>
<option>2</option>
</select>
<select>
<option>1</option>
<option>2</option>
</select>
<input type="text" value="text">
<input type="button" value="button">
<div id="instock/soldout"> // 在庫有りinstock/在庫なしsoldout
・・・・
</div>
<form>
■CSSの記述
・在庫があるとき、#instock { background: url(instock.gif) no-repeat; }
・在庫がないとき、#soldout { background: url(soldout.gif) no-repeat; }
No.2
- 回答日時:
scriptで
if(document.getElementById("AA")==null){
//id="AA"はない
} else {
//id="AA"はある
}
のように判別できます
この回答への補足
BLUEPIXYさん、お返事が遅くなってすみません。教えていただいた条件式を元に何とか動作するように作ってみました。
希望とおりid="instock"のときはカートが使えて、id="soldout"のときはdisableになりカートが使えなくなるようになりました。
動作するので問題はないと思いますが、なぜか時々エラーが出ます。
書き方はこれであっていますでしょうか?
書き方に問題なければ別の部分に原因があると思います。
お時間あるときにチェックしていただければ助かります。
よろしくお願いいたします。
<html>
<head>
<script>
function stockStatus (num){
var soldout=document.getElementById("soldout");
if(document.getElementById("soldout")==null){
return false;
}
else {
for (var i =0; i<=soldout.length -1 ;i++){
soldout.elements[i].disabled=num;
}
}
}
</script>
<title></title>
</head>
<body onLoad="stockStatus (true)">
<form id="soldout" action="" method="POST">
<select name="color">
<option>シルバー</option><option>ゴールド</option></select>
<select name="kazu"><option>1</option><option>2</option><option>3</option></select>
<input type="submit" value="カートに入れる">
</form>
</body>
</html>
No.3ベストアンサー
- 回答日時:
>なぜか時々エラーが出ます。
ウチでちょっと試した程度ではエラーが発生しませんでした。
できましたら、発生したときのメッセージや場所また、ブラウザの種類なども教えてください。
以下は、予防的な意味での注意点についてちょっと書きます。
>return false;
は、必要ないです。
書かない方がいいと思います。
==nullの場合の処理が必要ないなら
!=nullにすればよいです。
もしくは
return false;でなくて
;
のように空文でもよいです。
あと、idに使っている名前と同じ名前を変数名として使わない方が良いです。
つまり、
id="soldout"の時に
var soldout;という風にはしない方が良いです。
同じでなければ、cartFormでもなんでもかまいません。
あと、scriptは、
<!--
(スクリプトの中身)
//-->
のように
<!--
//-->
で囲むようにします。
getElementById
は、ブラウザやのブラウザのバージョンによっては使えないことがあります。
その場合は、使えるかどうかを調べる必要があります。
<script type="text/javascript">
<!--
function stockStatus (num){
var f=document.getElementById("soldout");
if(f!=null){
for (var i =0; i<=f.length -1 ;i++){
f.elements[i].disabled=num;
}
}
}
//-->
</script>
この回答への補足
BLUEPIXYさん、早速のお返事ありがとうございました。
こんなにも短いスクリプトで記述できるとは驚きでした。
いろんなところのスクリプトを参考にして作ったのですがずいぶん無駄があったようです。
私は論理的思考が苦手なためJava Scriptのような言語はなかなか身につかなくて困っています。あれだけのスクリプトを作るのにも半日かかってしまいました。
> 発生したときのメッセージや場所また、ブラウザの種類なども教えてください。
あれから何度か試してみたのですが、恐らく他のスクリプトに原因があるみたいです。
このスクリプト単体ではエラーは出なくなりました。
ブラウザはIE5.0、5.5、6.0、MACIE5.2、firefoxです。
エラーが出るのは気持ち悪いのですが、特に動作に問題なければいいかなと思っています。
補足に掲載したURLの掲載がgooの規約に反し、記載内容ががシステム側より修正さましたので、この件につきましてはこれで完了済みとさせていただきます。
いろいろ丁寧に教えていただきありがとうございました。
大変感謝しております。
まだまだ勉強不足ですのでまたこの場でお世話になることがあるかもしれません。
そのときはぜひよろしくお願いいたします。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
階層別の組織図の自動作成について
-
食材の期限を管理するためにGAS...
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
前回の質問の続き function mou...
-
このプログラムに王様の逃げ道...
-
ビデオのJSについて
-
鍵盤アプリで、スマホの画面に...
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
-
iOSのみダブルタップが必要
-
jsで質問です。 displayプロパ...
-
var exports = exports || {}; ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
SQLのmaxで求めた値を変数に代...
-
Selenium Basicの件
-
Doctrineのjoinについて
-
ドラッグ & ドロップでのド...
-
パソコンで動くjavascriptがス...
-
jquery.csv2table.jsに検索窓
-
エレメントとは何でしょうか
-
チェックボックスとラジオボタ...
-
★大至急!JavaScriptのif文教え...
-
プルダウン内容に応じてラジオ...
-
メールを送信するボタンでOutlo...
-
WebbrowserよりHTMLのValue値を...
-
VBAでIEのHTMLタグの要素を操作...
-
ボタンクリックした際、id末尾...
-
javascriptでフォーム部品の参...
-
BootStrap.TouchSpinについて
-
チェックボックスの値によってC...
-
IndexedDB を使ってファイルア...
おすすめ情報