Updating the value of a hidden input with the data-id of a clicked on <a>

Question

I have created a form which contains simulated dropdown menu with subdropdowns, created using a foreach loop through a @Model. When I click on one of my , I want value of my hidden input field to equal the data-id of the clicked on

What I had got so far - HTML

     <form id="myForm" method="post">
                    @Html.HiddenFor(x => x.User);

                    <div class="yourstats" id= "yourstats">
                        <h3>Your Stats</h3>
                    </div>

                    <div class="dropdown">
                        <div class="yourteam">
                            <h3>Teams</h3>
                        </div>
                        <div class="dropdown-content">

                            <div class="dropdown-submenu">
                                <a class="test" tabindex="-1" href="#">Team 1 <span class="caret"></span></a>
                                <div id='Team1' class="dropdown-menu">
                                    @foreach (var member in Model.Team1Members)
                                    {
                                        <a href="#" data-id="@member.Key">@member.Value</a>

                                    }
                                </div>
                            </div>
                            <div class="dropdown-submenu">
                                <a class="test" tabindex="-1" href="#">Team2 <span class="caret"></span></a>
                                <div id='Team2' class="dropdown-menu">
                                    @foreach (var member in Model.Team2Members)
                                    {
                                        <a href="#" data-id="@member.Key">@member.Value</a>
                                    }
                                </div>
                            </div>

</form>

This is the function I am trying to use to grab the dataid from the clicked on and put it in the hidden input . It works fine when I hardcode the data-id for testing purposes, like so -

`$(".dropdown a").on("click", () => {
   var $value = 7909
   $('#User').val($value)
   $('#myForm').submit()
});`

but I cant make it work without the hardcoded value

    `$(".dropdown a").on("click", () => {
    var $value = $(".dropdown a").data("id")
    $('#User').val($value)
  $('#myForm').submit()
});`

Chrome dev tools is telling me that when I use the hardcoded values, I am sending the correct ID = 7909 to the server. But when I try to use my actual function, I am not sending any data to the server. So that means the problem is in this part of the code, right?

`$(".dropdown a").data("id")`

I had a very good look at other questions that involved selecting a data-id and or updating the value of a hidden input, and they informed my work so far but no dice. I'm sure I'm doing something very simple wrong, can anyone tell me what it is?

EDIT: I have also tried

`$('.dropdown a').attr('data-id')`

and

`$('.dropdown a').data('data-id')`

with no luck, and same error.

Answer 1

Since you are using an arrow function, there is no concept of "this." Part of your problem may be that you need to know which control is the sender to this function so that you can read the data-id attribute from the sender element. It may benefit you to move away from arrow function to:

$('.dropdown a').on('click', function(){ 
   var $value = $(this).attr('data-id');
   $('#User').val($value)
   $('#myForm').submit() 
});