フォーム内の非表示の入力フィールドを、関数が呼び出されるたびに増加する数値で更新するJavascript関数があります。
元々getElementById()で機能していましたが、フォームを再設計する必要があったため、php関数を使用して個々のIDを要素に割り当てることができないため、要素の一意の名前しかありません。
そこで、代わりにJavascriptのgetElementsByName()を使用して要素を変更することにしました。
ここにその要素のHTMLがあります
<input type="hidden" value="" name="staff_counter">
これは私のJavascriptコードです:
window.onload=function()
{
//function is activated by a form button
var staffbox = document.getElementsByName('staff_counter');
staffbox.value = s;
s++;
}
関数が呼び出され、入力フィールドが指定された値を取得していない場合、Firebugでエラーが発生しません。
それはgetElementById()で動作していましたが、なぜ突然getElementsByName()で動作しないのですか?
ここに要素を作成するためにCodeigniterから使用するコードがあります
// staff_counter is name and the set_value function sets the value from what is
//posted so if the validation fails and the page is reloaded the form element does
// not lose its value
echo form_hidden('staff_counter', set_value('staff_counter'));
ありがとう
document.getElementsByName()
は NodeList を返すため、document.getElementsByName('staff_counter')[0]
(これらの数に応じて)によってインデックスにアクセスする必要があります。
length
プロパティにアクセスして、一致した要素の数を確認することもできます。
同様の問題が発生したので、配列を単純なループで解決しました。以下のコードは実行され、「btnSubmit」という名前のすべてのボタンが無効になります。
for (var i=0;i<document.getElementsByName('btnSubmit').length;i++){
document.getElementsByName('btnSubmit')[i].disabled=true;
}