html number input box change according to the following unit labels

Question

I have an HTML number input and follows a selection for unit types.

The unit types options are meter (m) and millimeter (mm) for example.

There are limits for the number input, min is 1 meter and max is 10 meters. So if the unit is changed to mm, the min is 1000 mm and the max is 10000 mm.

There are two questions:

If I switch the unit, how can I change the input box's max/min limit accordingly?
If there is an input value in the box already, say 1 m. I switch to the unit of mm (or inches), how to change the values of the input box to 1000 mm (or 39.37 inches) accordingly?

Thanks,

user_14722562 · Answer

It seems you are close, but you need to react to the select option being changed rather than the input field being changed.

When the select option is changed, you just need to set the min/max according to the selected option -- and, then just convert the unit as needed.

I've also moved this logic into a function called update, rather than trying to fit it inline -- which is really hard to read and debug if its more than a simple statement or two.

Consider this working snippet:

function update(elem) {
  const input = document.getElementById('foo');
  if (elem.value === '1000') {
    input.setAttribute('min', '1');
    input.setAttribute('max', '10');
    input.value /= 1000;
  } else {
    input.setAttribute('min', '1000');
    input.setAttribute('max', '10000');
    input.value *= 1000;
  }
}

Edit:

If there are more units involved, then you can generalize the above easily. You just need to keep track of the previous unit so you can do the conversion correctly when the unit is changed. That's what the previous variable does here - it updates every time the selected option is changed. The rest follows in the same way, except there is an extra case (for inches).

// initial unit is m (1000 mm)
let previous = '1000';

const min = 1000;  // in mm
const max = 10000;  // in mm

function update(elem) {

  // get value of input field in the current unit
  const input = document.getElementById('foo');

  // update the min/max according to the selected unit
  input.setAttribute('min', Math.floor(min / elem.value));
  input.setAttribute('max', Math.floor(max / elem.value));

  // convert value in input field to new unit
  input.value = input.value * previous / elem.value;

  // save unit for subsequent conversion
  previous = elem.value;
}

user_13932854 · Answer

var foo = document.getElementById("foo")
function changeVal(self){
  if(Number(self.value)Number(self.max))self.value=self.max;
}
function changeUnit(unitStep){              
  foo.value = foo.value * unitStep;
  foo.min = foo.min * unitStep;
  foo.max = foo.max * unitStep;
}

Admin · Answer

Just add an onchange event in the

user_14894918 · Answer

const option = document.getElementById('foo-unit');
const inputEl = document.getElementById('foo');


option.addEventListener('change', function() {
  if(option.value === 'mm') {
    var inputValue = inputEl.value;
    inputEl.value = inputValue * 1000;

    inputEl.setAttribute('min', '1000');
    inputEl.setAttribute('max', '10000');
  } else {
    var inputValue = inputEl.value;
    inputEl.value = inputValue / 1000;

    inputEl.setAttribute('min', '1');
    inputEl.setAttribute('max', '10'); 
  }
})

This is a simple solution using JS, but this code can be optimized, it's just written explicitly to give you an idea. While entering the number directly in the input box, it can take values beyond limits but when you submit the form, an error will be shown. That can be modified by adding some more code to show the error instantly.

user_10998971 · Answer

Try below code, you can add option to select for new unit.

function changeUnit(){
      var input = document.getElementById("input");
      var unitSelect = document.getElementById("unitSelect");

      var currentConvert = Number.parseFloat(document.querySelector("option[value="+input.getAttribute("unit")+"]").getAttribute("convert"));

      var newUnit = document.querySelector("option[value="+ unitSelect.value +"]");
      
      var newConvert = Number.parseFloat(newUnit.getAttribute("convert"));

      var currentValue = Number.parseFloat(input.value);

      // Convert to new unit
      var newValue = currentValue*(currentConvert/newConvert);

      // Set new value, unit, min and max to input 
      input.value = Number.parseFloat(newValue);
      input.setAttribute('unit', newUnit.value);
      input.setAttribute('min', newUnit.getAttribute('min'));
      input.setAttribute('max', newUnit.getAttribute('max'));
    }

html number input box change according to the following unit labels

5 Answers