How do I set maximum number input from database in javascript?

Question

I wish to set a maximum number input in an "input type=number" based on the amount in the database. Currently, I am trying for it to work base on data-max before i try getting my max value from my database, however it cant seem to work.

It has been asked before previously here, however I cant understand it still: Set maximum number input text from database in php/javascript

HTML:

 <div class="ui-block-a">
                                    <div id="test">
                                        <input type="button" value="-" class="minus" id="jumlah" name="jumlah">
                                    </div>
                                </div>

                                <div class="ui-block-b">

                                    <input type="number" min="1" max="10" id="quantity" value="0" name="quantity" title="Qty" class="input-text qty text" size="6" pattern="" inputmode="" data-max="3" onkeyup="check(this);" readonly>

                                </div>

                                <div class="ui-block-c">
                                    <div id="test2">
                                        <input type="button" value="+" class="plus" id="jumlah2" name="jumlah2">
                                    </div>
                                </div>

JS:

function check(quantity) {
    div.addEventListener('click', function () { });
    var max = quantity.getAttribute("data-max");
    if (parseInt(quantity.value) > parseInt(max)) {
        alert("Amount out of max!");
    }
}

I'm not sure you have included enough to help us. For example, what is obj? Where is obj initialized? What is div? Where is div initialized. Also, the first line in your check function doesn't do anything. All you did is add an event listener, but when the event is fired, it won't do anything. — Luke Becker, Dec 04 '18 at 18:58
The example you copied is using `onkeyup` for a reason. Changing it to `onclick` is likely your issue. First remove the addEventListener, then change the `onclick` on the HTML element to `onkeyup` and it should work. — Andrew T Finnell, Dec 04 '18 at 19:05
I've changed the obj which was supposed to be quantity. The div event listener is to ensure that the function can run without onclick as seen in the html (I am not sure if thats the right way in ensuring that). What im trying to do is to ensure that my quantity is <= to data-max for now before i get my max value from the database. @LukeBecker — nalyr, Dec 04 '18 at 19:06
However it can't seem to work if the input type is a number as the example i copied is an input type text @AndrewTFinnell — nalyr, Dec 04 '18 at 19:07
I have edited my HTML as my input type number runs by a + - button at the side to change the amount, which is why I need the function to run automatically without onclick/onkeyup — nalyr, Dec 04 '18 at 19:24

score 1 · Accepted Answer · answered Dec 04 '18 at 21:26

Based off of the information you've provided its difficult to understand exactly what you're trying to accomplish and what the issue is (ie. you mention a database dependency and php, neither of which are referenced in your code.), but from looking at the code I would decipher your problem as...

"Trying to provide an 'Alert' when input field reaches a max number (specified by data-max attribute) after the the field value has been incremented or decremented by the +/- buttons"

Assuming this what you you are trying to accomplish then...

You need to move the event handler ( decrement() )to the input buttons, not the input text field since the buttons are what are receiving the user events. thius also needs to be onclick because buttons don't receive keyup events. You have 'readonly' property on the text input so I'm assuming that can't be edited through text/keyboard?

<input type="button" value="-" onclick="decrement()" class="minus" id="jumlah" name="jumlah">

You need to actually do something with the increment/decrement input buttons unless you're processing those events somewhere else.

function increment () {
  let quantity = document.getElementById('quantity'),
            newVal =  Number(quantity.value) + 1;
  if (!isOverMax()) {
    quantity.value = newVal;
  }
}
function decrement () {
    let quantity = document.getElementById('quantity');
    quantity.value = Number(quantity.value) - 1;
}

You should invoke the check() function (renamed isOverMax() to be more declarative and semantically correct) after every increment function. !isOverMax()
You should add a conditional to actually prevent the input field from being incremented above the max if thats your goal. One way to do this is by returning a boolean from the isOverMax() function.

function isOverMax() {
  let max = quantity.getAttribute("data-max");

  if (parseInt(quantity.value) >= parseInt(max)) {
    alert("Amount out of max!");
    return true;
  }
  return false;
}

This code could definitely be organized better, but should get you closer to what you're trying to accomplish.

Full working example...

https://jsfiddle.net/aguy2mwx/

Hope this helps!

Hi thanks for the reply, I've tried this but it shows that increment() and decrement() is not defined at HTMLInputElement.onclick, i'm not sure what it means. — nalyr, Dec 05 '18 at 02:02
I have solved in by placing them as a script under my html file. However do you know how to return back the value that is less than the max amount after alert? — nalyr, Dec 05 '18 at 02:17

How do I set maximum number input from database in javascript?

1 Answers1

Linked