• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

196
Views
How can I increment and decrement value with unique id?

I have this loop, The id is unique. When I try to increment it is working for only one input field. How can I increment and decrement using unique id?

          @forelse($allproduct as $key=>$data)
                            <tr>
                                <td data-label="@lang('Date')">
                                     <div class="quantity col-md-8" style="display:flex; ">
                                          <input type="text" value="" class="form-control req amnt display-inline" id="qtyid[{{$data->product_id}}]" min="0">
                                       <div class="quantity-nav">
                                          <div class="quantity-button quantity-up qty" onclick="incrementValue()">+</div>
                                          <div class="quantity-button quantity-down qty" onclick="decrementValue()">-</div>
                                       </div>

                                    </div>
                                 </td>
                            </tr>
          @endforelse

Javascript

function incrementValue()
    {
        var value = parseInt(document.getElementById("qtyid").value, 10);
        value = isNaN(value) ? 0 : value;
        value++;
        document.getElementById('qtyid').value = value;
    }


    function decrementValue()
    {
        var value = parseInt(document.getElementById('qtyid').value, 10);
        value = isNaN(value) ? 0 : value;

        value--;
        if(value == -1) {
            value = 0;
        }
        document.getElementById('qtyid').value = value;
    }
about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I suggest you use an approach that doesn't need IDs.

function incrementValue(e)
    {
        // use the quantity field's DOM position relative to the button that was clicked
        const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt");
        var value = parseInt(qty.value, 10);
        value = isNaN(value) ? 0 : value;
        value++;
        qty.value = value;
    }


    function decrementValue(e)
    {
        const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt");
        var value = parseInt(qty.value, 10);
        value = isNaN(value) ? 0 : value;

        value--;
        if(value == -1) {
            value = 0;
        }
        qty.value = value;
    }
@forelse($allproduct as $key=>$data)
                            <tr>
                                <td data-label="@lang('Date')">
                                     <div class="quantity col-md-8" style="display:flex; ">
                                          <input type="text" value="" class="form-control req amnt display-inline" min="0">
                                       <div class="quantity-nav">
                                          <div class="quantity-button quantity-up qty" onclick="incrementValue(event)">+</div>
                                          <div class="quantity-button quantity-down qty" onclick="decrementValue(event)">-</div>
                                       </div>

                                    </div>
                                 </td>
                            </tr>
          @endforelse

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error