PHP Versions Question posted in
You can find a list of all versions here.

Php versions – JavaScript on change checking all input field values

I have an array of input fields containing carton quantity values, and I want to make sure no more cartons are deducted than needed. It works when there is only one input field, for example when I have:

var input = document.getElementsByName('number_of_cartons');

However I can’t get it work for an array of values.

Here is my code and I would appreciate any feedback. Thanks.

<input name="number_of_cartons[]">
<input name="number_of_cartons[]">
<input name="number_of_cartons[]">
<input name="number_of_cartons[]">
<input name="number_of_cartons[]">

            var input = document.getElementsByName('number_of_cartons[]');
            for (var i = 0; i < input.length; i++) {
                var new_cartons = input[i];
                var existing_cartons = 25;
                var cartons_needed = 10;

                $(new_cartons).on('keyup', function () {
                   if ((new_cartons - existing_cartons) > cartons_needed) 
                       alert("Maximum number of cartons needed is " + cartons_needed + ".");
                });
            }

I can probably change the array of inputs to individual inputs, (i.e. from number_of_cartons[ ] to number_of_cartons_1, number_of_cartons_2, number_of_cartons_3, etc.), however the whole site is using the array version and it would mess up everything, unless I change it all over the site.

With Jerico’s help below I have updated my lines and it works fin now. Here is the revised working version (I leave the PHP lines too):

Please note that I allow partial cartons too (i.e. 0.5 or 0.25) (input[i].value = input[i].value.replace(/[^d.]/g, "");)

And if the new value doesn’t pass the test then I reset the value (input[i].value = existing_cartons;)

let input = document.getElementsByName('products_location_number_of_cartons[]');

let new_cartons;
let existing_cartons = <?php echo $number_of_cartons; ?>;
let cartons_needed = <?php echo ($cartons_needed - $pickedup_cartons); ?>;

function cartonUpdate(){
  let cartons_pulled = (existing_cartons - new_cartons);
  if(cartons_pulled > cartons_needed){
    alert("Maximum number of cartons needed is " + cartons_needed);
    return 1;
  } else if (new_cartons >existing_cartons) {
    alert("Adding carton quantity is not allowed.");
    return 1;
  }
}

for (let i = 0; i < input.length; i++) {
  input[i].addEventListener("blur", function() {
    input[i].value = input[i].value.replace(/[^d.]/g, "");
    new_cartons = input[i].value;
    if (new_cartons != existing_cartons) {
        if (cartonUpdate()) {
            input[i].value = existing_cartons;
        }   
  }
  })
}
Tags:

2

Answers


  1. 0

    Using vanilla JS we can get our elements, put them into an array then add an event listener that will always work with the function I added.

    <input name="number_of_cartons">
<input name="number_of_cartons">

    let input = document.getElementsByName('number_of_cartons');

let new_cartons;
let existing_cartons = 25;
let cartons_needed = 10;

function cartonUpdate(){
  if(new_cartons - existing_cartons > cartons_needed){
    alert("Maximum number of cartons needed is " + cartons_needed + ".");
  }
}

for (let i = 0; i < input.length; i++) {
  input[i].addEventListener("keyup", function() {
    new_cartons = input[i].value;
    cartonUpdate();
  })
}

    Upvote if this helps!

    Login or Signup to reply.
  2. 0

    Of course, it’s a little difficult to verify your code without any console data. but in my opinion, after receive the value from tag list, to set a listener may be a risk.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search