Auto-fill content of multiple input base on value of 1 input

Question

I'm learning HTML/CSS/JS/Jquery. I'm working on a page has multiple text input items. Somehow I want to automatically copy content of 1 input (main_item) and paste on other inputs.

I found this topic almost solve my problem: How can I select an element by name with jQuery?

But as my case, the fields I need to be auto-filled is created as an objects array and accessed by it's name (quote_item[#][item]) and I've tried this but no use:

    $("#main_item").keyup(function(){
        update();
    });

    function update() {
      $("input[name*=quote_item").val($('#main_item').val());
    }

    <p>Main item: <input type="text" id="main_item" name="main_item" value=""></p>
    <p>
       <input type="text" name="item[0][item-code]" value="">
       <input type="text" name="item[1][item-code]" value="">
    </p>

Please help!

I don't understand what `item[0][item-code]` and `item[1][item-code]` do in your case? Which input box would the text from `#main_item` go into? — Nick Parsons, Jun 15 '19 at 14:13
Hi Nick, I don't want to mess things up so I just gave you part of my code. Let me explain: Main item is the parent, and item[0][item-code] is its child or sub item, there also item[0][description] to describe the item[0][item-code] but I did not show here. EX: Main_item=CAR001, item[0][item-code]=CAR001-01, item[0][description]="drive wheel". And each main item has difference number of its sub item. — Đức Trường Đặng, Jun 16 '19 at 02:58

score 0 · Accepted Answer · answered Jun 15 '19 at 14:23

Hope this is what you wanted

input[name$='[item-code]'] // input attr name ends with [item-code]

$("#main_item").keyup(function() {
  update();
});

function update() {
  $("input[name$='[item-code]']").val($('#main_item').val());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Main item: <input type="text" id="main_item" name="main_item" value=""></p>
<p>
  <input type="text" name="item[0][item-code]" value="">
  <input type="text" name="item[1][item-code]" value="">
</p>

Auto-fill content of multiple input base on value of 1 input

1 Answers1