Display number count between two input fields

JavaScript
1

I am trying to figure a way where when I input 2 IDs on a form, I want to see the count to display, perhaps in a input field below it. This way it’s a double check for me that I am not transposing numbers and getting the count right.

  <tr>
      <td width="27%" align="right">ID from:&nbsp;&nbsp;</td>
      <td width="73%"> <input type="text" name="id1" size="5"></td>
    </tr>
  
    <tr>
      <td width="27%" align="right">ID to (and including):&nbsp;&nbsp;</td>
      <td width="73%"> <input type="text" name="id2" size="5"></td>
    </tr>

Would appreciate any help.  Thanks!
1 Like
2

are the ID’s numbers? is the count just ID2 - ID1 ?

3

Good question, I should of mentioned that. Yes, all numeric.

Yes, the count will always start at ID1 with the lowest number and I tab through to ID2, the highest number and what I would like it that after I tab again, it gives me a total before I click a submit button. Purpose, sending emails based on ID’s.

Thanks

4

So… get the value of id2, subtract from it, the value of id1, and put the result into the value of your output field.

5

As you tab to the output field (before you click the submit button) don’t you need JS because you are not refreshing the page. It would be easy to do the math on the post page and in fact it does a count. I want a count before I submit it.

6

Something like this?

1 Like
7

Yes, that is just what I am looking for but when I add the script and replace your html, I can’t get it to work.

Not sure if I am missing something?

I tried adding the script to the bottom of the page and that didn’t work either.

Thanks for your help.

8

I guess you have other <input> elements on your web page and therefore querySelectorAll will need to be more specific to select these three input elements.

9

Yes, I have a subject and message input.

Obviously I only need the count on those 2 input fields with the name id1 and id2. Can I replace the word input in the QuerySelectorAll to another name and then I use that name as a class in those 2 input fields?

I am not really sure how to do that, but I am thinking it has to be something like that.

10

Give those three input elements a class and edit the querySelectorAll like this:

(Incidentally, I am aware that adding an event listener to the third input is unnecessary but it’s not worth adding more code)

1 Like
11

By adding the class, that did the job.

I appreciate your help and again thanks for your time; very much appreciated.

1 Like
12

This is not a big deal, but I wanted to know how to do the math in the subtract function for this reason:

When you take 2 numbers and subtract them from each other you are not counting the last one. For example, if I have 1 in id1 and 10 in id2, 10 - 1 = 9. But you actually have a count of 10 if you are including the last number. So I was looking for a way to do a +1 in the function to equal 10.

I know that you have > and = operators that I use with ASP or I can do a +1, etc.

Like I said, not a big deal, but is there an easy way for just adding the +1 to make the count correct when counting the last number?

Thanks

13

Just add it to the calculation:

    inputs[2].value = inputs[1].value - inputs[0].value + 1;
1 Like
14

I put it everywhere in my trials except there, which now looking at it, is obvious!

Thanks

1 Like
15

HTML:

<label for="id1">ID 1:</label>
<input type="text" id="id1" name="id1">
<br>
<label for="id2">ID 2:</label>
<input type="text" id="id2" name="id2">
<br>
<label for="count">Count:</label>
<input type="text" id="count" name="count" readonly>

JavaScript:

const id1 = document.getElementById('id1');
const id2 = document.getElementById('id2');
const count = document.getElementById('count');

function calculateCount() {
  const val1 = parseInt(id1.value);
  const val2 = parseInt(id2.value);
  if (isNaN(val1) || isNaN(val2)) {
    count.value = '';
  } else {
    count.value = val1 + val2;
  }
}

id1.addEventListener('input', calculateCount);
id2.addEventListener('input', calculateCount);

This code sets up event listeners for the two ID input fields that call the calculateCount() function whenever their values are changed. The function parses the input values as integers, adds them together, and updates the count input field with the result. If either input field contains a non-numeric value, the count input field will be left blank.

16

In my CodePens above I used regular expressions to ensure input fields can contain only non-negative integer values.

1 Like
17

Thank you for posting. @Archibald came up with a good solution to my issue but I will look at your code and give it a try too. I appreciate your time.

18

By using JavaScript, you can easily calculate and display the count of two IDs entered on a form, providing a double check to ensure the accuracy of the data entered.

19

thanks

20

Just a suggestion, using

<input type="number" id="quantity" name="quantity" min="1" max="5">

would make the subtract function redundant.
Also disabling the Submit button would prevent the inadvertent form submission. Use a focus or change event listener on the count input to enable the button.