Why I cant call function onChange of input? HTML/jQuery

Question

I have two input fields and I want to reflect the value of the first input as a minimum value of the second one but it is not calling the function which I built for that reason:

var quantity_gates = document.getElementById('quantity_gates');
var quantity_spots = document.getElementById('quantity_spots');

function count_spots() {
  var quantity_spots_n = quantity_spots.value;
  var quantity_gates_n = quantity_gates.value;
  quantity_gates_n = Number(quantity_gates_n);
  quantity_spots_n = Number(quantity_spots_n);

  quantity_spots_n = Math.min(quantity_gates_n, Math.max(1, quantity_gates_n));
}

<input type="number" onChange="count_spots()" id="quantity_gates" value="1" name="quantity_parking_gates" min="1" max="9999">
<input type="number" id="quantity_spots" value="1" name="quantity_parking_spots" min="1" max="9999">

You need to set the value property of the field, not the quantity_spots_n variable. Also check that your JS code runs after the DOM has loaded. Put it before </body> or wrap it in a DOMContentLoaded event handler. Also note that 'ajax', 'jquery' and 'html' are not relevant to the problem so I removed the tags — Rory McCrossan
– Rory McCrossan, Commented Jul 29, 2020 at 10:05
@RoryMcCrossan thanks rory I tried placing it right before </body> but doesn't work. — showtime
– showtime, Commented Jul 29, 2020 at 10:07
@RoryMcCrossan sorry it does call it now but it is not changing the value. — showtime
– showtime, Commented Jul 29, 2020 at 10:09

Rory McCrossan · Accepted Answer · 2020-07-29 10:21:28Z

1

Firstly use unobtrusive event handlers instead of onX attributes. The latter are outdated and no longer good practice. You can also use the input event to have the UI be more responsive to user input. In addition you can use the unary operator as a shorthand for the Number() function, and || to default the value to 1.

To solve your issue you need to set the value property of the second field directly as it holds a string value, not a reference to the value property. Also, use Math.max() to set the second field to the higher of the two values.

var quantity_gates = document.getElementById('quantity_gates');
var quantity_spots = document.getElementById('quantity_spots');

quantity_gates.addEventListener('input', function() {
  quantity_spots.min = this.value;
  quantity_spots.value = Math.max(this.value, +quantity_spots.value || 1);
});

quantity_spots.addEventListener('change', function() {
  this.value = Math.max(+this.value, +this.min);
});

<input type="number" id="quantity_gates" value="1" name="quantity_parking_gates" min="1" max="9999">
<input type="number" id="quantity_spots" value="1" name="quantity_parking_spots" min="1" max="9999">

edited Jul 29, 2020 at 10:21

answered Jul 29, 2020 at 10:12

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

showtime Over a year ago

AMAZING, Thanks! How can I actually block user from decreasing the second number afterwards?

Rory McCrossan Over a year ago

Set the min on the field to match the other's value. You would also need a change event handler to set the value equal to the min if the user manually typed a lower value. I've updated the example in the answer.

Le-Mr-Ruyk · Accepted Answer · 2020-07-29 10:14:17Z

1

You need to asign the min in the second field : by adding in the end of your function

quantity_spots.value=quantity_spots_n; // to assign value
quantity_spots.min=quantity_spots_n; // to prevent user from decrasing the value

answered Jul 29, 2020 at 10:14

Le-Mr-Ruyk

1792 silver badges17 bronze badges

Comments

MaximilianK · Accepted Answer · 2020-07-29 10:16:30Z

1

var quantity_gates = document.getElementById('quantity_gates');
var quantity_spots = document.getElementById('quantity_spots');

function count_spots() {
  var quantity_spots_n = quantity_spots.value;
  var quantity_gates_n = quantity_gates.value;
  quantity_gates_n = Number(quantity_gates_n);
  quantity_spots_n = Number(quantity_spots_n);

  quantity_spots_n = Math.min(quantity_gates_n, Math.max(1, quantity_gates_n));
  quantity_spots.min= quantity_spots_n //Sets the new minimum
  quantity_spots.value= quantity_spots_n //Sets the value 
}

<input type="number" onChange="count_spots()" id="quantity_gates" value="1" name="quantity_parking_gates" min="1" max="9999">
<input type="number" id="quantity_spots" value="1" name="quantity_parking_spots" min="1" max="9999">

answered Jul 29, 2020 at 10:16

MaximilianK

631 silver badge3 bronze badges

1 Comment

showtime Over a year ago

thanks. I can still input a lower number but it works with the arrows so I cant decrease it.

Collectives™ on Stack Overflow

Why I cant call function onChange of input? HTML/jQuery

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related