Get the input type by passing its ID

Question

So I am trying to pass an input ID and get its corresponding type.

Eg.

<input id = "1" type = "date"/>
<input id = "2" type = "text"/>

So passing "1" would return date and passing "2" would return text.

I have looked at a few examples but none that work for my case:

How to use jquery selector having element type and ID

finding the type of an element using jQuery

What I have so far:

$("#my_select").on('click',function(){
        var fieldID = document.querySelector('.selected').id
        console.log("id is " + fieldID);
        var elementType = $(this).prev().prop('.selected');
        console.log("element type " + elementType)
});

are the ids unique in whole document? – juvian Jul 17 '17 at 16:22 — juvian, Jul 17 '17 at 16:22

score 5 · Accepted Answer · answered Jul 17 '17 at 16:22

5

var type = $("#id").attr("type");

Should do it.

answered Jul 17 '17 at 16:22

DavidBittner

515
2
4
15

score 1 · Answer 2 · answered Jul 17 '17 at 16:23

You can do it this way.

$("#my_select").on('click',function(){
            var fieldID = document.querySelector('.selected').id
                console.log("id is " + fieldID);
            var elementType = $('#' + fieldID).prop('type');
            console.log("element type " + elementType)

        });

score 1 · Answer 3 · answered Jul 17 '17 at 16:26

Possible solution.

$("#my_select").on('change', function() {
  var fieldID = document.getElementById($(this).val());
  console.log(`id is ${fieldID.id} and type is ${fieldID.type}`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="1" type="date" />
<input id="2" type="text" />
<select id='my_select'>
  <option value='1'>1</option>
  <option value='2'>2</option>
</select>

score 0 · Answer 4 · answered Jul 17 '17 at 16:25

Here you go with the solution https://jsfiddle.net/bpq58x8m/

getType = function(id){
 console.log($('#' + id).attr('type'));
}

$('input').click(function(){
 getType($(this).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id = "1" type = "date"/>
<input id = "2" type = "text"/>

Click on the input will give you back the type. I added an extra function just for your reference, you can ignore that and combine two into a single.

Osama · Answer 5 · 2017-07-17T16:34:50.350

-1

$("#my_select").on('click',function(){
    var fields=$("#your-Form-Id").children();
    for(i=0;i<fields.length;i++){
        var type = field[i].type ||  field[i].tagName.toLowerCase();
        alert(type);
    }
});

Here it give you the type for input like radio text email or the tag name for other tags like textarea

edited Jul 17 '17 at 16:34

answered Jul 17 '17 at 16:30

Osama

2,912
1
12
15

Get the input type by passing its ID

5 Answers5