JQuery Solution to discover the Input field ID / Name value by clicking a button near the input field

Question

I've a form with a field where i can paste an image URL and a button on its right that when clicked will grab the field input value and open a window to preview the picture url.

This is the HTML part

    <!-- Article Featured Image URL -->
    <div class="form-group">
      <label class="col-md-2 control-label" for="ArticleFeaturedImageURL">Featured Image URL</label>  
      <div class="col-md-6">
      <div class="input-group">  
          <input id="ArticleFeaturedImageURL" name="ArticleFeaturedImageURL" maxlength="250" placeholder="Write an Image URL" class="form-control input-md" type="url" pattern="https?://.+" value="">
        <span class="input-group-btn">
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="openCustomRoxy2();"></span></button>
            <button type="button" class="imgurlview  btn btn-primary"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
        </span>
      </div>
      <span class="help-block">A featured image represent the contents, mood, or theme of a post and will be used to create the <b>Thumbnail</b>. If not specified will be used the first image present in the article (if is available). Use full URL starting with <b>http://</b> or <b>https://</b></span>    
      </div>
    </div>  

I use a jquery like:

$('.imgurlview').click(function(){
        alert($(this).prev('input').attr('id'));
});

I try to grab the field ID and then use it to open a window or doing other things. But when i click the button with imgurlview class, the alertbox show an "undefined" error.

Probably is a stupid and easy thing to fix but I've not find a way to use the imgurlview class in every button i want to find out the near input field name/id value.

Any help could be nice

Thanks

Answer 1

As your image url input has an id attribute you can just use that no?

$('.imgurlview').click(function(){
    var url = $('#ArticleFeaturedImageURL').val()
});

If for whatever reason you don't know what the id is going to be, and assuming the html structure is the same all the time...

$('.imgurlview').click(function(){
    var id = $(this).closest('.input-group').find('input').first().attr('id');
});

Answer 2

next() and prev() functions are used to "Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector"

Source

In your case the element you are trying to get is not the sibling of $('.imgurlview'). That is why it gives you undefined.

As Sean T suggested, you can use the id of element "ArticleFeaturedImageURL" to get the value of that element.