JavaScript OnChange Select Value Into Input Field

I have a form in my code that has some input fields and a select field. The select field is populated by a table in a db, which also contains a clients name and e-mail. When the se

Solution 1:

Keep email and name of the client in data-* attributes so that you can retrieve those values on onchange event.

getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string)

Try this:

function updateinput(e) {
  var selectedOption = e.options[e.selectedIndex];
  document.getElementById('namecontact').value = selectedOption.getAttribute('data-name');
  document.getElementById('email').value = selectedOption.getAttribute('data-email');

}

<table>
  <tr>
    <td>Company</td>
    <td>
      <select id="namelist" name="namelist" onchange="updateinput(this)">
        <option>Select data</option>
        <option data-email='abc1@abc.com' data-name='abc1 xyz' value='test'>test1</option>

        <option data-email='abc2@abc.com' data-name='abc2 xyz' value='test'>test2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Name of contact</td>
    <td>
      <input required id="namecontact" name="namecontact" type="text" placeholder="Client name">
    </td>
  </tr>
  <tr>
    <td>E-Mail contactpersoon</td>
    <td>
      <input required id="email" name="email" type="text" placeholder="E-Mail">
    </td>
  </tr>
</table>

Fiddle here

Solution 2:

First, you can store the email value using a data-email attribute in the option element, assuming the name is the text in the option then

<table>
    <tr><td>Company</td><td>
    <select id="namelist" name="namelist" onchange="updateinput()">
    <?php 
    $result = mysqli_query($con, "SELECT * FROM clients ORDER BY ID");
    while($row1 = mysqli_fetch_array($result))
    {
        $value = $row1['Value'];
        $name = $row1['Name'];
        $email = $row1['Email'];
        echo"<option data-email='' value='$value'>$name<br>"; } ?>
    </select></td></tr>
    <tr><td>Name of contact</td><td>
    <input required id="namecontact" name="namecontact" type="text" placeholder="Client name"></td></tr>
    <tr><td>E-Mail contactpersoon</td><td>
    <input required id="email" name="email" type="text" placeholder="E-Mail"></td></tr>
</table>

then you can have a change event handler for the select

var namelist = document.getElementById('namelist');
namelist.addEventListener('change', function() {
  var option = namelist.options[namelist.selectedIndex];
  document.getElementById('namecontact').value = option.value;
  document.getElementById('email').value = option.dataset.email;
});