Get id from class selector from input type select with jQuery

Question

I have the next html:

<select class="input-types" id="input-type-1" name="input-type-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select class="input-types" id="input-type-2" name="input-type-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select class="input-types" id="input-type-3" name="input-type-3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

And I want to get the ID from the class selector with jquery. For that I used the code:

$('.input-types').change(function(){
    console.log(this.id);
});

The problem is that it shows the ID in console only when I change the first select. If I change the 2nd or 3rd select it doesn't show anything. How can I take the ID for every select?

EDIT

 <html> <head> <title>Forms Generator</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> .default-value{ display: none; } </style> </head> <body> <form method="POST" action="" id="create-form"> <div class="fields"> <div id="clone-1"> <h3 id="field-title">Field 1</h3> <div class="input-type"> <label for="input-type-1">Input Type</label><br> <select class="input-types" id="input-type-1" name="input-type-1"> <option value="">Select an Option</option> <option value="text">Text</option> <option value="select">Select</option> <option value="checkbox">Checkbox</option> <option value="radio">Radio</option> <option value="password">Password</option> <option value="textarea">Textarea</option> <option value="submit">Submit Button</option> <option value="hidden">Hidden</option> </select><br><br> </div> <div class="label"> <label for="label-1">Label</label><br> <input type="text" name="label-1" id="label-1"><br><br> </div> <div class="default-value"> <label for="default-value-1">Default Value</label><br> <input type="text" name="default-value-1" id="default-value-1"><br><br> </div> <hr> </div> </div> <input type="submit" value="Create"> </form> <a href="#" id="new-field">Camp Nou</a> <script> $(document).ready(function(){ var index = 2; $('#new-field').click(function(){ var $div = $('div[id^="clone"]:last'); var $clone = $div.clone().prop('id', 'clone-'+index ); $div.after( $clone ); var $inputType = $('select[id^="input-type"]:last'); $inputType.prop('id', 'input-type-'+index ); $inputType.prop('name', 'input-type-'+index ); var $label = $('input[id^="label"]:last'); $label.prop('id', 'label-'+index ); $label.prop('name', 'label-'+index ); var $defaultValue = $('input[id^="default-value"]:last'); $defaultValue.prop('id', 'default-value-'+index ); $defaultValue.prop('name', 'default-value-'+index ); var $title = $('h3[id^="field-title"]:last'); $title.text('Field '+index) index++; }); $('.input-types').on('change', function(){ console.log(this.id); /*if($('.input-types').val() == 'text' || $('.input-types').val() == 'textarea' || $('.input-types').val() == 'hidden' || $('.input-types').val() == 'submit') { $('.default-value').show(); } else { $('.default-value').hide(); }*/ }); }); </script> </body> </html>

I've created a code snippet with all my code and it doesn't work. Mybe someone can tell me where is the problem. Thank you!

Answer 1

You need to try

$(document).on('change','.input-types', function(){

instead of

$('.input-types').change(function(){

For more explanation you can take a look at Event binding on dynamically created elements?

Answer 2

does this work?

$('.input-types').change(function(event){
    console.log(event.target.id);
});

or maybe this...

$('.input-types').change(function(){
    console.log($(this).attr('id'));
});

Answer 3

Instead of change , you need to use on('change', function()

 $('.input-types').on('change', function() { console.log(this.id); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="input-types" id="input-type-1" name="input-type-1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <select class="input-types" id="input-type-2" name="input-type-2"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <select class="input-types" id="input-type-3" name="input-type-3"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select>

Get id from class selector from input type select with jQuery

Question

3 answers

solution1
1 ACCPTED 2018-03-26 06:53:28

solution2
0 2018-03-26 04:14:05

solution3
0 2018-03-26 04:17:25

Get id from class selector from input type select with jQuery

Question

3 answers

solution1 1 ACCPTED 2018-03-26 06:53:28

solution2 0 2018-03-26 04:14:05

solution3 0 2018-03-26 04:17:25

solution1
1 ACCPTED 2018-03-26 06:53:28

solution2
0 2018-03-26 04:14:05

solution3
0 2018-03-26 04:17:25