Home>

I want to insert the value of the item selected by the option tag into the input tag.


I want the value of the above value to be added to the value selected in the pull-down.
How should I set it ....?

This is an image that gets the value when item A (value = 679) is selected and fills in the blank value.

<html><form action = "https: // ~~~~" method = "post"><input type = "hidden" name = "is_multiple_item" value = "true" /><input type = "hidden" name = "items [0] id" value = "60" /><input type = "hidden" name = "items [0] cart_item_type" value = "single_product" /><select name = "items [0] option_values ​​[0] [id]"><option value = "415">Test 1</option><option value = "416">Test 2</option><option value = "417">Test 3</option></select>   number
  <select name = "items [0] 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><input type = "hidden" name = "items [1] cart_item_type" value = "regular_course" /><input type = "hidden" name = "items [1] id" value = "16" /><input type = "hidden" name = "items [1] products [] [variant_id]" value = "" />
    <select name = "items [1] 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> number<select name = "items [1] 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><button name = "button" type = "submit">Buy</button></form></html>
What I tried

I tried the above two points without knowing it, but probably this only gets the value ,,,?

You can't add the following ...

<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>
Supplementary information (FW/tool version, etc.)


As shown in the image, there is no value in the red frame part ....
If i enter a value here, it should work ...

HTML
CSS
JS

result
<html><form action = "https: // ~" method = "post"><input type = "hidden" name = "is_multiple_item" value = "true" /><input type = "hidden" name = "items [0] id" value = "60" /><input type = "hidden" name = "items [0] cart_item_type" value = "single_product" /><select name = "items [0] option_values ​​[0] [id]"><option value = "415">Test 1</option><option value = "416">Test 2</option><option value = "417">Test 3</option></select>number<select name = "items [0] 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><input type = "hidden" name = "items [1] cart_item_type" value = "regular_course" /><input type = "hidden" name = "items [1] id" value = "16" /><input type = "hidden" name = "items [1] products [] [variant_id]" value = "" /><select name = "items [1] 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>number<select name = "items [1] 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><button name = "button" type = "submit">Buy</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>
  • Answer # 1

    The input type is set to text for easy understanding.
    (The same operation is performed even if it is hidden.)
    It is simplified with only input and select.

    <! DOCTYPE html>
    <html lang = "ja">
    <head>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <title>Document</title>
    </head>
    <body>
      <input type = "text">
      <select name = "test" id = "test">
          <option value = "1">A</option>
          <option value = "2">I</option>
          <option value = "3">U</option>
      </select>
      <script>
            const input = document.getElementsByTagName ("input") [0];
            const select = document.getElementById ("test");
            input.value = select.value;
            console.log (input.value);
            select.addEventListener ("change", () =>{
                input.value = select.value;
                console.log (input.value);
            });
      </script>
    </body>
    </html>

    Postscript

    <html>
    <form id = "form" action = "https: // ~~~~" 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" />
        
          <select name = "items [0] option_values ​​[0] [id]" id = "option_values_0_id">
              <option value = "415">Test 1</option>
              <option value = "416">Test 2</option>
              <option value = "417">Test 3</option>
          </select>
        
         number
          <select name = "items [0] quantity" id = "quantity1">
              <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>
        
      <input type = "hidden" name = "items [1] cart_item_type" value = "regular_course" />
      <input type = "hidden" name = "items [1] id" id = "id1" value = "16" />
      <input type = "hidden" name = "items [1] products [] [variant_id]" value = "" />
        
          <select name = "items [1] option_values ​​[1] [id]" id = "test">
              <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>
        
         number
          <select name = "items [1] quantity" id = "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>
        
      <button name = "button" type = "submit">Buy</button>
      <script>
            const input = document.getElementsByTagName ("input") [5];
            const select = document.getElementById ("test");
            input.value = select.value;
            console.log (input.value);
            select.addEventListener ("change", () =>{
                input.value = select.value;
                console.log (input.value);
            });
      </script>
    </form>
    </html>