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

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" ></td> -->
                    <td>
                      <select name="services[]" id="services1" >
                        <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  /></td>
                    <td><input type="text" name="prices[]" id="prices1" data-srno="1" readonly  /></td>
                    <td><input type="text" name="hours[]" id="hours1" data-srno="1"  /></td>
                    <td><input type="text" name="total[]" id="total1" data-srno="1" readonly  /></td>
                    <td></td>
</tr>

CodePudding user response：

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" ></td> -->
  <td>
    <select name="services[]" id="services1" onchange="updateValues()" >
      <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  /></td>
  <td><input type="text" name="prices[]" id="prices1" data-srno="1" readonly  /></td>
  <td><input type="text" name="hours[]" id="hours1" data-srno="1"  /></td>
  <td><input type="text" name="total[]" id="total1" data-srno="1" readonly  /></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/

CodePudding user response：

have you tried this?

function myFunction(value){
  if(value == 1){
    document.getElementById('descriptions1').value = 'Descriptions';
  }
  if(value == 2){
    document.getElementById('prices1').value = 'Prices';
  }
}

<!-- added onchange function in select element -->
<tr id="sr_no_1">
  <td><span id="sr_no">1</span></td>
  <td>
    <select name="services[]" id="services1"  onchange="myFunction(this.value)">
      <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  /></td>
  <td><input type="text" name="prices[]" id="prices1" data-srno="1" readonly  /></td>
  <td><input type="text" name="hours[]" id="hours1" data-srno="1"  /></td>
  <td><input type="text" name="total[]" id="total1" data-srno="1" readonly  /></td>
  <td></td>
</tr>