type="hidden"のjsのコードについて

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8"/>
5    <script language="javascript" type="text/javascript">
6      function add() {
7        var form = document.getElementById("form1"); //"form1"という値が取得できる。
8
9        // hiddenオブジェクトを動的に作成
10        var manufact = document.createElement("input");　//引数を指定<input>タグの要素を指定
11        manufact.setAttribute("type", "hidden");　　//type="hidden"なので<input type="hidden" name="plain_type" id="plain_type" value="B777-300ER" />が選択される
12        manufact.setAttribute("id", "manufact");　　//id="plain_type"からidがmanufactに変更するされる
13        manufact.value = "boeing";　　//value="B777-300ER"からvalue="boeing"に変更される
14        manufact.name = "manufact";　　//name="plain_type"からname="manufact"に変更される
15        form.appendChild(manufact);　　//<input type="hidden" name="plain_type" id="plain_type" value="B777-300ER" />値が書き変わる。
16      }
17    </script>
18  </head>
19  <body>
20    <form method="GET" id="form1">
21      <input type="text" name="plain_name" id="plain_name" value="政府専用機" />
22      <input type="hidden" name="plain_type" id="plain_type" value="B777-300ER" />
23      <input type="submit"　onclick="add();"/>
24    </form>
25  </body>
26</html>
27

jsがどのような処理をしているのか解読出来ないでおります。
//で自分で解読してみたのですが、jsで、inputタグのname="plain_name"とname="plain_type"の繋がりが見つけられません。name="plain_name"のinputタグで入力された値がなぜ上記のjsでname="plain_type" がわかるようになるのでしょうか？

q_sane_q

2019/10/06 05:47

JavaScriptの処理解読が正しくないというのもあるのですが、それを踏まえてもname="plain_name"、name="plain_type"には干渉していないですね。その２フィールドに何か動きがあるのなら他にもスクリプトを読み込んでいるか、あるいは根本的な解釈が間違っている可能性があります。どこか実際のHTMLから省略していませんか？

退会済みユーザー

2019/10/06 05:50

有難うございます。 https://techacademy.jp/magazine/19638 の例を読んでおりました。確かに<input type="button" value="製造社情報の追加" onclick="add();"/>を消し、<input type="submit"　onclick="add();"/>に変更致しました。

退会済みユーザー

2019/10/06 05:54

<input type="text" name="plain_name" id="plain_name" value="政府専用機" /> <input type="hidden" name="plain_type" id="plain_type" value="B777-300ER" /> inputで入力された値に紐ずくtype="hidden" でのid="plain_type" の値を求めるjsの式を作りたいのですが、例を見ても理解が出来ずにおります。。

q_sane_q

2019/10/06 05:58

「紐づく」という意味がイマイチわからないのですが… あと元ネタの記事でもやはり件の２フィールドは関係ないようです。

q_sane_q

2019/10/06 06:07

連続質問失礼します・「紐づく」という意味を教えて欲しいです・なぜこちらで件の2フィールドが何か動いている、と考え至ったのでしょうか

退会済みユーザー

2019/10/06 06:08

すいません、例が変わってしまうのですが、 <div class="dot-wrapper"> <div class="dots"> <p>java<br>body</p> <input placeholder="団体名" class="pas" id="name"> <input　type="hidden" class="pas" id="nameId"> </div> </div> 例えば団体名が入力されると、所属団体名がわかるようにするjsを作りたいです。

退会済みユーザー

2019/10/06 06:11 編集

団体名がわかれば親団体名がわかるようにdbから取得したいです。はい、<form></form>で囲っていたので取得できるのではないか？と考えました。

q_sane_q

2019/10/06 06:18

こういったクライアントサイド、つまりブラウザで動いているJavaScriptだけではDBに接続して処理することは基本出来ないです。 formタグを使ってサーバサイドに処理を投げて、結果を手に入れた状態のページに遷移する方法がありますが今の主流はページ遷移なしでデータのやり取りをするAjaxという仕組みを使うことだと思いますいずれにしてもサーバサイドの処理を作成して動かす必要があります。ちなみに書かれているJavaScriptはformの中にhiddenのinput要素を1つ追加するだけの処理です

退会済みユーザー

2019/10/06 06:32

