jQuery removeAttr('type') doesn't work

Question

My problem is very simple

$('#button').removeAttr('type');

triggers an error on firebug

type property can't be changed

I have 2 questions:

How to get around this?
Is there a reference with a list of properties that can't be changed?

Thanks

EDIT

What I want to do is:

Prevent the button from submitting the form.

Note: my button is included as a html template, the form code is not accessible form me.
Something like:

include 'form.php';
include 'buttons.php';

where I have control only on buttons.php

Since you can't change the type of an element, you will have to replace it with a new element. — Darin Dimitrov, Jun 14 '12 at 11:22
Good idea to ask about your actual problem from the start. See *[XY Problem](http://www.perlmonks.org/?node_id=542341)* — , Jun 14 '12 at 12:04

Esailija · Accepted Answer · 2012-06-15T10:12:27.307

17

You can't change an input's type in IE (<9?) after it has been inserted into the DOM. jQuery raises an error for all browsers because of this.

From source:

    set: function( elem, value ) {
            // We can't allow the type property to be changed (since it causes problems in IE)
            if ( rtype.test( elem.nodeName ) && elem.parentNode ) {
                jQuery.error( "type property can't be changed" );

There are no other cases I know about (or jQuery knows about) and how to get around this depends a lot on what you are trying to do in the first place. Consider creating a new element with different type and using that for example.

Edit: To prevent the button from submitting a form, you can use:

$("#button").click(function(e){
    e.preventDefault();
});

Or (credit Tim Down):

$("#button").prop("disabled", true);

To prevent form from being submitted through any means, you can use:

$("#form").submit(function(e){
    e.preventDefault();
});

edited Jun 15 '12 at 10:12

answered Jun 14 '12 at 11:19

Esailija

138,174
23
272
326

3

Setting the button to be disabled would seem to be a better option. It's simpler and provides feedback to the user. `$("#button")[0].disabled = true;` – Tim Down Jun 14 '12 at 11:31
@TimDown indeed and makes the button unavailable through tabbing etc. :) thanks for the idea – Esailija Jun 14 '12 at 11:34
Disabling the button is not possible, because other function will be bound to it – ilyes kooli Jun 14 '12 at 12:37
Doesn't returning false also prevent the form from being submitted? Both in form submit and button click. Is `e.preventDefault()` better in some way? – Svish Jun 14 '12 at 14:49
@Svish when you `return false` from jQuery event handler, it will call `e.preventDefault()` as well as `e.stopPropagation()`. From jQuery source: `if ( ret === false ) { event.preventDefault(); event.stopPropagation(); }` – Esailija Jun 14 '12 at 15:21

score 6 · Answer 2 · answered Jun 14 '12 at 11:27

6

you can replace it:

$('#button').replaceWith('<input type="text" value="text"/>');

or use event.preventDefault()

answered Jun 14 '12 at 11:27

Ram

143,282
16
168
197

Great suggestion - and a nice alternative to simply changing the `type` - and (though this may or may not be a benefit) - this will also remove any other button handlers. – Troy Alford Jul 24 '12 at 22:24

score 1 · Answer 3 · edited May 23 '17 at 11:49

1

Since you just want to disable the submit button:

If you are using jQuery < 1.6 do this:

$("#button").attr("disabled", 'disabled');

If you are using jQuery 1.6+:

$("#button").prop("disabled", true);

See this question: .prop() vs .attr() for references why.

edited May 23 '17 at 11:49

Community

1
1

answered Jun 14 '12 at 11:33

Rumplin

2,703
21
45

jQuery removeAttr('type') doesn't work

3 Answers3

Linked

Related