Get current clicked item values in jquery

Question

I am showing item and its property list on template using django. item have saveral property- name, price, vendor etc.

i am showing these items by for loop. i am trying to edit item detail for this i need to send new/old values to jquery function.

my code looks like-

{% for i in item %}
   <div class="form-group">
       <label for="email">Product Id:</label>
       <input type="text" class="form-control" name="productID" id="productID" value={{i.productID}}>
   </div>
   <div class="form-group">
       <label for="email">Product Id:</label>
       <input type="text" class="form-control" name="productName" id="productName" value={{i.productName}}>
   </div>

   <div class="form-group">
       <label for="email">Product Id:</label>
       <input type="text" class="form-control" name="vendor" id="vendor" value={{i.vendor}}>
   </div>
        <button type="submit" id="submit" class="btn btn-default">Submit</button>
{% endfor %}

jquery-

<script type="text/javascript">
    $('#submit').click(function () {
        var productid = $("#productID").val();
        var vendor = $("#vendor").val();
        var productname = $('#productName').val();
        console.log(productid)
        console.log(vendor)
        console.log(productname)
    });
</script>

But it is not working for me. please help.

thanks in advance

Answer 1

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

You can't have multiple elements with the same ID or things will not work as expected.

What I would do is get rid of the ID completely, and just wrap each element in some sort of container. When the submit is clicked, find the .closest container, and use that as the jQuery context to find the inputs with the name's that you care about.

 $('.submit').on('click', function() { var $item = $(this).closest('.item'); var productid = $("[name='productID']", $item).val(); var vendor = $("[name='vendor']", $item).val(); var productname = $("[name='productName']", $item).val(); console.log(productid) console.log(vendor) console.log(productname) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> {% for i in item %} <div class="item"> <div class="form-group"> <label for="email">Product Id:</label> <input type="text" class="form-control" name="productID" value={{i.productID}}> </div> <div class="form-group"> <label for="email">Product Id:</label> <input type="text" class="form-control" name="productName" value={{i.productName}}> </div> <div class="form-group"> <label for="email">Product Id:</label> <input type="text" class="form-control" name="vendor" value={{i.vendor}}> </div> <button type="submit" class="submit btn btn-default">Submit</button> </div> {% endfor %} 

Answer 2

The main problem is because you're repeating the same id multiple times in the DOM. That is invalid HTML. To group elements with common behaviours use classes instead.

Then you can use DOM traversal from the clicked button to find the related input elements and read their values by using a combination of closest() and find() . Try this:

 $('.submit').click(function() { var $container = $(this).closest('.container'); var productid = $container.find(".productID").val(); var vendor = $container.find(".vendor").val(); var productname = $container.find('.productName').val(); console.log(productid) console.log(vendor) console.log(productname) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="form-group"> <label for="email">Product Id:</label> <input type="text" class="form-control productID" name="productID" value="{{i.productID_1}}"> </div> <div class="form-group"> <label for="email">Product Id:</label> <input type="text" class="form-control productName" name="productName" value="{{i.productName_1}}"> </div> <div class="form-group"> <label for="email">Product Id:</label> <input type="text" class="form-control vendor" name="vendor" value="{{i.vendor_1}}"> </div> <button type="submit" class="btn btn-default submit">Submit</button> </div> <div class="container"> <div class="form-group"> <label for="email">Product Id:</label> <input type="text" class="form-control productID" name="productID" value="{{i.productID_2}}"> </div> <div class="form-group"> <label for="email">Product Id:</label> <input type="text" class="form-control productName" name="productName" value="{{i.productName_2}}"> </div> <div class="form-group"> <label for="email">Product Id:</label> <input type="text" class="form-control vendor" name="vendor" value="{{i.vendor_2}}"> </div> <button type="submit" class="btn btn-default submit">Submit</button> </div> 

Note that this adds one extra wrapping div element within your loop so that it's much easier to retrieve the related elements.