Home/ Questions/Q 6783997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T16:56:14+00:00

Based on the article How to increase the value of a quantity field I

  • 0

Based on the article “How to increase the value of a quantity field” I tried to find a way how I can get an action on multiple fields with one click on the +/-button.

What i like to get as an result is: When I click on the (+)button the one field will be increased by 1 and in the same moment the field “bestand1” will be decreased by one – and also the other way round: Increasing the one causes decreasing the other in the same moment.

Here is what I tried based on the other article:

<script type="text/javascript">
$(function()
{
    $(".add").click(function()
    {
        var currentVal = parseInt($(this).next(".qty").val());
        var bestandVal = parseInt($(this).next(".bestand").val());

        if (currentVal >= 10)
        {
            $(this).next(".qty").val(currentVal = 10);
        }
        if (currentVal != NaN && currentVal < 10)
        {
            $(this).next(".qty").val(currentVal + 1);
            $(this).next(".bestand").val(bestandVal - 1);
        }  
    });

    $(".minus").click(function()
    {
        var currentVal = parseInt($(this).prev(".qty").val());
        var bestandVal = parseInt($(this).prev(".bestand").val());

        if (currentVal <= 0)
        {
            $(this).next(".qty").val(currentVal = 0);
        }
        if (currentVal != NaN && currentVal > 0)
        {
            $(this).prev(".qty").val(currentVal - 1);
            $(this).prev(".bestand").val(bestandVal - 1);
        }

    });
});

</script>
</head>

<body>

    <form id="myform">
        bestand1
        <input type="text" id="bestand1" value="20" class="bestand" disabled /><br /><br />
        bestand2
        <input type="text" id="bestand2" value="20" class="bestand" disabled /><br /><br />
        product1
        <input type="button" value="+" id="add1" class="add" />        
        <input type="text" id="qty1" value="2" class="qty" disabled/>        
        <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="2" class="qty" disabled/>        
        <input type="button" value="-" id="minus2" class="minus" />

    </form>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here it is, assuming you keep add1 and minus1 linked to qty1 and bestand1, and 2…etc

    $(function()
{
    $(".add").click(function()
    {
        // get id number of the calling elememnt
        var num = parseInt(this.id.substr(3));

        // get jquery elements
        var el_qty = $("#qty"+num);
        var el_bes = $("#bestand"+num);

        // get current values
        var currentVal = parseInt(el_qty.val());
        var bestandVal = parseInt(el_bes.val());

        if (currentVal != NaN && currentVal < 10)
        {
            // increment values
            el_qty.val(++currentVal);
            el_bes.val(--bestandVal);
        }
    });

    $(".minus").click(function()
    {
        // get id number of the calling elememnt
        var num = parseInt(this.id.substr(5));

        // get jquery elements
        var el_qty = $("#qty"+num);
        var el_bes = $("#bestand"+num);

        // get current values
        var currentVal = parseInt(el_qty.val());
        var bestandVal = parseInt(el_bes.val());

        if (currentVal != NaN && currentVal > 0)
        {
            // increment values
            el_qty.val(--currentVal);
            el_bes.val(--bestandVal);
        }

    });
});
    • 0