CODEWITHSUNDEEP
javascripthtmldominput
user4826496
user4826496

Reputation:

How to change Uptick Increments in HTML Number Input

I have a number input form:

<input type='number' id='select-number'>Pick A number

I have the following questions:

1: The default uptick increment is 1 (when you click the up arrow on the number input, it goes up by a value of one per click.) How can I change that? I want it to go up in values of 0.1 (tenths). How do I do that?

2: Secondly, I have two variables: 

feet=true;
meters=false;

One will always be true, and the other false. How do I change the "max" attribute (using Javascript) based on which of these two variables is true? The two variables come from code something like this:

<input type='radio' id='feet' name='unit_of_measurement'>Feet
<input type='radio' id='meters' name='unit_of_measurement'>Meters
<script>
feet=document.getElementById('feet').checked;
meters=document.getElementById('meters').checked;
</script>

If the variable "feet" is true, then the maximum value of the input (Id='select-number') needs to be 3. If it is meters, it needs to be 8.

How can I do that(^), and how can I change the uptick increment? Thanks for any help.

NOTE: Vanilla Javascript only, Please

Upvotes: 2

Views: 1172

Answers (2)

depperm
depperm

Reputation: 10746

1) To change the step of an input simply use step=".1" inside the input tag.

2) To change the max on radio change add a onchange="change()" which sets the max and/or step based on which is checked

html

<input type='radio' id='feet' name='unit_of_measurement' onchange="change()" checked>Feet
<input type='radio' id='meters' name='unit_of_measurement' onchange="change()">Meters

js

function change() {
  feet = document.getElementById('feet').checked;
  meters = document.getElementById('meters').checked;
  selectNumber = document.getElementById('select-number');
  if (feet) {
      selectNumber.max = 300;
      selectNumber.step = 1;
  } else {
      selectNumber.max = 100;
      selectNumber.step = .3;
  }
};

fiddle or fiddle 2

Upvotes: 2

vinayakj
vinayakj

Reputation: 5681

The default uptick increment can be modified by using step attribute 

<input type="number" name="quantity" step="0.1">

and any property can be accessed (set and get) by getting handle of DOM element.

oldValue = document.getElementById('#<id>').propertyName;  //get
document.getElementById('#<id>').propertyName = newValue;  //set

Upvotes: 0

Related Questions