JavaScriptでフォームの値を取得したい

前提・実現したいこと

bcdという名前を付けたタグが6個、bnameという名前を付けたタグが6個あります。
bcdのテキストボックスからカーソルが離れたら、その横にあるbnameの値を取得したいです。

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

ソースコードを実行すると、どのbcdタグのテキストボックスを見ても、bnameタグの最後の値である「test6」
しか表示されません。

実行されるときには、変数のiが「5」になっているためだと思いますが、これを解決する方法が分かりません。

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8    <script>
9        window.onload = function(){
10            for(i=0; i<5; i++){
11                document.forms["form1"].elements["bcd"][i].onblur = function(){
12                    alert(document.forms["form1"].elements["bname"][i].value);
13                }
14            }
15        }
16    </script>
17</head>
18<body>
19    <form name="form1" action="">
20        <input name="bcd" type="text" value="000001"><input name="bname" type="text" value="test1"><br>
21        <input name="bcd" type="text" value="000002"><input name="bname" type="text" value="test2"><br>
22        <input name="bcd" type="text" value="000003"><input name="bname" type="text" value="test3"><br>
23        <input name="bcd" type="text" value="000004"><input name="bname" type="text" value="test4"><br>
24        <input name="bcd" type="text" value="000005"><input name="bname" type="text" value="test5"><br>
25        <input name="bcd" type="text" value="000006"><input name="bname" type="text" value="test6"><br>
26    </form>
27</body>
28</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答3件

ベストアンサー

こゆのはClosureで片付く。

var funcOnBlur = function(i){
  return function(){
    alert(document.forms["form1"].elements["bname"][i].value);
  };
};

document.forms["form1"].elements["bcd"][i].onblur = funcOnBlur(i);

投稿2018/06/26 10:05

tkturbo

総合スコア5572

noriouser

2018/06/26 23:42

回答ありがとうございます。以下のようにしてみましたが、ポップアップは表示されませんでした。書き方が違うのでしょうか？ <script> window.onload = function(){ for(i=0; i<5; i++){ var funcOnBlur = function(i){ return function(){ alert(document.forms["form1"].elements["bname"][i].value; }; }; document.forms["form1"].elements["bcd"][i].onblur = funcOnBlur(i); } } </script>

efcode

2018/06/27 02:30

エラー出して止まってるからだと思います。コンソール確認する癖を付けた方が良いですよ

tkturbo

2018/06/27 02:32

> return function(){ > alert(document.forms["form1"].elements["bname"][i].value; > }; ↑行末に「)」が足りない。

noriouser

2018/06/27 10:27

ありがとうございました。

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

変数 i を束縛する方法はいくつかありますが、この場合は束縛しなくて良いと思います。
(下記、未検証です)

JavaScript
1document.querySelector('form[name="form1"]').addEventListener('blur', function handleBlur (event) {
2  const input = event.target;
3
4  if (input.tagName !== 'INPUT' || input.name !== 'bcd') return;
5
6  alert(input.nextSibling.value);
7}, true);

Re: noriouser さん

投稿2018/06/27 03:51

編集2018/06/27 10:23

think49

総合スコア18162

x_x

2018/06/27 06:21

質問者のコードがIEを意識しているようなので、アロー関数は避けたほうがいいかもしれません。

think49

2018/06/27 10:25

x_x さんのアドバイスを受けて、関数式に変更しました。

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

これはどうでしょう。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8    <script>
9      var onBlurInputBcd = function(value){
10        return function(){alert(value)};
11      };
12
13      window.onload = function(){
14        for(i=0; i<6; i++){
15          document.forms["form1"].elements["bcd"][i].onblur = onBlurInputBcd(document.forms["form1"].elements["bname"][i].value);
16        }
17      }
18    </script>
19</head>
20<body>
21    <form name="form1" action="">
22        <input name="bcd" type="text" value="000001"><input name="bname" type="text" value="test1"><br>
23        <input name="bcd" type="text" value="000002"><input name="bname" type="text" value="test2"><br>
24        <input name="bcd" type="text" value="000003"><input name="bname" type="text" value="test3"><br>
25        <input name="bcd" type="text" value="000004"><input name="bname" type="text" value="test4"><br>
26        <input name="bcd" type="text" value="000005"><input name="bname" type="text" value="test5"><br>
27        <input name="bcd" type="text" value="000006"><input name="bname" type="text" value="test6"><br>
28    </form>
29</body>
30</html>