Find auto generated id of textbox on button click

Question

<td id="RB_0_val_1">
<label for="RB_0_value_field_1" style="display:none;">Field   Value</label>   
<input type="text" id="RB_0_value_field_1"></td>
<td id="RB_0_extra_1"><input type="button" value="Select.." id="File"></td>

Now i need to find the id of textbox on th click of button.So i am using

 var  textboxid=$('input[id="File"]').closest('input[type="text"]').attr("id");

but value returned is undefined. The id of the textbox is auto generated so i need to find the id on the click of the button. How to do this?

Answer 1

Try utilizing .parentsUntil , :has()

 $("#File").click(function() { var textboxid = $(this).parentsUntil("td:has(:text)").find(":text").attr("id") console.log(textboxid) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tbody> <tr> <td id="RB_0_val_1"> <label for="RB_0_value_field_1" style="display:none;">Field Value</label> <input type="text" id="RB_0_value_field_1"> </td> <td id="RB_0_extra_1"> <input type="button" value="Select.." id="File"> </td> </tr> </tbody> </table> 

Answer 2

请用我的代码替换您的代码，只需添加prev（）函数。

var textboxid=$('input[id="File"]').prev().closest('input[type="text"]').attr("id");

Answer 3

You can use jquery .prev() api, for doing that. Try the FIDDLE

Javascript code

$(document).ready(function(){
    $('#File').click(function(e){
        console.log($(this).prev('input[type=text]').prop('id'));
        alert($(this).prev('input[type=text]').prop('id'));
        e.preventDefault();
    });
});

EDIT : For Updated markup provided in FIDDLE , I have used .closest() .prev() and .find() jquery api

    $(document).ready(function () {
        $('#File').click(function (e) {
               var id = $(this).closest('td').prev('td').find('input[type=text]').prop('id');    
               alert(id);
               e.preventDefault();
        });
    });

Hope this helps .....

Answer 4

I assume that the tds are inside a tr.

You can make this selector

var  textboxid=$('input#File').parents('tr').find('label + input').attr("id");

Answer 5

Try this maybe (haven't tried it) :

var textboxid = $('#File').parent().find('input[type=text]').first().attr("id");

Should it be triggered by a click or something ?

Answer 6

Problem is the text box is in different td, try this:

 $(function() { $('#File').on('click', function() { alert($(this).parent().prev('td').children('input[type=text]').prop('id')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table> <tr> <td id="RB_0_val_1"> <label for="RB_0_value_field_1" style="display:none;">Field Value</label> <input type="text" id="RB_0_value_field_1"> </td> <td id="RB_0_extra_1"> <input type="button" value="Select.." id="File"> </td> </tr> </table> 

Answer 7

FIDDLE

 $$(document).on('click', '#File', function() {
var qwe = $(this).parent().parent().find('input[type="text"]');
            alert(qwe.attr('id'));
    });