'How to autopopulate multiple input fields based on a select tag in Javascript?

I want to autopopulate two fields in my table based on what I select in another field. So I far checked out different solutions on how to do it and none of them worked. This is what the code looks like. The fields that I want to autopopulate are description and price:

<tr id="sr_no_1">
                    <td><span id="sr_no">1</span></td>
                    <!-- <td><input type="text" name="services[]" id="services1" class="form-control input-sm"></td> -->
                    <td>
                      <select name="services[]" id="services1" class="services form-control input-sm">
                        <option value="0">Select service...</option>
                        <option value="1">Test 1</option>
                        <option value="2">Test 2</option>
                        <option value="3">Test 3</option>
                      </select>
                    </td>
                    <td><input type="text" name="descriptions[]" id="descriptions1" readonly class="form-control input-sm" /></td>
                    <td><input type="text" name="prices[]" id="prices1" data-srno="1" readonly class="form-control input-sm number_only prices" /></td>
                    <td><input type="text" name="hours[]" id="hours1" data-srno="1" class="form-control input-sm number_only hours" /></td>
                    <td><input type="text" name="total[]" id="total1" data-srno="1" readonly class="form-control input-sm number_only total" /></td>
                    <td></td>
</tr>

Edit: I forgot to mention that since this is a table, rows will be dynamically added. So now, the code that autopopulates the fields worked for the original row only, not the added rows. In my javascript, this is what the added function looks like:

// Add new rows
$(document).on('click','#add_row',function(){
    count++;
    $("#total_service").val(count);
    var html_code = '';
    html_code += '<tr id="row_id_'+count+'">';
    html_code += '<td><span id="sr_no">'+count+'</span></td>';

    // html_code += '<td><input type="text" name="services[]" id="services'+count+'" class="form-control input-sm"></td>';
    html_code += '<td>';
    html_code += '<select name="services[]" onchange="myFunction(this.value)" id="services1" class="services form-control input-sm">';
    html_code += '<option value="">Select service...</option>';
    html_code += '<option value="">Test 1</option>';
    html_code += '<option value="">Test 2</option>';
    html_code += '<option value="">Test 3</option>';
    html_code += '</select>';
    html_code += '</td>';
    html_code += '<td><input type="text" name="descriptions[]" id="descriptions'+count+'" readonly class="form-control input-sm" /></td>';
    
    html_code += '<td><input type="text" name="prices[]" id="prices'+count+'" data-srno="'+count+'" readonly class="form-control input-sm number_only prices" /></td>';
    html_code += '<td><input type="text" name="hours[]" id="hours'+count+'" data-srno="'+count+'" class="form-control input-sm number_only hours" /></td>';
    html_code += '<td><input type="text" name="total[]" id="total'+count+'" data-srno="'+count+'" readonly class="form-control input-sm number_only total" /></td>';
    html_code += '<td><input type="button" name="remove_row" id="'+count+'" class="btn btn-danger btn-sm remove_row" value="X"></td>';
    html_code += '</tr>';
    
    $("#service_table").append(html_code);
});

javascript html

Solution 1:^[1]

have you tried this?

function myFunction(value,id){
  var numberId = id.split('_')[1]//Will keep only the number of the id
  if(value == 1){
    document.getElementById('descriptions_'+numberId).value = 'Descriptions';
  }
  if(value == 2){
    document.getElementById('prices_'+numberId).value = 'Prices';
  }
}

<!-- added onchange function in select element -->
<!-- EDIT: added this.id in the select onchange function.
           also added "_" in the ID's for the example of how it could work. -->
<tr id="sr_no_1">
  <td><span id="sr_no">1</span></td>
  <td>
    <select name="services[]" id="services_1" class="services form-control input-sm" onchange="myFunction(this.value, this.id)">
    <!--you could send the number directly with this.id.split('_')[1]-->
      <option value="0">Select service...</option>
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
      <option value="3">Test 3</option>
    </select>
  </td>
  <td><input type="text" name="descriptions[]" id="descriptions_1" readonly class="form-control input-sm" /></td>
  <td><input type="text" name="prices[]" id="prices_1" data-srno="1" readonly class="form-control input-sm number_only prices" /></td>
  <td><input type="text" name="hours[]" id="hours_1" data-srno="1" class="form-control input-sm number_only hours" /></td>
  <td><input type="text" name="total[]" id="total_1" data-srno="1" readonly class="form-control input-sm number_only total" /></td>
  <td></td>
</tr>

EDIT : Changed little things according to the mentioned in the edit from the original question.

NOTE : I don't think separating only by a single underline would be a great idea since it's very common to have ids/names with it to space. I always go with 3 underlines in these situations "id___1, id___2"

Solution 2:^[2]

I tried to reproduce your issue and made some changes in it. I added an onchange event on select tag and based on the selection updated description and prices inputs. Please try the below changes. Hope it fixed your issue.

HTML:

<tr id="sr_no_1">
  <td><span id="sr_no">1</span></td>
  <!-- <td><input type="text" name="services[]" id="services1" class="form-control input-sm"></td> -->
  <td>
    <select name="services[]" id="services1" onchange="updateValues()" class="services form-control input-sm">
      <option value="0">Select service...</option>
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
      <option value="3">Test 3</option>
    </select>
  </td>
  <td><input type="text" name="descriptions[]" id="descriptions1" readonly class="form-control input-sm" /></td>
  <td><input type="text" name="prices[]" id="prices1" data-srno="1" readonly class="form-control input-sm number_only prices" /></td>
  <td><input type="text" name="hours[]" id="hours1" data-srno="1" class="form-control input-sm number_only hours" /></td>
  <td><input type="text" name="total[]" id="total1" data-srno="1" readonly class="form-control input-sm number_only total" /></td>
  <td></td>
</tr>

JS:

function updateValues() {
  console.log(event.target.options[event.target.value].text)
  let selectedVal = event.target.options[event.target.value].text;
  document.getElementById('descriptions1').value = selectedVal;
  document.getElementById('prices1').value = selectedVal;

}

Full working code fiddle url - https://jsfiddle.net/3q9jvab0/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Ankit Saxena

'How to autopopulate multiple input fields based on a select tag in Javascript?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]