jQuery form each input accept only multiple values

Question

I'm trying to develop a order form that item has to be fill only with the multiple quantity of package.

e.g. Package with 20 units

Only accept package multiple quantity otherwise show me an alert message.

My problem is, my code is not working for other lines, only the first one, and this is the point that I need your help guys.

I would like to made an alert that looking for every line, not the first only.

P.S. I'm not an expert in javascript by the way, i have knowledge of php/html and I read a lot in a few forums and take some explanations from everywhere and join everything in my code.

I appreciate all of you for any help!

Here is my code.

$("#Quantity").focusout(function(){

var X = $('#package').val();

	$("#Quantity").blur(function() {
	  var number = parseInt($(this).val());
	  if (!isNaN(number)) {
	    if (number % X === 0) {
	      $("#output").html("It is multiple of " + X );
	    } else {
	      $("#output").html("Not multiple of " + X );
	    }
	  } else {
	    $("#output").html("Entry is not a number.");
	  }
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Quantity:
<input type="text" id="Quantity">
Package:
<input type="text" id="package" value="20">
<br><br>
Quantity:
<input type="text" id="Quantity">
Package:
<input type="text" id="package" value="30">
<p id="output"></p>

you can't have multiple IDs with the same value on the page. ID has to be unique in an html document. use classes for this. Btw, also look into using labels for your inputs (but that has nothing to do with your question, this is more basic html learning) — cloned
– cloned, Commented Dec 10, 2019 at 11:59
I considered this and made some changes as you said, but had the same point using classes, only the first line still work. the second one even has not been noticed. I've change my code to this: html part: <input type="text" class="qtd"> and script part: $(".qtd").focusout... to refeer the class code. — rfnikity
– rfnikity, Commented Dec 10, 2019 at 12:36

Tomalak · Accepted Answer · 2019-12-10 12:37:47Z

1

As the comment below your question says, you cannot use an ID multiple times in HTML. Assign CSS classes instead.

Also don't (!) create nested event handlers. Your code has a "focusout" event handler that contains a "blur" event handler. This attaches a new "blur" event handler every single time the "focusout" event handler runs, which means you'll end up with tons of redundant event handlers after using the form for a while.

$(".quantity").blur(function() {
  var number = parseInt( $(this).val() );
  var package = parseInt( $(this).next(".package").val() );

  if (isNaN(number) || isNaN(package)) {
    $("#output").html("Entry is not a number.");
    return;
  }

  if (number % package === 0) {
    $("#output").html(`${number} is multiple of ${package}.`);
  } else {
    $("#output").html(`${number} is not multiple of ${package}.`);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Quantity: <input type="text" class="quantity">
Package: <input type="text" class="package" value="20">
<br><br>
Quantity: <input type="text" class="quantity">
Package: <input type="text" class="package" value="30">

<p id="output"></p>

Note the backtick strings that allow direct integration of variable values into the text (this works in modern browsers, see documentation).

answered Dec 10, 2019 at 12:37

Tomalak

339k68 gold badges547 silver badges635 bronze badges

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

1 Comment

rfnikity Over a year ago

I cannot describe how happy I am to solve my problem in such a short time with both of you and a really effective solution. Really thank you so much for showing me how and helping me with my question. Cloned and Tomalak

Collectives™ on Stack Overflow

jQuery form each input accept only multiple values

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related