Javascript how to set a Max and Min value

Question

I need to be able to set a max and min for my quantity field on my forum that uses javascript. iv tried adding max and min value and iv looked a tutorials online but they dont seem to work for me (unless im doing it wrong which is highly possible since im new to javascript)

My HTML/Form code:

<form action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php?   ref=product" method="get">
   Game Of Thrones Season 1
   <input type = "hidden" name = "id" value = "M01" />
   <br>
  <select name="option">
  <option value="HD">HD</option>
  <option value="Full HD">Full HD</option>
  <option value="Blu-ray">Blu-ray</option>
</select>
<div class="widthc">
   <button id="minus">−</button>
<input type="number" name="qty" value="0" id="qty"/>
<button id="plus">+</button>

    <button class="button" type="submit">Submit</button>
   </form>

My Javascript code:

 <script>
 const minusButton = document.getElementById('minus');
 const plusButton = document.getElementById('plus');
 const inputField = document.getElementById('qty');

 minusButton.addEventListener('click', event => {
   event.preventDefault();
 const currentValue = Number(inputField.value) >> 0;
   inputField.value = currentValue - 1;
 });

 plusButton.addEventListener('click', event =>  {
   event.preventDefault();
   const currentValue = Number(inputField.value) >> 0;
   inputField.value = currentValue + 1;
 });
 </script>

`var x = document.getElementById("myNumber").max; var y = document.getElementById("myNumber").min;` — Eric, Sep 05 '18 at 02:17
Possible duplicate of [How can I limit possible inputs in a HTML5 "number" element?](https://stackoverflow.com/questions/8354975/how-can-i-limit-possible-inputs-in-a-html5-number-element) — , Sep 05 '18 at 02:51

score 0 · Answer 1 · answered Sep 05 '18 at 02:23

0

Get the maximum value allowed for a number field:

var x = document.getElementById("myNumber").max;

Change the maximum value:

document.getElementById("myNumber").max = "10";

answered Sep 05 '18 at 02:23

Eric

336
4
17

score 0 · Answer 2 · answered Sep 05 '18 at 02:26

I added an if for each EventListener function

const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const inputField = document.getElementById('qty');
var currentValue = 0;

minusButton.addEventListener('click', event => {
  event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue - 1;
  if (currentValue < 0) {
    inputField.value = 0;
  } else {
    inputField.value = currentValue;
  }
});

plusButton.addEventListener('click', event => {
  event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue + 1;
  if (currentValue > 10) {
    inputField.value = 10;
  } else {
    inputField.value = currentValue;
  }
});

Game Of Thrones Season 1
<input type="hidden" name="id" value="M01" />
<br>
<select name="option">
  <option value="HD">HD</option>
  <option value="Full HD">Full HD</option>
  <option value="Blu-ray">Blu-ray</option>
</select>
<div class="widthc">
  <button id="minus">−</button>
  <input type="number" name="qty" value="0" id="qty" />
  <button id="plus">+</button>

  <button class="button" type="submit">Submit</button>

score 0 · Answer 3 · answered Sep 05 '18 at 02:29

You can set the min and max to input field and check in your javascript code.

const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const inputField = document.getElementById('qty');
var currentValue = 0;

minusButton.addEventListener('click', event => {
  event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue - 1;
  if (currentValue < inputField.min) {
    inputField.value = inputField.min;
  } else {
    inputField.value = currentValue;
  }
});

plusButton.addEventListener('click', event => {
  event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue + 1;
  if (currentValue > inputField.max) {
    inputField.value = inputField.max;
  } else {
    inputField.value = currentValue;
  }
});

<form action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php?   ref=product" method="get">
Game Of Thrones Season 1
  <input type = "hidden" name = "id" value = "M01" />
  <br>
  <select name="option">
  <option value="HD">HD</option>
  <option value="Full HD">Full HD</option>
  <option value="Blu-ray">Blu-ray</option>
  </select>
  <div class="widthc">
  <button id="minus">−</button>
  <input type="number" name="qty" value="0" id="qty" min="0" max="10" />
  <button id="plus">+</button>
  <button class="button" type="submit">Submit</button>
</form>

Javascript how to set a Max and Min value

3 Answers3