Question 203016 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to create and read HTML elements with same ID

I have a for-loop that creates a list. Each item on the list has a hidden input and function as below.

<input type="hidden" id="network-id" name="network_id" value="1">
<button type="button" onclick="transfer(someId);"></button>

I’m using my JS code to read the hidden input in transfer function.

networkId = $("#network-id").val();

But since each element ID is the same, it only reads the first "network-id" element on the list.

What is the best way to read each element?

Tags:

3

Answers


  1. 0

    Element IDs should be unique. You can adjust your code so that it gives each element the same class instead or give each element a unique id.

    Login or Signup to reply.
  2. 0

    Use a class name or just take the previous element sibling of each button.

    function transfer(button){
  console.log(button.previousElementSibling.value);
}
    <input type="hidden" class="foo" value="1">
<button type="button" onclick="transfer(this);">One</button> 

<input type="hidden" class="foo" value="2">
<button type="button" onclick="transfer(this);">Two</button> 

<input type="hidden" class="foo" value="3">
<button type="button" onclick="transfer(this);">Three</button>
    Login or Signup to reply.
  3. 0

    To read each element in your list, you can modify the HTML code and JavaScript logic. Here’s a solution using a modified approach:

    HTML code:

    <!-- Assuming you have a container element for the list -->
<div id="list-container">
  <!-- The for-loop that creates the list -->
  <!-- Each item in the list will have a unique index -->
  
  <input type="hidden" class="network-id" name="network_id" value="1">
  
  <button type="button" onclick="transfer(this);"></button>

  <input type="hidden" class="network-id" name="network_id" value="2">

  <button type="button" onclick="transfer(this);"></button>

  <!-- Add more items as needed -->
</div>

    JS Code:

    function transfer(button) {
    // Find the corresponding hidden input within the same container
    var networkId = $(button).prev('.network-id').val();
    // Rest of your logic using the networkId value
    // ...
}

    Explanation:

    • In the HTML code, we add a CSS class (network-id) to the hidden input elements instead of using the same ID for all elements. This allows us to select them using the class selector.

    • In the onclick attribute of each button, we pass this as an argument to the transfer function. This passes the button element itself to the function.

    • In the JavaScript code, $(button) wraps the button element as a jQuery object. Using .prev(‘.network-id’), we select the preceding sibling element with the class network-id, which is the corresponding hidden input element.

    • Finally, we can retrieve the value of the hidden input using .val() and assign it to the networkId variable. You can continue with the rest of your logic using this value.

    By using this approach, you can read the hidden input value for each item in the list, even if they have the same class name.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search