【JavaScript】Cannot read property 'value' of undefined

目次

1. やりたいこと・現在のコード
1-1. コードの各項目について
2. 環境
3. エラー
4. 原因
5. 最終的なコード
6. 感想
7. 参考
8. 最後に

1.やりたいこと・現在のコード

JavaScriptのsubmitイベントでformの送信をしたいです。

画像をクリックするとJavaScriptのイベントが実行されて、最終的にformが送信されます。

<td><a href="javascript:void(0);" onclick="javascript:submitHoge( hoge_id );return false;"><img src="/images/icon_smile.gif" /></a></td>

function submitHoge( hoge_id ){     
    document.form3.hoge_id.value = hoge_id;
    document.form3.submit();
}

<form name="form3" action="./sample_a.asp" method="post">
<input name="hoge_id" type="hidden" value="" />
</form>

1-1.コードの各項目について

(1)a href="javascript:void(0);"

項目	内容
<a href="JavaScript:スクリプトコード”>リンクテキスト</a>	アンカータグのhref属性にスクリプトを埋め込んでいる（JavaScript疑似プロトコル）
void演算子	何も返さない
void(0)	アンカータグ本来の動作（リンク）を抑制する。 リンク形式でテキストを表示したいけど処理はスクリプトに任せたいときに使用する。

(2)return false;

今回のケースでは、「リンクをクリックすると、画面遷移する」ブラウザ側の処理を中断するために記載しています。

(3)form.submit()

フォームの内容をサブミット（サーバ側や別ページに送信）します。

(4)hidden

タグでtype=hiddenと指定すると、ブラウザ上に表示されない非表示データを送信することができます。

※HTMLのソースからは見ることができます。

(5)post通信

情報を送信するためのリクエストです。URLにパラメータを付けずに、個人情報やパスワードなどを送ります。

2.環境

• windows10 バージョン21H2
• ASP

3.エラー

Cannot read property 'value' of undefinedとなってしまいます。

直訳すると「未定義のプロパティ「値」を読み取ることができません」となります。

function submitHoge( hoge_id ){     
    document.form3.hoge_id.value = hoge_id; // ここでエラー
    document.form3.submit();
}

<form name="form3" action="./sample_a.asp" method="post">
<input name="hoge_id" type="hidden" value="" />
</form>

「hoge_id、あるけど・・？」と自分が追加した箇所を確認してもわかりませんでした。

4.原因

form名が重複していました・・。

自分が書いたコードの記述より上にform3があり、そこにはdocument.form3.hoge_id.valueがありませんでした。重複した場合、最初のformを参照するんですね。

↓参照されていた別の箇所のform3です。確かにhoge_idはありません。

<form name="form3" method="post" action="./sample_b.asp">
<input type="hidden" name="keyword" value="<%=sKeyword%>"/>
<input type="hidden" name="status" value="<%=sStatus%>"/>
</form>

5.最終的なコード

form名を修正することで、エラーが解消されました。

<td><a href="javascript:void(0);" onclick="javascript:submitHoge( hoge_id );return false;"><img src="/images/icon_smile.gif" /></a></td>

function submitHoge( hoge_id ){     
    document.form4.hoge_id.value = hoge_id; 
    document.form4.submit();               
}

<form name="form4" action="./sample_a.asp" method="post">
<input name="hoge_id" type="hidden" value="" />
</form>

6.感想

後で気づけば単純なことでも、見つけるまでに時間がかかってしまいました。

コードの全体を眺めて動きを確認しつつ、実装をしていきたいと思います。

7.参考

山田祥寛, 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで, 技術評論社, 2016

8.最後に

記事の感想や意見、ご指摘等あれば伝えていただけるとありがたいです。
読んでいただき、ありがとうございました。