How to get the specific input id that the user clicked on it

I have a form with some text inputs and one choice of parameters, and I want to warn the input identifier when the user pre-generates an up event or changes the selection in the selection parameters.

What is the best way to do this? right now i am writing a function for each :(

my bad code is:

$( "#target" ).keyup(function() { alert( this.id ); }); 

this is my form:

 <form> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control input-lg" name="FirstName" id="FirstName" placeholder="First Name" maxlength="45" required=""> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control input-lg" name="LastName" id="LastName" maxlength="45" placeholder="Last Name" required=""> </div> </div> <div class="col-sm-12"> <div class="form-group"> <input type="email" class="form-control input-lg" name="Email" id="Email" maxlength="255" placeholder="Email Address" required=""> </div> </div> <div class="col-sm-12"> <div class="form-group"> <input type="password" id="Password" name="Password" maxlength="32" class="form-control input-lg" placeholder="Password" required=""> </div> </div> <div class="col-sm-12"> <div class="form-group"> <select id="countryData" class="form-control bfh-countries" data-country="US"> <option value=""></option> <option value="AF">Afghanistan</option> <option value="BR">Brazil</option> </select> </div> </div> </form> 
+5
source share
1 answer

You can use the input event for the input fields and change the event for the selected fields:

 $(function () { $("input").on('input', function() { console.log( this.id ); }); $("select").on('change', function() { console.log( this.id ); }); }); 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <form> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control input-lg" name="FirstName" id="FirstName" placeholder="First Name" maxlength="45" required=""> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control input-lg" name="LastName" id="LastName" maxlength="45" placeholder="Last Name" required=""> </div> </div> <div class="col-sm-12"> <div class="form-group"> <input type="email" class="form-control input-lg" name="Email" id="Email" maxlength="255" placeholder="Email Address" required=""> </div> </div> <div class="col-sm-12"> <div class="form-group"> <input type="password" id="Password" name="Password" maxlength="32" class="form-control input-lg" placeholder="Password" required=""> </div> </div> <div class="col-sm-12"> <div class="form-group"> <select id="countryData" class="form-control bfh-countries" data-country="US"> <option value=""></option> <option value="AF">Afghanistan</option> <option value="BR">Brazil</option> </select> </div> </div> </form> 
+2
source

All Articles