JavaScript code that functions similarly to VLOOKUP, allowing you to map input values from one field to

Question

JavaScript code that functions similarly to VLOOKUP, allowing you to map input values from one field to

As a beginner in HTML and JavaScript, I am trying to create a simple form that automatically populates a specific "Customer Code" when a "Customer Name" is selected from a dropdown list (similar to an Excel VLOOKUP). However, the examples I found on Stack Overflow all displayed alert windows, whereas I want the value to populate directly in the form.

Below is the snippet of my HTML code 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 is the mapping between customer names and codes: Doe Inc = 276. Smith LLC = 852. Rogers and Co = 552.

I am seeking a way for the customer code to update automatically when the customer name is changed without requiring a separate button click. This is important as it is part of a larger form that will have a Submit button at the end, eliminating the need for users to click "Submit" twice – once for retrieving the customer code and again later in the form.

Thank you!

javascript html forms quickbase

Answer 1

Answer №1

For your form controls to be included in a form submission, they must be successful controls, which simply means they must have 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 you want to submit the customer code but display the customer name on the form as well, add the value attribute to your options and rename the select element accordingly:

<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 wish to have both values visible on the form and submitted with the form, you can use a data- attribute to synchronize with a read-only 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 />

To synchronize them, you can use some JavaScript:

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

Check out this example jsFiddle: https://jsfiddle.net/27jx0q3a/3/

Here are some helpful links:

Answer 2

For your form controls to be included in a form submission, they must be successful controls, which simply means they must have 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 you want to submit the customer code but display the customer name on the form as well, add the value attribute to your options and rename the select element accordingly:

<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 wish to have both values visible on the form and submitted with the form, you can use a data- attribute to synchronize with a read-only 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 />

To synchronize them, you can use some JavaScript:

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

Check out this example jsFiddle: https://jsfiddle.net/27jx0q3a/3/

Here are some helpful links:

Answer 3

Answer №2

I have customized the solution to meet your needs. I utilized an array to structure the numbers, implemented the onchange function on the select element, and waited for any changes. Once a change is detected, I trigger an event and use Javascript to fetch the field values, compare them with the array, and return the result based on the selected value.

For more detailed explanations and alternative methods for static html, please check out Tieson T.'s response!

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>

Answer 4

I have customized the solution to meet your needs. I utilized an array to structure the numbers, implemented the onchange function on the select element, and waited for any changes. Once a change is detected, I trigger an event and use Javascript to fetch the field values, compare them with the array, and return the result based on the selected value.

For more detailed explanations and alternative methods for static html, please check out Tieson T.'s response!

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>

JavaScript code that functions similarly to VLOOKUP, allowing you to map input values from one field to

Answer №1

Answer №2

For more detailed explanations and alternative methods for static html, please check out Tieson T.'s response!

Similar questions

Each block in Svelte includes a unique shorthand attribute

What are the drawbacks of relying on a dependent dependency in software development?

A tool that showcases outcomes determined by the interaction of two variables

"Enhancing Forms with Multiple Event Listeners for Seamless Sub

Access SCSS variable values in Angular HTML or TypeScript files

Monitor the traffic on my website by implementing .htaccess restrictions

Tips for retrieving the most recent number dynamically in a separate component without needing to refresh the page

Troubleshooting problems with displaying views due to asynchronous $http.get calls in AngularJS

Performing function in Vue.js when a change occurs

execute php function when form is submitted

Mistakenly appearing at the top of the window instead of the bottom of the window

Exploring the functionality of window.matchmedia in React while incorporating Typescript

Using Axios to Integrate an API - Displaying a Username and Password Pop-up

Submitting Multi-part forms using JQuery/Ajax and Spring Rest API

Anticipating the execution of pool.query within a callback function in the Express framework

Ways to test the initial launch of an Android application using Cordova

Using PHP to generate a table populated with generic elements from an array

Matter of Representing Nested For Loops in Javascript Arrays

Is the `visibility: hidden` property not functioning as expected?

Vue is removing a DOM node during the created lifecycle hook to set up a component