CODEWITHSUNDEEP
javascriptjquery
kumar91
kumar91

Reputation: 53

Find auto generated id of textbox on button click

<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?

Upvotes: 1

Views: 1463

Answers (7)

Mayank
Mayank

Reputation: 1392

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 .....

Upvotes: 1

guest271314
guest271314

Reputation: 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>

Upvotes: 1

user2575725
user2575725

Reputation:

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>

Upvotes: 0

Brownman Revival
Brownman Revival

Reputation: 3850

FIDDLE

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

Upvotes: -1

Jakir Hossain
Jakir Hossain

Reputation: 2517

Please replace your code with my code where just add prev() function.

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

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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");

Upvotes: 0

Online-Free-Tools.com
Online-Free-Tools.com

Reputation: 114

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 ?

Upvotes: 0

Related Questions