vlookup-like javascript to map input value from one field to another

Question

I am just starting html/javascript, and attempting to create a simple form that populates a specific "Customer Code" when a "Customer Name" is selected from an input list (behaving like an excel vlookup). The examples I found on stackoverflow all resulted in alert windows, but I would like the value to populate in the form.

Here's my html snippet for the Customer Name dropdown list:

<select id="customername">
<option></option>
<option>Doe Inc</option>
<option> Smith LLC </option>
<option> Rogers and Co </option>

Here's the customername to customercode mapping: Doe Inc = 276. Smith LLC = 852. Rogers and Co = 552.

I would like the customercode to update to the respective customername whenever the customername is updated (without the need for a button), as this is part of a larger form that will an Submit button (in other words, I don't want users to have to click "Submit" to retrieve the customercode, then "Submit" again later in the form).

Thanks!

Is customercode supposed to be a visible input, or is it a hidden field? — Tieson T., Jul 15 '18 at 22:35

Luay · Answer 1 · 2018-07-15T22:58:44.260

1

I hope this is what you were looking for. Basically, I used an array to format your numbers, then used the onchange onto the select element and waited for a change. When a change occurs, I fire an event and Javascript gets the values of the field, compares them with the array and returns based on the selected value.

Please refer to Tieson T. Reply, has way more explanations and different approaches for static html!

var drop_down = document.getElementById("customername");
var result = document.getElementById("result");
var list_array = {
  "": "Please Select A Value",
  "Doe Inc": 276,
  "Smith LLC": 852,
  "Rogers and Co": 552
}

function change_value() {
  if (list_array[drop_down.value]) {
    result.innerHTML = list_array[drop_down.value];
  }
}

<select id="customername" onchange="change_value()">
  <option></option>
  <option>Doe Inc</option>
  <option>Smith LLC</option>
  <option>Rogers and Co</option>
</select>
  
<span id="result"></span>

edited Jul 15 '18 at 22:58

answered Jul 15 '18 at 22:48

Luay

789
4
15

Probably should update `change_value` to clear `result` if `list_array[drop_down.value]` is falsey, to handle the "blank" option. +1 anyway. – Tieson T. Jul 15 '18 at 22:56
Good sir! I literally just updated it haha! Thanks for the correction, also great explanation on your post. – Luay Jul 15 '18 at 22:57
I don't think that note you just added is really necessary. Your version is perfectly valid. – Tieson T. Jul 15 '18 at 22:59
Comparing the amount of details you wrote, for a beginner, your reply is worth 10x more the effort than reading mine. I even learned something from your post as a novice programmer. Thank you! – Luay Jul 15 '18 at 23:01
thanks so much! i'm going to use the method described by Tieson T in this thread, but will use this method for a different question I had – michaelscarn Jul 16 '18 at 12:59

score 1 · Accepted Answer · answered Jul 15 '18 at 22:51

In order to be included in a form submission, your form controls need to successful controls, which at the simplest means they need a name="" value:

<select id="customername" name="customername">
    <option></option>
    <option>Doe Inc</option>
    <option> Smith LLC </option>
    <option> Rogers and Co </option>
</select>

If what you actually care about submitting is the customercode, and the customername is just the "friendly" version, add the value attribute to your options, and rename the select appropriately:

<select id="customercode" name="customercode">
    <option value="">Select one...</option>
    <option value="276">Doe Inc</option>
    <option value="852">Smith LLC </option>
    <option value="552">Rogers and Co </option>
</select>

If you want both "values" to be visible on the form and included in the form submission, you could use a data- attribute to sync a readonly input:

<select id="customername" name="customername">
    <option data-value="">Select one...</option>
    <option data-value="276">Doe Inc</option>
    <option data-value="852">Smith LLC </option>
    <option data-value="552">Rogers and Co </option>
</select>

<input type="text" name="customercode" id="customercode" readonly />

Then use some JavaScript to sync them:

var select = document.getElementById('customername');
select.onchange = function(e) {
  var value = select.options[select.selectedIndex].dataset.value;

  var input = document.getElementById('customercode');
  input.value = value;
}

Example jsFiddle: https://jsfiddle.net/27jx0q3a/3/

Some links, to help:

vlookup-like javascript to map input value from one field to another

2 Answers2

Please refer to Tieson T. Reply, has way more explanations and different approaches for static html!