ID属性を複数指定したい

Question

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

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

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

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

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

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

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

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

Comments

[退会済みユーザー]

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

[SystemAjisai]

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

Answer 1

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

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

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

Comments

[SystemAjisai]

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

[tacsheaven]

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

[SystemAjisai]

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

[tacsheaven]

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

[SystemAjisai]

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

Answer 2

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

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

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

Comments

[SystemAjisai]

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

Answer 3

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

Comments

[SystemAjisai]

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

[yambejp]

まぁクラスは構造化したり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]

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

Answer 4

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

Comments

[SystemAjisai]

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

Answer 5

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

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

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

Comments

[SystemAjisai]

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