assign value of hidden input to variable

[dwlamb]

This is a typical entry of many on a page:

<div class="link_entry">
    <div class="link_actions left">
        <span class="LibraryItemDelete">
            <img src="images/ajax-urls/delete_icon.png" title="Delete this link" alt="Delete this link">
        </span>&nbsp;
        <span class="LibraryItemEdit">
            <img src="images/ajax-urls/edit_icon.png" title="Edit this link" alt="Edit this link">
        </span>
    </div><!-- /link_actions -->
    <div class="link right">
        <input type="hidden" value="92" name="id">           <--want to find and assign that value
        <a href="http://www.somewhere.com">somewhere.com</a>
    </div><!-- link -->
</div><!-- /link_entry -->

This is the start of a jQuery function for an ajax call:

$(document).on('click', '.LibraryItemEdit', function() {
    var url_id = $(this).find('input[name="id"]').val();
}

I want a way to find and assign to a variable the value of the hidden input field that is below the span LibraryItemEdit.

I am using hidden input fields to store the database table id for each link. Is there a better method? The id's are only for the purposes of ajax calls.

[dany12]

I would use a class on the hidden input field

Something like this.

I made a codepen for you Click Here

Hope this helps

[dwlamb]

Thanks for the reply, dany12. But it did not work. I follow your logic and it should work, but when I run the script, the variable url_id remains undefined.

From my earlier messaage and your suggestion, this is how a typical entry appears now:

<div class="link_entry">
    <div class="link_actions left">
        <span class="LibraryItemDelete">
            <img src="images/ajax-urls/delete_icon.png" title="Delete this link" alt="Delete this link">
        </span>&nbsp;
        <span class="LibraryItemEdit">
            <img src="images/ajax-urls/edit_icon.png" title="Edit this link" alt="Edit this link">
        </span>
    </div><!-- /link_actions -->
    <div class="link right">
        <input type="hidden" value="92" name="id" class="table_id">      
        <a href="http://www.somewhere.com">somewhere.com</a>
    </div><!-- link -->
</div><!-- /link_entry -->

The js/jQuery:

$(document).on('click', '.LibraryItemEdit', function() {
    var url_id = $(this).find('.table_id').val();
    ....
}

Still seeking an answer.

[JorgeM]

Here is a slightly different way of going about this...

See jsfiddle demo >> http://jsfiddle.net/dQ7E2/1/

in this example, i removed the spans, and used the click event on the .LibraryItemEdit selector AND if this structure will be the same throughtout the page, you can navigate two up then search for the hiddent element with the Div. get the value from that hiddent element and assign it to the variable.

[dwlamb]

I modified what was shared from JorgeM. This is what I am working with:

<p class="link_entry">
    <img alt="Delete this link" title="Delete this link" src="images/ajax-urls/Cross-icon-24-pixels.png" class="LibraryItemDelete">
    <img alt="Edit this link" title="Edit this link" src="images/ajax-urls/Actions-document-edit-icon-24-pixels.png" class="LibraryItemEdit">
    <input type="hidden" class="tableid" name="id" value="1">
    <a href="http://whoknows.com">Huh ?</a>
</p>

This is the javascript:

$(document).on('click', '.LibraryItemEdit', function() {
    var url_id  = $(this).parent().find('.tableid').val();
    }):

It works as intended with a slight difference. In my original post, I had more div`s so that I could have hanging paragraph effect. The icons would be a flush left and the url or anchor text whould not be under the icons if it wrapped to a new line. I have a similar effect with p tags and this css:

p.link_entry {
    margin-left:    4em;
    text-indent:    -4em;
}