プルダウンで選択した項目のvalueをinputタグに挿入したい

前提・実現したいこと

optionタグで選択された項目のvalueをinputタグに挿入したい。

<input type="hidden" name="items[1]products[][variant_id]" value="" /> 上記のvalueの値が、プルダウンで選択されたvalueが追加されるようにしたいのですが、どのように設定をしたらよいでしょうか....?

項目A(value=679)が選択されたら、その値を取得して、空白のvalueに値が入力されるイメージです。

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


<html>

<form id="form" action="https://~~~~" class="form-inline" method="post">

  <input type="hidden" name="is_multiple_item" id="is_multiple_item" value="true" />
  <input type="hidden" name="items[0]id" id="id" value="60" />
  <input type="hidden" name="items[0]cart_item_type" value="single_product" />

  <div class="form-group">
  <select name="items[0]option_values[0][id]" id="option_values_0_id">
    <option value="415">テスト1</option>
    <option value="416">テスト2</option>
    <option value="417">テスト3</option>
  </select>
  </div>

  <div>個数
    <select name="items[0]quantity" id="quantity" class="form-control custom_quantity">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>

  <input type="hidden" name="items[1]cart_item_type" value="regular_course" />
  <input type="hidden" name="items[1]id" id="id" value="16" />
  <input type="hidden" name="items[1]products[][variant_id]"   value="" />


 
  <div class="form-group">

    <select name="items[1]option_values[1][id]" id="option_values_0_id">
      <option value="679">A</option>
      <option value="481">B</option>
      <option value="44">C</option>
      <option value="43">D</option>
      <option value="42">E</option>
    </select>
  </div>


<div>個数
<select name="items[1]quantity" id="quantity" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>


<button name="button" type="submit" class="btn btn-primary">購入する</button>
</form>
</html>

試したこと

よくわからないまま、上記二点を試したが、おそらくこれは、値を取得するだけ,,,?

以下追加してみてもダメ...

