Changing Attributes for two inputs fields

Question

I'm have some problems to add attributes to these input fields using jQuery:

<input id='timetable_start'>
<input id='timetable_finish'>

<script>
attributes = {
    "class": "reloj",
    "maxlength": "5",
    "pattern": "^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$",
    "size": "6",
    "type": "text"
};

$('#timetable_finish').attr(attributes);
$('#timetable_start').attr(attributes);
</script>

Why only one is changed? What I'm missing? Thanks in advance for you time
Link: http://jsbin.com/iqipan/4/edit

When you say "Why only one is changed?" do you mean only one attribute, or only one element? — Anthony Grist, Jan 31 '13 at 16:18

score 6 · Accepted Answer · edited May 23 '17 at 10:24

Because the code throws an error when you are trying to set the attributes for the first input field:

Uncaught Error: type property can't be changed.

Remove type from the object and everything will be fine.

Some browsers (I guess IE) don't allow to change the type of an input element after it was created, so jQuery throws an exception if you are trying to do that. See change type of input field with jQuery.

Explosion Pills · Answer 2 · 2013-01-31T16:20:16.793

3

Use

$("#timetable_finish, #timetable_start").attr(attributes);

However, you can't change the type property of inputs. You would have to create a new input instead:

$("#timetable_finish").replaceWith($("<input>", attributes));

edited Jan 31 '13 at 16:20

answered Jan 31 '13 at 16:19

Explosion Pills

176,581
46
285
363

score 3 · Answer 3 · answered Jan 31 '13 at 16:20

3

This is because the attribute type is read-only - whereas the DOM property type is not.

You can use:

$('#timetable_finish').prop(attributes);
$('#timetable_start').prop(attributes);

to successfully change both.

answered Jan 31 '13 at 16:20

techfoobar

61,046
13
104
127

Ha, I didn't know the property can be changed... still, it does not mean you should do that ;) – Felix Kling Jan 31 '13 at 16:22
@FelixKling - I thought it couldn't be. Till about 6 mins back. :-) – techfoobar Jan 31 '13 at 16:26
1

@Christian_Espinoza - This will likely fail in IE. Atleast older versions. – techfoobar Jan 31 '13 at 16:26

Changing Attributes for two inputs fields

3 Answers3