Select data attributes and add them in input elements in plain js

Question

I am trying to create a simple User Information form. In my form i have a select element with four options inside it. The options have four data attributes with some information for the users. Below my select i have four input types that will represent one of the data attribute that i have on my select. What I would like to happen is when i select each of the user to get the data attributes and fill in the input elements. Anyone know how can I achieve that? I would like it in plain JS. I have tried using onchange event but no luck. Can someone provide me with the JS code? I will add many users so if someone can help me with the code using (this) instead of selecting users with id i would appreciate it.

Thanks.

HTML:

<form id="usersInfo" action="#" method="post" onsubmit="return false">

        <label>User Information</label>
        <select id="firstSelect" onchange="usersFunction()">
            <option value="10" data-name="Name One" data-surname="Surname One" data-email="Email One" data-country="Country One">User One</option>
            <option value="20" data-name="Name Two" data-surname="Surname Two" data-email="Email Two" data-country="Country Two">User Two</option>
            <option value="30" data-name="Name Three" data-surname="Surname Three" data-email="Email Three" data-country="Country Three">User Three</option>
            <option value="40" data-name="Name Four" data-surname="Surname Four" data-email="Email Four" data-country="Country Four">User Four</option>
        </select>

        <input type="text" id="userName" placeholder="User Name">
        <input type="text" id="userSurname" placeholder="User Surname">
        <input type="text" id="userEmail" placeholder="User Email">
        <input type="text" id="userCountry" placeholder="User Country">

    </form>

Javascript

function usersFunction() {
    var x = document.querySelector("#firstSelect");

    var dataName = x.getAttribute("data-name");
    var dataSurname = x.getAttribute("data-surname");
    var dataEmail = x.getAttribute("data-email");
    var dataCountry = x.getAttribute("data-country");

    var userName = document.querySelector("#userName");
    var userSurname = document.querySelector("#userSurname");
    var userEmail = document.querySelector("#userEmail");
    var userCountry = document.querySelector("#userCountry");

    userName.value = dataName;
    userSurname.value = dataSurname;
    userEmail.value = dataEmail;
    userCountry.value = dataCountry;

}

@T.J Crowder ok i have edited my question and i have also included my JS code. — pro78
– pro78, Commented Dec 31, 2016 at 12:57

T.J. Crowder · Accepted Answer · 2016-12-31 13:03:26Z

The problem is that you're trying to read the data-* attributes from the select element, but they're on the option element. You need to find the option element and then read the data-* attributes from there. You're doing everything else right, though there's a tweak I'd suggest which I'll describe below.

To find the selected option, get the options within the select and then look for the one whose selected property is true:

var options = document.querySelectorAll("#firstSelect option");
var selected;
var n;
for (n = 0; !selected && n < options.length; ++n) {
    if (options[n].selected) {
        selected = options[n];
    }
}
if (!selected) {
    return; // None selected -- or you might choose to use the first one in this case
}
var dataName = selected.getAttribute("data-name");
var dataSurname = selected.getAttribute("data-surname");
var dataEmail = selected.getAttribute("data-email");
var dataCountry = selected.getAttribute("data-country");

Live example:

function usersFunction() {
  var options = document.querySelectorAll("#firstSelect option");
  var selected;
  var n;
  for (n = 0; !selected && n < options.length; ++n) {
    if (options[n].selected) {
      selected = options[n];
    }
  }
  if (!selected) {
    return; // None selected -- or you might choose to use the first one in this case
  }
  var dataName = selected.getAttribute("data-name");
  var dataSurname = selected.getAttribute("data-surname");
  var dataEmail = selected.getAttribute("data-email");
  var dataCountry = selected.getAttribute("data-country");

  var userName = document.querySelector("#userName");
  var userSurname = document.querySelector("#userSurname");
  var userEmail = document.querySelector("#userEmail");
  var userCountry = document.querySelector("#userCountry");

  userName.value = dataName;
  userSurname.value = dataSurname;
  userEmail.value = dataEmail;
  userCountry.value = dataCountry;

}

<form id="usersInfo" action="#" method="post" onsubmit="return false">

  <label>User Information</label>
  <select id="firstSelect" onchange="usersFunction()">
    <option value="10" data-name="Name One" data-surname="Surname One" data-email="Email One" data-country="Country One">User One</option>
    <option value="20" data-name="Name Two" data-surname="Surname Two" data-email="Email Two" data-country="Country Two">User Two</option>
    <option value="30" data-name="Name Three" data-surname="Surname Three" data-email="Email Three" data-country="Country Three">User Three</option>
    <option value="40" data-name="Name Four" data-surname="Surname Four" data-email="Email Four" data-country="Country Four">User Four</option>
  </select>

  <input type="text" id="userName" placeholder="User Name">
  <input type="text" id="userSurname" placeholder="User Surname">
  <input type="text" id="userEmail" placeholder="User Email">
  <input type="text" id="userCountry" placeholder="User Country">

</form>

Note that since a drop-down select with no initially-selected option is shown as though the first option is selected, you might want to default to the first option if you don't find any by replacing that if with the comment above with:

selected = selected || option[0];

And if you did that, you might run the function on page load so that the first option's information is automatically filled in the fields.

Side note: When you're just looking something up by its ID, you can use document.getElementById("id") rather that document.querySelector("#id").

Collectives™ on Stack Overflow

Select data attributes and add them in input elements in plain js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related