CODEWITHSUNDEEP
javascripthtml
user16881755
user16881755

Reputation: 51

Automatically change html dropdown selection based on values entered in inputs

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.

Upvotes: 0

Views: 570

Answers (1)

Sercan
Sercan

Reputation: 5091

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>

Upvotes: 1

Related Questions