How to use multiple input numbers?

Question

I' creating a table to add new lines where each line had an input quantity but doesn't work well.

When i add more than a line the quantiy of first input increment more than once.

I want that each input increment 1 time per click.

My html - jade:

table(class=["table","table-hover", 'table-reception'])
                thead
                  tr
                    th Referência
                    th Designação
                    th Quantidade
                tbody

My view: (When i read a bar code i add a new tr)

tr(class="item-article", id="#{data.ref}", data-codigo="#{data.codigo}")
      td(class="td-ref")
        span #{data.ref}
      td(class="td-design")
        span #{data.design}
      td(class="td-qtt")
        <input type='button' value='-' class='minus' />
        <input type='text' size='10' class='value' value='0' />
        <input type='button' value='+' class='plus' />

my jquery:

function btnPlusMinus()
{
  $('.minus, .plus').click(function (e) {
    e.preventDefault();
    var $input = $(this).siblings('.value');
    var val = parseInt($input.val(), 10);
    $input.val(val + ($(this).hasClass('minus') ? -1 : 1));
    $( ".barCode" ).val('');
    $( ".barCode" ).focus();
  });
}

Jquery - loading bar code:

function receptionArticle()
    {
      $('.barCode').change(function ()
      {
        barCode = $(this).val();
        //alert($(this).val());
        document.getElementById('scrollToReception').scrollIntoView();

        $.get("/warehouse-reception-getArticle/"+encodeURIComponent(barCode), function(data)
        {
          if(data == 'false')
          {
            $.get("/warehouse-reception-popup/", function(data)
            {
              $(".popup").html('');
              $(".popup").append(data);
              $('.opacity').show();
              $('.popup').show();
              closeWarehousePopup();
            });
          }
          else
          {
            $(".table-reception tbody").append(data);
            $(".table-reception tbody tr:last").hide();
            $('.table-reception tbody tr:last').css( "background-color", "#2ecc71" ).fadeIn(1000);
            $( ".table-reception tbody tr:last" ).animate({
              'background-color': "initial"
            }, 5000);
            $("#reception-message").hide();
            $( ".barCode" ).val('');
            $( ".barCode" ).focus();
            btnPlusMinus();
          }

        });

      });
    }

Html: If i add five row and increment the first input the result was 5 and not 1. If i in second row increment the result was 4 and 1. etc...

Thank you

Do you have multiple <tr> with each of them containing the three <input> elements? Can you post the resulting html? — gus27
– gus27, Commented Feb 8, 2017 at 9:17
I created a fiddle for your problem with a guess for your html code. This fiddle runs fine. How does your code differ from the one in the fiddle? — gus27
– gus27, Commented Feb 8, 2017 at 9:27
Can you post the resulting html code: the html code that will be delivered to the browser? — gus27
– gus27, Commented Feb 8, 2017 at 9:44
And please show the code where the rows are dynamically added. — gus27
– gus27, Commented Feb 8, 2017 at 9:51

gus27 · Accepted Answer · 2017-02-08 11:26:26Z

1

The problem is that you are calling btnPlusMinusInit() every time you add a row - and with each call you are binding an extra event on it. So after adding 3 rows the events for the buttons in the first row are called 3 times.

It's better to use jQuery's on event handler with a selector. By using a selector (in your case '.minus, .plus') the event is delegated and affects new elements added to the DOM, too.

So try this instead:

$('#add-row').click(function() {
  var row = '<tr><td>'+
    '<input type="button" value="-" class="minus" />'+
    '<input type="text" size="10" class="value" value="0" />'+
    '<input type="button" value="+" class="plus" />'+
    '</td></tr>';
    $(".table-reception tbody").append(row);    
});
$(document).on('click', '.minus, .plus', function (e) {
    e.preventDefault();
    var $input = $(this).siblings('.value');
    var val = parseInt($input.val(), 10);
    $input.val(val + ($(this).hasClass('minus') ? -1 : 1));
    $( ".barCode" ).val('');
    $( ".barCode" ).focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-reception">
<tbody></tbody>
</table>

<button id="add-row">Add row</button>

edited Feb 8, 2017 at 11:26

answered Feb 8, 2017 at 10:20

gus27

2,6671 gold badge23 silver badges25 bronze badges

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

7 Comments

user3242861 Over a year ago

How can i do that just for positive number in input? thank you @gus27

gus27 Over a year ago

@user3242861 After var val = parseInt($input.val(), 10); do a if (val<=0) return;

user3242861 Over a year ago

but after arrived to 0 i can't increment again.@gus27

gus27 Over a year ago

@user3242861 Of course you should only return when val<=0 and the "minus" button is pressed. I'm sure you can transfer this into JavaScript code.

user3242861 Over a year ago

Done! Thank you @gus27

|

DomeTune · Accepted Answer · 2017-02-08 09:15:49Z

First at all, its not a nice solution to handle a function with the class.

function btnPlusMinusInit()
{
  $('#plusBtn').click(btnPlus); //use id selector, for unique elements 
  $('#minusBtn').click(btnMinus); //use id selector, for unique elements
};
btnPlusMinusInit();
function btnPlus(e){
    var $input = $(this).siblings('#value'); //use id selector, for unique elements
    var inputValue = $input.val();
    inputValue = inputValue.trim() != "" ? inputValue : 0; //check for empty input or add readonly
    var val = parseInt(inputValue);
    $input.val(val + 1);
    $( "#barCode" ).val(''); //use id selector, for unique elements
    $( "#barCode" ).focus(); //use id selector, for unique elements
}

function btnMinus(e){
    var $input = $(this).siblings('#value'); //use id selector, for unique elements
    // var $input = $('#value');  would be the same for a unique value element.
    var inputValue = $input.val();
    inputValue = inputValue.trim() != "" ? inputValue : 0;  //check for empty input or add readonly
    var val = parseInt(inputValue);
    $input.val(val - 1);
    $( "#barCode" ).val(''); //use id selector, for unique elements
    $( "#barCode" ).focus(); //use id selector, for unique elements
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="minusBtn" type='button' value='-' class='minus' />
<input id="value" type='text' size='10' class='value' value='0' />
<input id="plusBtn" type='button' value='+' class='plus' />
<div id="barCode">HERE IS A BARCODE</div>

But if i use ids i will have problems for multiple inputs. The rows will be added dynamically to table.

Collectives™ on Stack Overflow

How to use multiple input numbers?

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related