Using values from a Datalist to populate a input field

Question

I am trying to populate an input field based off of a datalist selection. So if a person chooses the name jimmy.johns , the input field should populate with 5555555555 . Here's my code.

 <html> <head> <title>Countdown</title> <input name="customer" list="customer" /> <datalist id="customer"> </datalist> <br> <br> <input id = "phone" name ="phone" type = "text" placeholder = "Phone Number" value = ""/> <script type="text/javascript"> var customer = ['david.a.onezine', 'jimmy.a.jams', 'larry.a.beatrice', 'janet.a.jackson', 'biggie.j.smalls', 'bob.marley', 'james.a.tribeca', 'veronica.a.mars', 'kassy.b.jones', 'victoria.a.langley']; var phone = ['54658798798', '4578912356', '425367894125', '4578913246', '7894561234', '452139856427', '47895641234', '78423651405', '789456123025', '784596123459']; var arraylength = customer.length; var i; var options = ''; for(i = 0; i < arraylength; i++) options += '<option value="'+customer[i]+'" />'; document.getElementById('customer').innerHTML = options; </script> </body> </html>

I'm thinking that all one would need to do is do something like

if (options == 'david.a.onezine'){
    document.getElementById('phone').innerHTML = phone[0];
 }

However that does not work. I have read up that I may need to use a event listener on the datalist, but I haven't used many eventlisteners so would I need to attach the onChange to the 'customer' input or the 'customer' datalist?

I am stuck and have the theoretical part in my head. I understand how it should work. I just don't know how to put it into code.

So if customer[1] is selected then phone[0] should populate in the phone input field. I'm just unsure as to how to code that in javascript. Id rather code javascript than JQuery.

Answer 1

The simplest way to perform the desired effect is to use an onchange event.

 <html> <head> <title>Countdown</title> <select name="customer" id="customer" onchange="getNumber()"> </select> <br> <br> <input id = "phone" name ="phone" type = "text" placeholder = "Phone Number" value = ""/> <script type="text/javascript"> var customer = ['david.a.onezine', 'jimmy.a.jams', 'larry.a.beatrice', 'janet.a.jackson', 'biggie.j.smalls', 'bob.marley', 'james.a.tribeca', 'veronica.a.mars', 'kassy.b.jones', 'victoria.a.langley']; var phone = ['54658798798', '4578912356', '425367894125', '4578913246', '7894561234', '452139856427', '47895641234', '78423651405', '789456123025', '784596123459']; var arraylength = customer.length; var i; var options = ''; options += '<option value="defualt">Choose a Name</option>'; for(i = 0; i < arraylength; i++) options += '<option value="'+customer[i]+'">'+customer[i]+'</option>'; document.getElementById('customer').innerHTML = options.toString(); document.getElementById('customer').selectedIndex = 0; getNumber(); function getNumber(){ var index = document.getElementById('customer').selectedIndex; if(index == 0){ document.getElementById('phone').value = ""; } else { document.getElementById('phone').value = phone[index-1]; } } </script> </body> </html>

<select name="customer" id="customer" onchange="getNumber()">
</select>

<input id = "phone" name ="phone" type = "text" placeholder = "Phone Number" value = ""/>

First things first the two input boxes are setup. Notice that the first input now has an onchange event which is called anytime an input(any type) is changed. The reason the name input is now a element is because it allows us take advantage of the selectedIndex variable, but it is cleaner semantically and will only register a "change" when one of the complete values is selected.

options += '<option value="defualt">Choose a Name</option>';

This is the default option that is seen when the page loads. It prevents the problem that if the user actually wanted to select the first option 'david.a.onezine', but it would not be registered as an actual change.

function getNumber(){
    var index = document.getElementById('customer').selectedIndex;

    if(index == 0){
        document.getElementById('phone').value = "";
    } else {
        document.getElementById('phone').value = phone[index-1];
    }
  }

Here is the function that is called anytime the selection list is changed. First the selected item is retrieved via the internal variable selectedIndex . If index is equal to 0 then that means the "default" value was selected and the phone input is set to an empty string, otherwise it will be set to phone[index-1] which is the number that belongs to whatever name was selected.

Edit:

Here is a modified version of getNumber() which will work with you code.

function getNumber(){
    var customervalue = document.getElementById('customerI').value;

    var i;
    var match = false;

    for(i = 0; i < arraylength; i++){
      if(customervalue == customer[i]){
        match = true;
        break;
      }
    }

    if(match == true){
      document.getElementById('phone').value = phone[i];
    } else {
      document.getElementById('phone').value = "";
    }
  }

Please note that a datalist is more for the perpose of auto-completion and so does not actually have an index or anything, but is meant for use by an input tag. Also the input must have an ID for getNumber() to work;

Using values from a Datalist to populate a input field

Question

1 answers

solution1
1 ACCPTED 2015-05-18 19:21:49

Using values from a Datalist to populate a input field

Question

1 answers

solution1 1 ACCPTED 2015-05-18 19:21:49

solution1
1 ACCPTED 2015-05-18 19:21:49