そうなのですね！有難うございますm(__)m あの、ちなみにajaxを使わずに、最初から団体名と所属団体のデータを保有しておいて団体名とその親である所属団体がわかるようにするjsならajaxを使わずに出来ますでしょうか？ jsは団体名と所属団体の一致を探す処理をして、jsがその処理を実行できるようにデータをあらかじめ持たせておく方ほうなのですが、どう思われますか？

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

回答2件

name="plain_name"のinputタグで入力された値がなぜ上記のjsでname="plain_type" がわかるようになるのでしょうか？

質問内にわかるようになる記述はありません。
別の仕組みが動いていると思われます。

投稿2019/10/06 07:10

退会済みユーザー

総合スコア0

ベストアンサー

HTML
1<html>
2<head>
3<script>
4
5// 対応表
6const map = {
7"AAA": "ID-A",
8"BBB": "ID-B",
9"CCC": "ID-C",
10"DDD": "ID-D",
11"EEE": "ID-E",
12}
13
14function check(param){
15    const key = param.value;
16    const data = map[key];
17    if(data != null){
18        document.getElementById("nameId").value = data;
19    }else{
20        alert("見つかりません");
21        document.getElementById("nameId").value = "";
22    }
23}
24</script>
25</head>
26<body>
27    <div class="dot-wrapper">
28        <div class="dots">
29            <input placeholder="団体名" class="pas" id="name" onChange="check(this)">
30            <input type="text" class="pas" id="nameId"><!-- わかりやすくtypeをtextにしてあります -->
31        </div>
32    </div>
33</body>
34</html>

やや冗長ですがシンプルに書いてみました。
ただマスターデータをこういった持ち方をするのは推奨されるものではないです
マスターデータが増えたら書き直さなければいけなかったり、ブラウザで中身が見えてしまったりするなどいろいろな理由があります
なので実際にこのような何かを作るためにはサーバ側の開発も行うことになると思います

ただ例えば、DBにこういったデータが入っていて、サーバサイドでそれを検索してクライアント側、つまりJavaScriptで受け取る処理があるよ、でもまだDBやサーバサイドの処理ができてないよ、だからサーバからデータが返ってきたというていでクライアント側の処理を書いたりテストしたりしたいよ、という時に一時的にダミーとして使うことはあります。

あと一応、質問内容にあったJavaScriptの正しい動きも以下に記載します。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8"/>
5    <script language="javascript" type="text/javascript">
6      function add() {
7        var form = document.getElementById("form1");
8        // idが「form1」の要素を取得する。つまり<form method="GET" id="form1">～</form>をとってきている
9
10        // hiddenオブジェクトを動的に作成
11        var manufact = document.createElement("input"); // inputタグの要素を作成して変数manufactに入れる
12        manufact.setAttribute("type", "hidden"); // manufactのtypeをhiddenにする
13        manufact.setAttribute("id", "manufact"); // manufactのidを「manufact」にする
14        manufact.value = "boeing"; // manufactのvalueを「boeing」にする
15        manufact.name = "manufact"; // manufactのnameを「manufact」にする
16        // こんなinput要素が出来てる
17        // <input type="hidden" id="manufact" name="manufact" value="boeing" >
18
19        form.appendChild(manufact);
20        // form、つまり<form method="GET" id="form1">～</form>　に
21        // manufact、つまり<input type="hidden" id="manufact" name="manufact" value="boeing" >
22        // を追加します
23      }
24    </script>
25  </head>
26  <body>
27    <form method="GET" id="form1">
28      <input type="text" name="plain_name" id="plain_name" value="政府専用機" />
29      <input type="hidden" name="plain_type" id="plain_type" value="B777-300ER" />
30      <input type="submit"　onclick="add();"/>
31    </form>
32  </body>
33</html>

投稿2019/10/06 07:07

q_sane_q

総合スコア610

退会済みユーザー

2019/10/06 11:16

説明していただき有難うございます！！ようやく理解出来ましたm(__)m とんでもない勘違いをするところでした。自分は値を変更するのかと思っておりましたが、追加何ですね。。助かりました。 createElementの意味をもっと考えるべきだったと思いました。例の方もご回答いただきまして有難うございますm(__)m ajaxを使わずにしたいと思いましたが、確かにメンテナンスなどを考えると難しいなと思いました。 mapの書き方もとても勉強になりました！！有難うございます！！

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

あなたの回答