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

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

• javascript
• jquery

• 1 closest() what ? Maybe you just want event.target.id ? – adeneo Commented Jul 2, 2015 at 8:29
• find what and closest what? – Bhojendra Rauniyar Commented Jul 2, 2015 at 8:30
• may be you want $(this).attr('id') ??? – Bhojendra Rauniyar Commented Jul 2, 2015 at 8:31
• 1 As I see, this is not the plete HTML – Tushar Commented Jul 2, 2015 at 8:33
• @Tushar I think OP wants $(this).attr('id') – Bhojendra Rauniyar Commented Jul 2, 2015 at 8:34

7 Answers 7

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

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

"id" is the id you want...

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

   });

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

$(document).ready(function(){

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

    alert(this.id);    
  });

});

Use either:

this.id;

Or get:

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

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.

$(document).ready(function () {$("#CreateStudentProfileForm").find("input").on('input', function () {var get_id = $(this).attr('id');});});