Uncaught TypeError: Cannot read property '0' of undefined

###前提・実現したいこと
html javascript phpでチェックされた画像を削除する機能を作っています。
１８行目でチェックされた画像のソースをformDataにappendしたいのですがエラーが出ました。エラーが出た理由が私には分かりません。エラー文で検索してみたのですが、なかなか手がかりがありませんでした。

追記:
どうやらdocument.forms.fm.変数.srcのように
変数を入れるということができないようです。
どうすればよいのでしょうか

###発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property '0' of undefined fileDelete.js:18

###該当のソースコード

javascript
1$(function(){
2    //フォームデータを一時保存する配列
3    var formDataArray = []
4    //クリックした時にデータ送信
5    $('#delete').on('click',function(){
6        //チェックボックス
7        var im = document.forms.fm.Checkbox;
8        var cnt = 0;
9        // Array オブジェクトを作成する
10        var img_id = new Array();
11        //チェックボックスの数だけ繰り返す
12        for(var i = 0; i < im.length; i++){
13            //チェックボックスにチェックがついてるか
14            if(im[i].checked){
15                //チェックボックスのvalue（imgのidが入っている）をimg_idにpush
16                img_id.push(im[i].value);
17                //チェックついてる数を数える
18                cnt++;
19            }
20        }
21        //チェックついてる数だけ繰り返す
22        for(var i = 0; i < cnt; i++){
23            //チェックのついている画像のソースをformDataにappend
24            var formData = new FormData();
25            //チェックされた画像のsrcをformDataにappend
26            formData.append('photo_path', document.forms.fm.img_id[i].src);//エラーの行
27            //formDataをArrayにpush
28            formDataArray.push(formData);
29        }
30        //入ってる配列を繰り返す
31        formDataArray.forEach(function(formData){
32            //画像のsrcが入っているか確認
33            console.log(formData.get("photo_path"));
34            //ajaxで送る
35            deleteFiles(formData);           
36        });
37    });
38        var deleteFiles = function(formData){
39        //ajaxで送信
40        $.ajax({
41            //POSTで送信
42            type: 'POST',
43            //ajaxが適切なcontentTypeに自動変換するのを防ぐ
44            contentType: false,
45            //データを文字列に自動変換するのを防ぐ
46            processData: false,
47            //送信先
48            url: './delete.php',
49            //送るデータ
50            data: formData,
51            //通信成功時に呼ばれる
52            //data 接続先PHPファイルが出力したデータ
53            success: function(data,dataType) {
54                console.log("成功" +data);
55            },
56            //通信失敗時に呼ばれる
57            //XMLHttpRequest.status HTTPステータス
58            //textStatus            timeout、error、parsererror等の文字列
59            //errorThrown           例外情報
60            error: function(XMLHttpRequest, textStatus, errorThrown){
61                console.log(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
62            }
63        });
64
65    }
66
67});

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5<script type="text/javascript" src="jquery.min.js"></script>
6<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
7<script type="text/javascript" src="jquery-ui.min.js"></script>
8<link rel="stylesheet" href="./css/stylesheet.css">
9<title>無題 1</title>
10<script type="text/javascript" src="./js/fileDelete.js"></script>
11</head>
12
13<body>
14<form action="" id="fm">
15  <input id="Checkbox" type="checkbox" value="hanakishi1"/><label for="Checkbox1"><img alt="" id="hanakishi1" src="./img/201705132127302158.bmp"></label><br />
16  <input id="Checkbox" type="checkbox" value="hanakishi2"/><label for="Checkbox2"><img alt="" id="hanakishi2" src="./img/201705132128064424.bmp"></label><br />
17  <input id="Checkbox" type="checkbox" value="hanakishi3"/><label for="Checkbox2"><img alt="" id="hanakishi3" src="./img/201705132202537738.bmp"></label><br />
18  <input id="Checkbox" type="checkbox" value="hanakishi4"/><label for="Checkbox2"><img alt="" id="hanakishi4" src="./img/201705132202538089.bmp"></label><br />
19  <input id="Checkbox" type="checkbox" value="hanakishi5"/><label for="Checkbox2"><img alt="" id="hanakishi5" src="./img/201705132202538861.bmp"></label><br />
20  <input id="delete" type="button" value="Delete" />
21</form> 
22</body>
23
24</html>

think49

2017/05/22 01:26

「画期的な手がかりがありませんでした」とありますが、手がかりは画期的でなくとも全てあたってみるべきだと思います。

行動規範の内容に同意します

回答4件

ベストアンサー

もともと手がかりはない

エラーメッセージでぐぐれば、手掛かりはあります。

TypeError: Cannot read property '0' of undefined - Google 検索

JavaScript
1formData.append('photo_path', document.forms.fm.img_id`[i].src);//エラーの行

エラーメッセージより document.forms.fm.img_id が undefined である事が分かっています。
その事実は console.log(document.forms.fm.img_id) でも確認できるはずです。

なぜなら、「img_id という名前のフォーム関連要素」が存在しないからです。
変数値をプロパティに指定したい場合はブラケット記法を使用する必要があります。

JavaScript
1console.log(document.forms['fm']);
2console.log(document.forms['fm'][img_id[i]]);
3formData.append('photo_path', document.forms['fm'][img_id[i]].src);