Automatically change html dropdown selection based on values entered in inputs

Question

I have a form where the user enters the parcel dimensions into 3 input fields (length,width,height) and then selects the parcel name from the dropdown selection.

The function I am trying to implement is when the user enters his values into the inputs the function automatically selects the parcel name from the dropdown based on his values when the user clicks the calculate button.

I would like the script to work out the result based on the option datasets not by manually setting the results/values in the javascript as I have more datasets which get changed regularly.

The code I have added always only selects the last option, I tried using a for loop but I could not get that to change the end result.

function calculate(clicked_id) {

  Array.from(document.querySelector("#dropdown").options).forEach(function(option_element) {

      var option_text = option_element.text;
      var option_value = option_element.value;
      var option_dataset_length = option_element.dataset.length;
      var option_dataset_width = option_element.dataset.width;
      var option_dataset_height = option_element.dataset.height;
      var is_option_selected = option_element.selected;

      var length = document.getElementById("length").value;
      var width = document.getElementById("width").value;
      var height = document.getElementById("height").value;

        if (length <= option_dataset_length && width <= option_dataset_width && height <= option_dataset_height) {
          document.getElementById("dropdown").value = option_value;
        } 
    }
  )
}

<!-- inputs -->
<div class="row">
<input type="text" id="length" placeholder="length">
<input type="text" id="width" placeholder="width">
<input type="text" id="height" placeholder="height">
</div>

<br>

<!-- dropdown -->
<div class="row">
<select id="dropdown">
    <option value="1" data-length="10" data-width="15" data-height="20">Small Parcel</option>
    <option value="2" data-length="20" data-width="25" data-height="30">Medium Parcel</option>
    <option value="3" data-length="30" data-width="35" data-height="40">Large Parcel</option> 
</select>
</div>

<br>

<!-- button -->
<div class="row">
<button type="button" onClick="calculate(this.id)">Calculate</button>
</div>

I have created a jsfiddle here which shows the result I would like to achieve.

The issue I have is if a option was to change for example data-width="10" to data-width="15" on the small parcel, I would have to manually edit the javascript code each time rather than read the data from the html dropdown dataset which is loaded from my database using php.

It's not clear how you want to implement the logic: you're looping through all your options, so you can potentially overwrite each option's choice after each iteration. I suppose you want to always use the largest size based on the criteria? i.e. if a parcel matches small on length but medium on the width and height, you'd want to categorise it as a medium parcel? — Terry
– Terry, Commented Jan 16, 2022 at 17:51
I wonder if you need select the value based on the option. If so, there's an example here: stackoverflow.com/questions/37538217/… — Mari
– Mari, Commented Jan 16, 2022 at 17:59
Here are some examples which may make it easier to understand what I am trying to acheive. If i entered 5, 5, 5 in all 3 inputs the dropdown would select small parcel. 20, 25, 30 = medium parcel, 30,30,30 = large parcel. — user16881755
– user16881755, Commented Jan 16, 2022 at 18:42
I believe what you want is a bit more complex than it seems. Will all inputs have exactly the same value? For example: what if the inputs have different values, like: 5, 26, 35? If so, how would you like to do this calculation? An average between all the numbers? So first you must do a calculation that returns an average, and then, fit them into one of the options. Second thing to consider: you said "20, 25, 30 = medium parcel. 30,30,30 = large parcel". Does the number 30 can be fit in medium and large parcel at the same time? Shouldn't be "10-19: small parcel. 20-29, medium. 30 -40 large"? — Mari
– Mari, Commented Jan 17, 2022 at 14:33

Sercan · Accepted Answer · 2022-01-16 18:45:04Z

1

If the smaller value is accepted, define a control variable so that the value is not changed. Using this logic, you can include other properties in the program.

let dropdown = document.querySelector("#dropdown")

function calculate() 
{
  let control = false;
  
  Array.from(dropdown.options).forEach( function(option_element) {  
      var option_text = option_element.text;
      var option_value = option_element.value;
      var option_dataset_length = option_element.dataset.length;
      
      var length = document.getElementById("length").value;

      if ((length <= option_dataset_length) && (control == false) ) 
      {
        document.getElementById("dropdown").value = option_value;
        control = true;
      }
      console.log(`${length} ${length.length} ${option_dataset_length} ${control}`);
    });
}

<div class="row">
  <input type="text" id="length" placeholder="length">
  <input type="text" id="width" placeholder="width">
  <input type="text" id="height" placeholder="height">
</div><br>

<div class="row">
    <select id="dropdown">
        <option value="1" data-length="10" data-width="15" data-height="20">Small Parcel</option>
        <option value="2" data-length="20" data-width="25" data-height="30">Medium Parcel</option>
        <option value="3" data-length="30" data-width="35" data-height="40">Large Parcel</option> 
    </select>
</div><br>

<div class="row">
  <button type="button" onClick="calculate()">Calculate</button>
</div>

edited Jan 16, 2022 at 18:45

answered Jan 16, 2022 at 18:12

Sercan

5,1433 gold badges23 silver badges42 bronze badges

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

1 Comment

Sercan Over a year ago

@user16881755 I explained the cause of the problem. The topic you are asking now (the logic of the program) is the subject of another question. You should not ask more than one subject in one question.

Collectives™ on Stack Overflow

Automatically change html dropdown selection based on values entered in inputs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related