質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

5回答

25457閲覧

ID属性を複数指定したい

SystemAjisai

総合スコア171

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/03/30 02:14

テキストボックスにidを2つ指定したいと思っています。

html

1<input type="text" id="f_forcs abc_code" value="" />

この項目は他の項目が選択されると初期値が自動で埋まるため、
Ajaxで戻ってきた初期値をセットするのに「abc_code」というID目がけて値をセットしています。

それ以外に最初にぺージが表示された際に初期フォーカスを当てる項目として「f_forcs」というIDの設定が共通で義務付けられています。

そのため2つのIDを設定したいのですが、単独で設定するとそれぞれの処理はうまく動くのに、2つ設定すると動作しなくなります。
google chromeのF12を押したら出てくるツールで動作を確認したところ、IDで要素を取得しているところで何も取得されていませんでした。

javascript

1$('#f_forcs').focus(); // ここで$('#f_forcs')のlengthが0

初期値のセットをf_forcs目がけて行えば解決するのですが、
ソースを読んだときに「は?」となりそうなので、できればわかる名前でIDを付けたいと思っています。

classはスペースで区切れば複数指定できるとあったのですが、idでは無理なのでしょうか。
それとも別なアクセス方法が必要なのでしょうか。
ネットで「html id 複数」で調べても「同ページ内で同じID名は複数使用できません」についてのページばかりヒットして困っています。
ご存知の方教えて頂けると助かります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/03/30 02:28

なぜ abc_code という id でないとダメなのですか? jQuery のセレクタで当該 html 要素の jQuery オブジェクトが取得できればよいということであれば id にこだわる必要はないはずですが?
SystemAjisai

2017/03/30 02:41

id=1つ、class=複数あるかも、というマーキングだと思っているので、「この値を設定するのはabc_codeというidを持つ1項目だけです」という意味でIDにしました。私の知能では「できるからこだわる必要ない」で実装したら後から混乱しそうなんです。
guest

回答5

0

それ以外に最初にぺージが表示された際に初期フォーカスを当てる項目として「f_forcs」というIDの設定が共通で義務付けられています。

ここがおかしいです。既に yambejp さんが書かれているように、ID は当該 form 内でユニークでなくてはならないです。この義務に従う以上、この項目に対する ID は f_forcs 以外にはできません。

そもそもの指定がおかしくて、本来なら f_forcs という「クラス」を指定したフィールドが初期フォーカスをもつ、であるべきなのです。

投稿2017/03/30 02:26

tacsheaven

総合スコア13703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SystemAjisai

2017/03/30 02:44 編集

そこの理解が間違っていたようです。 私は「f_forcs」も「abc_code」も該当form内でこの1項目しかないので、ユニークだから問題ないと思ったんです。 問題になるのは「f_forcs」というIDを同じページ内で2回使うことだと思っていました。 f_forcsは共通規定で変えられないのでabc_codeの方で対応しようと思います。 (決めた人は同じページ内でf_forcsを2回指定するなよ、という気持ちでidにしたようでした) 勉強になりました。ありがとうございました。
tacsheaven

2017/03/30 02:45

フィールドのnameはidと同じである必要はない(しかも送信データの key-value の key は id ではなくname)ので、気になるなら name で管理するしかないかと思います。
SystemAjisai

2017/03/30 02:54

おぉ…し、しりませんでした。 実際の開発ではphp(CodeIgniter)を使用していて、カスタマイズしたヘルパー関数でHTMLタグが出力されています。今読んでみたら、そいつがnameとidには同じ値を出力するようになっていました。 全部の項目でname=idだから同一だと思い込んでましたが、確かにhtmlではnameとidは別で出てますね。気づくべきでした。 せっかくなのでnameでも試してみようと思います。 ありがとうございました。
tacsheaven

2017/03/30 03:11

ラジオボタンを置いてみるとわかるのですが、グループ化されたラジオボタンは「nameは同一でidが各々違う」button です。これは、送信する値(nameがkey)としてはどれか一つにしたいからこういう風に記述されます。 同じ name の input が複数あった場合、各々が(hobby=book&hobby=movieのようにして)送られます。ラジオボタンの場合はチェックされていなければ送信対象にならないので、一つだけが送られます。
SystemAjisai

2017/03/30 04:25

ありがとうございます。超勉強になりました。 今までラジオボタン、目玉1個ずつに別の名前つけてました。。。 チェックボックスもまた然りです。 早速バチっと直したら、サーバーサイドから値決定のための長いif文が消えました! 本当にありがとうございました!
guest

0

classはスペースで区切れば複数指定できるとあったのですが、idでは無理なのでしょうか。

無理です。idではなくclassで指定されてはいかがでしょうか。

HTML

1<input type="text" class="f_forcs abc_code" value="" />

投稿2017/03/30 02:22

kei344

総合スコア69462

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SystemAjisai

2017/03/30 02:32

ありがとうございます。フォーカスの方は共通指定なのでabc_codeの方をclassに変更して対応します。
guest

0

ベストアンサー

複数のIDはつけられませんよ
ユニークなクラスをつけて対応すればよいのでは?

投稿2017/03/30 02:22

yambejp

総合スコア115057

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SystemAjisai

2017/03/30 02:32

ありがとうございます。フォーカスの方は共通指定なのでabc_codeの方を変更して対応します。
yambejp

2017/03/30 02:47

まぁクラスは構造化したりcssなどに利用したりするので 場合によってはdata-*形式指定した方がよいでしょうね idの代わりに利用するのであれば以下のような感じです <script> window.addEventListener('load',function(){ console.log(document.querySelector('[data-id~=abc_code]').getAttribute('value')); }); </script> <input type="text" id="f_forcs" data-id="abc_code def_code" value="123" />
SystemAjisai

2017/03/30 02:57

ありがとうございます。 data-*ってHTML5を調べた時に見かけて、いつ使うかわからなかったんですが、こういう時に使うんですね。 未だIE6が一部現役なファ!?な会社なので本番環境で入れるのは怖いですが、後学のためにローカルで試してみたいと思います。 ありがとうございました。
guest

0

#を.に変えるだけなのでそこまでidにこだわらなくてもいいのではないでしょうか。
idじゃないと扱えないというのだったらまた別問題になりそうですが。

投稿2017/03/30 02:31

toutou

総合スコア2050

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SystemAjisai

2017/03/30 02:47

SurferOnWwwさんの追記にも書いたのですが、id=1つ、class=複数あるかも、というマーキングだと思っているので、「この値を設定するのはabc_codeというidを持つ1項目だけです」という意味でIDにしました。 がちがちに意味にこだわるつもりもありませんが、できるならやっちゃうでは、未来の私を混乱させる結果になりそうなので…。
guest

0

IDは1つしか指定できません。

下記の要素に対してgetElementById()を行うと、おそらくf_forcsしか取得できないと思います。
IDは1つと決められているため、最初に取得したものを返すという仕様になっていたはずです。

html

1<input type="text" id="f_forcs abc_code" value="" />

投稿2017/03/30 02:27

KaiShoya

総合スコア551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SystemAjisai

2017/03/30 02:44

idは1つの意味を間違えていたようです。 idの立場から見てユニークであれば問題ないと思ってたんですが、要素の立場からみてもユニークである必要があったんですね。 勉強になりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問