All geek questions in one place

How to increase the value of a quantitative field using jQuery?

I have a form with a number of fields and a plus and minus sign on each side,

<form id="myform"> product1 <input type="submit" value="+" id="add"> <input type="text" id="qty1"> <input type="submit value="-" id="minus"> product2 <input type="submit" value="+" id="add"> <input type="text" id="qty2"> <input type="submit value="-" id="minus"> </form>

I would like to increase the value of the field by one if adding is pressed a button and reduced by one if minus is pressed. Also, the value must not be less than 0.

Is there a way to do this in jQuery?

+1
source share
8 answers

First of all, type="submit" must be type="button" in all cases. In addition, you cannot have two elements with the same identifier; I assume you want add1 , minus1 , add2 , minus2 , etc.

The following jQuery code should work fine.

 $(function () { var numButtons = 10; for (var i = 1; i <= numButtons; ++i) { $("#add" + i).click(function () { var currentVal = parseInt($("#qty" + i).val()); if (!isNaN(currentVal)) { $("#qty" + i).val(currentVal + 1); } }); $("#minus" + i).click(function () { var currentVal = parseInt($("qty" + i).val()); if (!isNaN(currentVal) && currentVal > 0) { $("#qty" + i).val(currentVal - 1); } }); } });

Its useful to note:

  • I transfer everything to the call to $(function() { ... }) so that you attach event handlers only after the page loads. (In particular, after the DomContentLoaded event). This prevents errors regarding how the object with the identifier "add1" does not exist or something else, because technically this object does not exist until the actual page load.
  • Validations for NaN handle the case when a user enters non-numeric data in a field. You can add your own logic for this, in particular, for example. Automatically convert non-numeric properties to 0 every time someone clicks on add or minus.
+6
source

Your html is not entirely correct, you have several elements with the same identifier, it must be unique. But let's say you had only one set of inputs / buttons:

 $("#add").click(function(){ var newQty = +($("#qty1").val()) + 1; $("#qty1").val(newQty); }); $("#minus").click(function(){ var newQty = +($("#qty1").val()) - 1; if(newQty < 0)newQty = 0; $("#qty1").val(newQty); });
+3
source

I'm new, but I did it like this for integers ...

 <div class="quantityInput" min="-32" max="32"> <input type="text" class="quantityText"> <input type="button" value="+" class="quantityPlus"> <input type="button" value="-" class="quantityMinus"> </div>

Minimum and maximum attributes are optional. Then inside jQuery (document) .ready (...

 $(".quantityMinus").live("click", function() { var qInput = $(this).parents(".quantityInput"); var qText = qInput.find(".quantityText"); var qValue = parseInt((qText.val())? qText.val() : 0); qText.val(Math.max(qValue - 1, (qInput.attr("min"))? qInput.attr("min") : -0xffff)); }); $(".quantityPlus").live("click", function() { var qInput = $(this).parents(".quantityInput"); var qText = qInput.find(".quantityText"); var qValue = parseInt((qText.val())? qText.val() : 0); qText.val(Math.min(qValue + 1, (qInput.attr("max"))? qInput.attr("max") : 0xffff)); });
+3
source

You must use a unique identifier for all of your inputs, for example. qty1_add , qty1_minus . Then you can attach the click event to these buttons:

 $("#qty1_add").click( function() { $("#qty1").val( parseInt($("#qty1").val()) + 1); }).
+1
source

This is an improved first user response:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".add").click(function() { var currentVal = parseInt($(this).next(".qty").val()); if (currentVal != NaN) { $(this).next(".qty").val(currentVal + 1); } }); $(".minus").click(function() { var currentVal = parseInt($(this).prev(".qty").val()); if (currentVal != NaN) { $(this).prev(".qty").val(currentVal - 1); } }); }); </script> </head> <body> <form id="myform"> product1 <input type="button" value="+" id="add1" class="add" /> <input type="text" id="qty1" value="-1" class="qty" /> <input type="button" value="-" id="minus1" class="minus" /><br /><br /> product2 <input type="button" value="+" id="add2" class="add" /> <input type="text" id="qty2" value="-10" class="qty" /> <input type="button" value="-" id="minus2" class="minus" /> </form> </body>

I hope they will serve ....: D

+1
source

First, with the minus buttons, you need to enter type = "submit", not type = "submit, but I assume this prints an error;)

If you want to do this, you must change the identifiers of the plus and minus buttons to something like minus qty1, add-qty1, etc., to determine which input you want to update.

  <form id="myform"> product1 <input type="button" value="+" id="add-qty1" onclick="increase(this)"> <input type="text" id="qty1"> <input type="button" value="-" id="minus-qty1" onclick="decrease(this)"> product2 <input type="button" value="+" id="add-qty2" onclick="increase(this)"> <input type="text" id="qty2"> <input type="button" value="-" id="minus-qty2" onclick="decrease(this)"> </form> function increase(button) { var id = $(button).attr('id'); var fname = id.substr(3); var newval = parseInt($("#"+fname).val()) + 1; $("#" + fname).val(newval); } function decrease(button) { var id = $(button).attr('id'); var fname = id.substr(5); var newval = parseInt($("#"+fname).val()) - 1; $("#" + fname).val(newval); }

I hope this works, I have not tried :)

0
source

I think this should do it:

 $('#add').click(function (e) { var quant = $(this).next('input'); quant.val(parseInt(quant.val(), 10) + 1); }; $('#minus').click(function (e) { var quant = $(this).prev('input'); quant.val(parseInt(quant.val(), 10) - 1); if (parseInt(quant.val(), 10) < 0) { quant.val(0); } };

However, this depends on the relative positioning of controls that do not change.

0
source

Many thanks to everyone who was involved. Everything I paid attention to, and was able to finally come up with this, served the site very well (it was just css, that was painful!)

HTML:

 <div id="qtybox"><label for="qty"> <venda_text id=site.quantity> </label><input name="qty" id="qty" type="text" value="1" size="3" maxlength="2"></input> <button id="qtyplus" onclick="return false"></button> <button id="qtyminus" onclick="return false"></button> </div>

JS:

 jQuery(function(){ jQuery("#qtyplus").click(function(){ jQuery(":text[name='qty']").val( Number(jQuery(":text[name='qty']").val()) + 1 ); }); jQuery("#qtyminus").click(function(){ if(jQuery('#qty').val()>1) jQuery(":text[name='qty']").val( Number(jQuery(":text[name='qty']").val()) - 1 ); }); });

CSS

 #qtybox button#qtyplus { background: url("../images/social_icons/elements.png") no-repeat scroll -268px -223px transparent; border: medium none; cursor: pointer; display: block; float: right; height: 23px; width: 23px; }

As you can see, I deleted the values ​​+ and - - I hated how it was visualized!

0
source

Source: https://habr.com/ru/post/955075/

More articles:


All Articles