Question

I have a more info link for each entry in a table (as seen in screenshot), that displays additional information.

Is it possible for when a user clicks the more info link, it grabs the value from that link, store it in a hidden input field, so on post I can grab those values?

the naming convention of the “more” info link is:

<a href="#" data-student="2" class="mini-view">more</a>
<a href="#" data-student="6" class="mini-view">more</a>
<a href="#" data-student="7" class="mini-view">more</a>
<a href="#" data-student="9" class="mini-view">more</a>

So if all links were clicked, it’d post the data like: 2,6,7,9 – the user can click the “more” info link as many times as they want, so I’d only want to record it on the first click.

Because I am going to convert those values into an array and use that to do some backend checks.

Answer 1

var clickedIds = '';

$('.mini-view').on('click', function(){

    // need to check if the "more info" has already been clicked
    if(!$(this).data('clicked')){ 

         //if not, update the (serialized) list of clicked student ids:
         clickedIds = clickedIds  + $(this).data('student') + ',';

         //update that value to the hidden field
         //could have done this w/o the clickedIds var, but I think it's cleaner
         //this way:
         $('#myHiddenField').val(clickedIds);

         // then mark it as already clicked.
         $(this).data('clicked', true)

    }


});

This puts a serialized list into your hidden variable that looks like ‘2,6,7,9,’