Finding the subtype of an HTML form element using jQuery

Question

I'm trying to use jQuery (version 1.4+) to determine the specific type of an input element on a form. I've already seen how to determine the element type using jQuery, as described in these Questions:

Get element type with jQuery finding the type of an element using jQuery How to find element type in JQuery

...using script similar to this:

var btn_submit = $(calendar_box).find('input[name="submit"]');
var elementType = btn_submit.prop('tagName');

This does work. However, my question is a bit more specific. I have a check_form function that enables the Submit button only when the required fields are filled out; if the submit button is a standard form button, it removes the "disabled" attribute, and if the button is an image, it swaps in an "enabled" version of the image. The problem is that for either type of button, elementType always comes back as INPUT. I need to be able to distinguish between the two kinds of input so that I can take the proper action with respect to enabling the button.

Is there a way to use jQuery to find the subtype of an element? Seems to me that elementType will be INPUT regardless of whether I'm examining a textbox, a button, or an image.

edit

Sorry about leaving out the HTML.

For the HTML button case, it looks like:

<input type="button" id="submit" name="submit" value="COMPUTE CALENDAR" onkeypress="return handle_key_press_box(event);" onclick="submit_form();" disabled="disabled" />

I've also used an image like this:

<input type="image" id="submit" name="submit" onkeypress="return handle_key_press_box(event);" onclick="submit_form();" disabled="disabled" />

...and like this...

<a href="javascript:submit_form();"><img src="../images/favicon.ico" onkeypress="return handle_key_press_box(event);" /></a>

When I use the link approach, I get 'null' for the elementType value. I suppose I can use this in my function logic, but it seems less than optimal, somehow.

Thanks in advance.

edit

That works, Ejay. attr('type') still returns null for an anchor tag, but it does distinguish properly between image and button types. I'm marking this as Answered!

You can access element attributes like `btn_submit.attr('type')`. I could post a solution if you included your HTML too — Ejaz, Apr 26 '13 at 14:52
That works, Ejay. attr('type') still returns null for an anchor tag, but it does distinguish properly between image and button types. I'm marking this as Answered! — Byff70, Apr 26 '13 at 15:25
Actually, Ejay, you'll have to post it as an answer rather than a comment, I think, unless you want me to steal your credit by posting the answer myself! Thanks again. — Byff70, Apr 26 '13 at 15:28

Ejaz · Accepted Answer · 2013-04-26T16:04:58.123

Here goes :)

You can access element attributes using $(element).attr('arrtibute_name'). In you case, you could distinguish between an image button and simple button by

var btn_submit = $(calendar_box).find('input[name="submit"]');
if(btn_submit.attr('type') == 'image'){
    //this is image button
}
else if(btn_submit.attr('type') == 'button'){
    //this is a simple button
}
//in case you're expecting <a> tags too
else if(btn_submit.prop('tagName') == 'A'){
    //this is an anchor tag
}

You can read more about jQuery .attr() here

Finding the subtype of an HTML form element using jQuery

1 Answers1