JavaScript OnChange选择值进入输入字段

Question

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 select field is changed, it has to put the clients name and e-mail in the correct input fields. I have tried some ways, but haven't found the right one yet.

Here's my code:

    <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'];
            echo"<option 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>

Much thanks in advance

Answer 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

Answer 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;
});