How to get ID of input field from form using jQuery element selector

Question

I have form with each input field unique id and I have attached jquery on 'input' to form. I want to get id of field on which user change some value using jquery function. I am missing some puzzle in following code in alert(".... statement

 $(document).ready(function () {

    $("#CreateStudentProfileForm").on('input', function () {

        alert($(this).find().closest().attr('id'));

    });

});

html form

<input class="form-control text-box single-line valid" data-val="true" data-val-number="The field Student UWL ID must be a number." data-val-range="Only Number Allowed" data-val-range-max="2147483647" data-val-range-min="0" data-val-required="Require Your Student UWL ID" id="StudentNumber_UWLID" name="StudentNumber_UWLID" value="" type="number">

I have many instances of input field like above

Answer 1

How about if you attach the event to each field individually?

 $(document).ready(function () { $("#CreateStudentProfileForm").find("input,textarea,select").on('input', function () { alert(this.id); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="CreateStudentProfileForm"> <input type="text" id="input1"> <input type="text" id="input2"> <input type="text" id="input3"> </form> 

Answer 2

if you want to track the change event for an input use change event

   //assuming you input id is CreateStudentProfileForm
   $("#CreateStudentProfileForm").on('change', function () {
    alert(this.id) //should give you the changed input id
    //alert($(this).find().closest().attr('id'));

   });

keyup is better

  $("#CreateStudentProfileForm").keyup(function () {
    alert(this.id)
    //alert($(this).find().closest().attr('id'));

});

updated

this gets all the input present in you form specified by id CreateStudentProfileForm and adds keyup event to track the changes.

//assuming CreateStudentProfileForm is form's ID
$("#CreateStudentProfileForm:input").keyup(function () {
    alert(this.id) //should give you the changed inputs id
    //alert($(this).find().closest().attr('id'));

   });

Answer 3

$('#CreateStudentProfileForm').on('change keyup','input', function(){
  var id = $(this).attr('id')
})

"id" is the id you want...

Answer 4

Use either:

this.id;

Or get:

$(this).attr("id");

Answer 5

Supposing you have a similar HTML

<form id="CreateStudentProfileForm">
  <input type="text" id="input1">
  <input type="text" id="input2">
  <input type="text" id="input3">
</form>

Then you can do something like

$('#CreateStudentProfileForm > input').on('input change', function () {
    alert($(this).attr('id'));
});

Note that this event will fire on both input and change . You may want to fire it only on change OR input, depending on what you need to do.

Answer 6

$（document）.ready（function（）{$（“＃CreateStudentProfileForm”）。find（“ input”）。on（'input'，function（）{var get_id = $（this）.attr（'id'） ;}）;}）

Answer 7

do something like this http://jsfiddle.net/elviz/kqvdgrmk/

$(document).ready(function(){

  $("#CreateStudentProfileForm input").keyup(function(){

    alert(this.id);    
  });

});