<script type="text/javascript">
<!--
window.onload = function () {
//@cc_on
 document./*@if (1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/
 'change', function (evt) {
  var e　= evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;
  if (e.type=="select-one" && e.name=="items[1]option_values[1][id]"){
alert(e.value);
   var elements = document.getElementsByName("items[1]products[][variant_id]");
   elements[0].value=e.value;
  }
}, true);
}
// -->
</script>

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

画像のように、赤枠部分に値が入っていない....
ここに値が入ればうまくいくはず...

HTML
CSS
JS

結果

HTML&JS
1
2<html>
3
4<form id="form" action="https://〜" class="form-inline" method="post">
5
6<input type="hidden" name="is_multiple_item" id="is_multiple_item" value="true" />
7<input type="hidden" name="items[0]id" id="id1" value="60" />
8<input type="hidden" name="items[0]cart_item_type" value="single_product" />
9
10<div class="form-group">
11<select name="items[0]option_values[0][id]" id="option_values_0_id">
12<option value="415">テスト1</option>
13<option value="416">テスト2</option>
14<option value="417">テスト3</option>
15</select>
16</div>
17
18<div>個数
19<select name="items[0]quantity" id="quantity1" class="form-control custom_quantity">
20<option value="1">1</option>
21<option value="2">2</option>
22<option value="3">3</option>
23<option value="4">4</option>
24<option value="5">5</option>
25</select>
26</div>
27
28<input type="hidden" name="items[1]cart_item_type" value="regular_course" />
29<input type="hidden" name="items[1]id" id="id" value="16" />
30<input type="hidden" name="items[1]products[][variant_id]" value="" />
31
32
33
34<div class="form-group">
35
36<select name="items[1]option_values[1][id]" id="option_values_1_id">
37<option value="679">A</option>
38<option value="481">B</option>
39<option value="44">C</option>
40<option value="43">D</option>
41<option value="42">E</option>
42</select>
43</div>
44
45
46<div>個数
47<select name="items[1]quantity" id="quantity" class="form-control">
48<option value="1">1</option>
49<option value="2">2</option>
50<option value="3">3</option>
51<option value="4">4</option>
52<option value="5">5</option>
53</select>
54</div>
55
56
57<button name="button" type="submit" class="btn btn-primary">購入する</button>
58<script>
59const input = document.getElementsByTagName("input")[5];
60const select = document.getElementById("option_values_1_id");
61
62input.value = select.value;
63console.log(input.value);
64
65select.addEventListener("change", () => {
66input.value = select.value;
67console.log(input.value);
68});
69</script>
70</form>
71
72</html>

Hogeike

2020/10/27 01:07

React.js のタグは間違いではありませんか？

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

回答1件

ベストアンサー

分かりやすいようにinputのtypeをtextにしてます。
(hiddenにしても同様の動作をします。)
inputとselectのみで単純化してます。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9
10<body>
11    <input type="text">
12    <select name="test" id="test">
13        <option value="1">あ</option>
14        <option value="2">い</option>
15        <option value="3">う</option>
16    </select>
17    <script>
18        const input = document.getElementsByTagName("input")[0];
19        const select = document.getElementById("test");
20
21        input.value = select.value;
22        console.log(input.value);
23
24        select.addEventListener("change", () => {
25            input.value = select.value;
26            console.log(input.value);
27        });
28
29    </script>
30</body>
31
32</html>

追記

html
1<html>
2
3<form id="form" action="https://~~~~" class="form-inline" method="post">
4
5    <input type="hidden" name="is_multiple_item" id="is_multiple_item" value="true" />
6    <input type="hidden" name="items[0]id" id="id" value="60" />
7    <input type="hidden" name="items[0]cart_item_type" value="single_product" />
8
9    <div class="form-group">
10        <select name="items[0]option_values[0][id]" id="option_values_0_id">
11            <option value="415">テスト1</option>
12            <option value="416">テスト2</option>
13            <option value="417">テスト3</option>
14        </select>
15    </div>
16
17    <div>個数
18        <select name="items[0]quantity" id="quantity1" class="form-control custom_quantity">
19            <option value="1">1</option>
20            <option value="2">2</option>
21            <option value="3">3</option>
22            <option value="4">4</option>
23            <option value="5">5</option>
24        </select>
25    </div>
26
27    <input type="hidden" name="items[1]cart_item_type" value="regular_course" />
28    <input type="hidden" name="items[1]id" id="id1" value="16" />
29    <input type="hidden" name="items[1]products[][variant_id]" value="" />
30
31
32
33    <div class="form-group">
34
35        <select name="items[1]option_values[1][id]" id="test">
36            <option value="679">A</option>
37            <option value="481">B</option>
38            <option value="44">C</option>
39            <option value="43">D</option>
40            <option value="42">E</option>
41        </select>
42    </div>
43
44
45    <div>個数
46        <select name="items[1]quantity" id="quantity" class="form-control">
47            <option value="1">1</option>
48            <option value="2">2</option>
49            <option value="3">3</option>
50            <option value="4">4</option>
51            <option value="5">5</option>
52        </select>
53    </div>
54
55
56    <button name="button" type="submit" class="btn btn-primary">購入する</button>
57    <script>
58        const input = document.getElementsByTagName("input")[5];
59        const select = document.getElementById("test");
60
61        input.value = select.value;
62        console.log(input.value);
63
64        select.addEventListener("change", () => {
65            input.value = select.value;
66            console.log(input.value);
67        });
68    </script>
69</form>
70
71</html>

投稿2020/10/26 22:30

編集2020/10/27 01:11

Jon_do

総合スコア1373

rrgsn

2020/10/27 00:24

うまく作動しません,,,, 以下のようにinputタグが複数あり、一番下の項目にのみ、 valueの値を付与したいのですが、いただいたコードでも実現可能でしょうか? <input type="hidden" name="items[1]cart_item_type" value="regular_course" /> <input type="hidden" name="items[1]id" id="id" value="16" /> <input type="hidden" name="items[1]products[][variant_id]" value="" />

Jon_do

2020/10/27 01:05

自分が書いたコードをそのまま使ったら作動しません。書き換える必要があります。書き換える必要があるのはこの部分です。 <select name="items[1]option_values[1][id]" id="option_values_0_id"> id名は一つのhtmlファイルに一回しか使えません。 id="option_values_0_id"は既に使われているため <select name="items[1]option_values[1][id]" id="test"> とでも書き換えて下さい。うまく作動しなかったそうですが、恐らく下記のようにそのままコピペしたのだと思います。 const input = document.getElementsByTagName("input")[0]; ↑この部分の最後の数字[0]を　↓　[5]にします。 const input = document.getElementsByTagName("input")[5]; これで動作するのを確認してます。動作しないのであれば、動作しなかったコードを質問に追記して下さい。

Jon_do

2020/10/27 01:10

追記動作するコードを回答に追記しておきます。

rrgsn

2020/10/27 03:20

ご丁寧にありがとうございます。しかしながら、うまく作動しませんでした。商品をカートインする動きをしているのですが、テスト1~3の商品は正常にカートイン。 A~Eの商品のみデータが正しくないとエラーがででしまいます。

rrgsn

2020/10/27 03:21

<html> <form id="form" action="https://〜" class="form-inline" method="post"> <input type="hidden" name="is_multiple_item" id="is_multiple_item" value="true" /> <input type="hidden" name="items[0]id" id="id1" value="60" /> <input type="hidden" name="items[0]cart_item_type" value="single_product" /> <div class="form-group"> <select name="items[0]option_values[0][id]" id="option_values_0_id"> <option value="415">テスト1</option> <option value="416">テスト2</option> <option value="417">テスト3</option> </select> </div> <div>個数 <select name="items[0]quantity" id="quantity1" class="form-control custom_quantity"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <input type="hidden" name="items[1]cart_item_type" value="regular_course" /> <input type="hidden" name="items[1]id" id="id" value="16" /> <input type="hidden" name="items[1]products[][variant_id]" value="" /> <div class="form-group"> <select name="items[1]option_values[1][id]" id="option_values_1_id"> <option value="679">A</option> <option value="481">B</option> <option value="44">C</option> <option value="43">D</option> <option value="42">E</option> </select> </select> </div> <div>個数 <select name="items[1]quantity" id="quantity" class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <button name="button" type="submit" class="btn btn-primary">購入する</button> <script> const input = document.getElementsByTagName("input")[5]; const select = document.getElementById("option_values_1_id"); input.value = select.value; console.log(input.value); select.addEventListener("change", () => { input.value = select.value; console.log(input.value); }); </script> </form> </html>

rrgsn

2020/10/27 03:22

仮に、今回空白のvalueの部分に、固定値を入れると正常に作動するので、コード自体には問題はなさそうです... <input type="hidden" name="items[1]products[][variant_id]" value="679" />

Jon_do

2020/10/27 04:13

上のコードでも確かめましたがエラーは出ませんでした。おかしな点としてはselectの閉じタグが二重になってたりドクタイプ宣言がなかったり headタグがない点くらいでしたが、 Javascriptの動作に問題は有りません。項目A(value=679)が選択されたら、その値(679)を取得して、空白のvalueがあるコード <input type="hidden" name="items[1]products[][variant_id]" value="" /> に679が挿入、Bなら481が挿入Cなら44〜と動作しています。カートインする動きとの事ですが、質問に貼り付けたコード以外にも別のコードがあるのでしょうか？

rrgsn

2020/11/17 03:17

返答が遅くなり申し訳ございません。結論/環境の問題でうまく反映されない事象が発生しましたが、教えていただいたもので、コード自体が正常に作動するのを確認できました！！！丁寧に教えていただき、ありがとうございました！！！

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