JavaScript OnChange select value into input field

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

You don't need AJAX and you don't need jQuery. Please look up how to get and set the value of an HTML input, then you can easily write your function. Also, you have a bug in your code - you never close the <option> tag. — raduation
– raduation, Commented Dec 15, 2015 at 8:34

Rayon · Accepted Answer · 2015-12-15 08:38:31Z

3

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='[email protected]' data-name='abc1 xyz' value='test'>test1</option>

        <option data-email='[email protected]' 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

answered Dec 15, 2015 at 8:38

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ThisIsNotArmand Over a year ago

Much thanks. your answer combined with Arun P's answer was the solution for me getting how to do this!

Arun P Johny · Accepted Answer · 2015-12-15 08:39:01Z

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

answered Dec 15, 2015 at 8:39

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

ThisIsNotArmand Over a year ago

This is what I needed, so much thanks, you helped me out. I combined your answer Rayon's answer to make it clear to me how this works

Collectives™ on Stack Overflow

JavaScript OnChange select value into input field

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related