Get input value using htmlfor

Question

What’s the best way to accomplish something like this:

html.erb

<!-- inside a loop -->
    <i htmlfor="wish">
        <!-- name or icon -->
    </i>
    <input type="hidden" class="wish-cls" name="wish" value="<%= product.id %>" />
<!-- end loop -->

JavaScript

$(".wish").click(function(e){
  e.preventDefault();
  //var id = document.getElementsByTagName('wish-cls');
  console.log("Clicked: " + e.target.value);
});

If I click the input, when not hidden, I get the value but how to achieve this using htmlfor? Is it possible?

Please consider to use valid attribute as e.g `data-id` instead — A. Wolff, Jul 23 '16 at 08:00

Ibrahim Khan · Accepted Answer · 2016-07-23T08:10:07.987

0

You can use jQuery attribute selector and next() method to do this like following.

$("[data-id=wish]").click(function(e){
    e.preventDefault();

    var value = $(this).next(".wish-cls").val();
    console.log("Clicked: " + value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i data-id="wish">Click</i>
<input type="hidden" class="wish-cls" name="wish" value="1000" />

edited Jul 23 '16 at 08:10

answered Jul 23 '16 at 07:58

Ibrahim Khan

20,616
7
42
55

Hi. Would using `data-id` be shorter: http://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute – Sylar Jul 23 '16 at 08:06

Get input value using htmlfor

html.erb

JavaScript

1 Answers1

Linked