对多个元素使用相同的 JQuery function

Question

I am currently learning web development using Flask. I am stuck at a place where I want to use a jquery function to return the value from an input tag in for that corresponding row.

Here;s my HTML:

 enter code here {% extends "base.html" %} {% block title %} Menu item {% endblock %} {% block content %} <div class="container"> <div class="row"> <table class="table table-striped table-inverse table-responsive"> <thead class="thead-inverse"> <tr> <th>Item Name</th> <th>Amount</th> <th></th> </tr> </thead> <tbody> <form> {% for item in menu_category %} <tr> <td scope="row">{{item.item_Name}}</td> <td>{{item.item_Price}}</td> <td> <input type="hidden" class="form-control test" name="item_id{{ loop.index0 }}" id="itemID" placeholder="" value="{{ item.item_Id }}"> <a name="add_to_cart" id="add_to_cart" class="btn btn-primary clsAddToCart" href="#" role="button">Add to Cart</a> </td> </tr> {% endfor %} </form> </tbody> </table> </div> <p id=result>cart: </p> </div> {% endblock %}

Here's my Jquery function:

    <script>
    $(function() {
        $('.clsAddToCart').bind('click', function() {
          $.getJSON('{{ url_for("func_add_to_cart") }}', {
            productID: $("input[name^='item_id']").val(),
        }, function(data) {
            $("#result").html(data.result);
        });
        return false;
        });
        });
   </script>

I just want the function to return the corresponding item id on the button click, but somehow it always returns the first item id only for all.

Much Thanks!

Answer 1

The jQuery documentation for the val method explains this on the very first line:

Get the current value of the first element in the set of matched elements or set the value of every matched element.

(the emphasis is mine to show the relevant part for your question).

For each "add to cart" button to work on the corresponding input, you can use $(this) to get hold of the specific button clicked on, and then use, for example, the prev method (since in your HTML the input is the immediately preceding sibling - there are slightly more sophisticated things you could do to make this more robust to changes in your HTML, but I'll let you figure those out if you need them):

$(function() {
  $('.clsAddToCart').bind('click', function() {
    $.getJSON('{{ url_for("func_add_to_cart") }}', {
      productID: $(this).prev().val(),
    }, function(data) {
      $("#result").html(data.result);
    });
    return false;
  });
});

Answer 2

You are setting all input elements the same id ('itemID'). Should be like: 'item{{ item.item_Id }}'. May be this can solve your problem.

Your jQuery function should be like:

    <script>
    $(function() {
        $('.clsAddToCart').bind('click', function() {
          $.getJSON('{{ url_for("func_add_to_cart") }}', {
            productID: $(this).closest('input').val(), //<==
        }, function(data) {
            $("#result").html(data.result);
        });
        return false;
        });
        });
   </script> 

Answer 3

In order to get the value of the correct input element you have to make use of the context of the click event. The this keyword refers to the element that was click. Therefore you can use that to target the correct input element using relative positioning to this . Per your structure any of the following should be fine as a replacement for $("input[name^='item_id']").val() :

$(this).siblings().val(); //OR
$(this).closest('td').find('input').val(); //OR
$(this).parent().children('input').val(); //AND SO ON AND SO FORTH

Please remember that:

1. .bind() is deprecated as of v3, so use .on()
2. Keep all your id attributes unique and, no need to have them if you don't need them.

 $(function() { $('.clsAddToCart').on('click', function() { console.log( $(this).siblings().val() ); /*$.getJSON('{{ url_for("func_add_to_cart") }}', { productID: $("input[name^='item_id']").val(), }, function(data) { $("#result").html(data.result); }); return false;*/ }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <table class="table table-striped table-inverse table-responsive"> <thead class="thead-inverse"> <tr> <th>Item Name</th> <th>Amount</th> <th></th> </tr> </thead> <tbody> <form> <:--{% for item in menu_category %}--> <tr> <td scope="row">Item Name 1</td> <td>100</td> <td> <input type="hidden" class="form-control test" name="item_id-1" id="itemID1" placeholder="" value="id1"> <a name="add_to_cart" id="add_to_cart" class="btn btn-primary clsAddToCart" href="#" role="button">Add to Cart</a> </td> </tr> <tr> <td scope="row">Item Name 2</td> <td>200</td> <td> <input type="hidden" class="form-control test" name="item_id-1" id="itemID2" placeholder="" value="id2"> <a name="add_to_cart" id="add_to_cart" class="btn btn-primary clsAddToCart" href="#" role="button">Add to Cart</a> </td> </tr> <tr> <td scope="row">Item Name 3</td> <td>300</td> <td> <input type="hidden" class="form-control test" name="item_id-1" id="itemID3" placeholder="" value="id3"> <a name="add_to_cart" id="add_to_cart" class="btn btn-primary clsAddToCart" href="#" role="button">Add to Cart</a> </td> </tr> <tr> <td scope="row">Item Name 4</td> <td>50</td> <td> <input type="hidden" class="form-control test" name="item_id-1" id="itemID4" placeholder="" value="id4"> <a name="add_to_cart" id="add_to_cart" class="btn btn-primary clsAddToCart" href="#" role="button">Add to Cart</a> </td> </tr> <!--{% endfor %}--> </form> </tbody> </table> </div> <p id=result>cart: </p> </div>