Get input value on button click

Question

I am trying to get the value of a input when a button is clicked

This is the code:

HTML:

<li class=" qq-upload-success">
    <span class="qq-upload-image">
        <img src="b50.jpg">
    </span>
    <span class="qq-upload-remover btn btn-danger">
         <a href="#"><li class="icon-trash icon-white"></i> Remover</a>
    </span>
    <input type="hidden" name="imagens[]" value="b50.jpg">
</li>

jQuery:

$('.qq-upload-remover a').live("click", function(event){
    event.preventDefault();
    //var elem = $(".qq-upload-remover");
    //var linkrev = $(this).next().attr('value');
    //alert (linkrev);
    var linha = $(this).parent().parent().fadeOut('slow', function(){
            //$.post('acoes.php?Acao=11&AnuncioFoto_Id='+id);
            if($(".qq-upload-list .qq-upload-success:visible").length == 0){
                $(".qq-upload-list .enviar").remove();
            }
    });
});

When I click qq-uplod-remover I want to get the input value b50.jpg.

I have multiple li like this on same page.

I tried on qq-upload-remover click get $(this).next().attr('value'), but it doesn't work.

Answer 1

Try it as below,.

<script type="text/javascript">

    $(function()
    {
        $('span.qq-upload-remover a').on('click',function(e){
            //e.preventDefault(); to stop default behaviour
            //e.stopPropagation(); to stop bubbling

            alert($(this).parent().parent().find('input:hidden').val());
        });
    });

</script>

<li class=" qq-upload-success">
    <span class="qq-upload-image">  <img src="b50.jpg"></span>
    <span class="qq-upload-remover btn btn-danger">
        <a href="#">
            <i class="icon-trash icon-white"></i> Remover
        </a>
    </span>
    <input type="hidden" name="imagens[]" value="b50.jpg">
</li>

Answer 2

$(".qq-upload-remover").click(function(){
   var data = $("input[name^='imagens[]']");
   $.each(data, function(key, object) {
        alert(object.value); 
   });  
});

This code is tested.

Answer 3

try this: jsfiddle

$('.qq-upload-remover a').click(function(){
   alert($(this).parent().siblings('input').val());
});