Why can't I change the type of an input element to submit?

Question

I'm calling this function:

function submit_button(button_id){
    $('#' + button_id).attr('type', 'submit');
}

to make this button type = submit instead of button.:

<input  name="confirm_button" id="confirm_button" type="button" value="Confirm" class="login_btn" />

and I get this error (in firefox):

uncaught exception: type property can't be changed

Are there any work arounds?

adeneo · Accepted Answer · 2011-12-04T21:16:58.713

45

function submit_button(button_id){
    $('#' + button_id).prop('type', 'submit');
}

Be aware that this changes the type but not the value, so the button will still read "confirm".

A fiddle to prove it : http://jsfiddle.net/qeUxP/

edited Dec 04 '11 at 21:16

answered Dec 04 '11 at 21:11

adeneo

293,187
26
361
361

score 14 · Answer 2 · edited May 23 '17 at 10:29

14

Why jQuery won't allow you to just change the type attribute?

Because it causes problems in Internet Explorer.

More info at: change type of input field with jQuery

"Straight from the jQuery source":

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";

edited May 23 '17 at 10:29

Community

1
1

answered May 14 '12 at 03:52

J. Bruni

19,262
11
70
90

1

However, you can change the `type` with `prop`, will that cause issues in IE? – Hanna Aug 07 '13 at 23:00

score 5 · Answer 3 · edited Oct 27 '15 at 22:14

5

It worked finally , try finding the following:

   $("#confirm_button").each(function () 
   { this.type = "number"; });

edited Oct 27 '15 at 22:14

JOBG

4,364
4
23
47

answered Oct 23 '13 at 02:38

Basem Sayej

3,284
1
12
12

score 4 · Answer 4 · edited Feb 07 '14 at 21:53

4

Here's a workaround:

$('<input name="confirm_button" id="confirm_button2" type="submit" value="Confirm" class="login_btn" />').insertAfter('#confirm_button');
$('#confirm_button').remove();

edited Feb 07 '14 at 21:53

Alexis Wilke

15,168
8
60
116

answered Dec 04 '11 at 21:07

Candide

28,318
6
50
57

Perfect this will work fine. Does anyone know why jquery won't allow you to just change the type attribute though? – kmb64 Dec 04 '11 at 21:15
It will if you use the prop() method. – adeneo Dec 04 '11 at 21:17
3

Why not `replaceWith` instead of `insertAfter` and `remove`? – ThiefMaster Dec 04 '11 at 21:32
I was just trying to illustrate the general idea.x – Candide Dec 05 '11 at 01:47

score 3 · Answer 5 · answered Dec 04 '11 at 21:04

3

Why not just bind to the click event and call the form submit in your click handler?

answered Dec 04 '11 at 21:04

davidethell

10,959
5
37
59

score 2 · Answer 6 · edited Jul 20 '16 at 09:11

2

javascript:

function submit_button(){

      var btn=document.getElementById('button_id');
      btn.setAttribute('type', 'submit');

  }

======================================================================

Jquery:

function submit_button(){

 $('#' + button_id).prop('type', 'submit');

   }

======================================================================

edited Jul 20 '16 at 09:11

moffeltje

4,095
4
24
49

answered Sep 26 '13 at 06:47

saidesh kilaru

644
2
10
18

Rich O'Kelly · Answer 7 · 2011-12-04T21:33:06.027

0

The workaround is to create an element of the correct type, and replace the currently exisitng one.

However, in your example, a <button> element could serve the purpose of submitting the form, render as a button, and not require any javascript to do so, eg:

<button name="confirm_button" id="confirm_button" type="input" value="Confirm" class="login_btn" disabled />

And then to make the button enabled again:

$('confirm_button').removeAttr('disabled');

edited Dec 04 '11 at 21:33

answered Dec 04 '11 at 21:04

Rich O'Kelly

38,811
8
78
108

This button is hidden up until the user clicks another button. Then this button is shown so the user can click it to submit the form. The problem Im having is that this submit button is still triggered by pressing the enter key even when it is still hidden @davidethell – kmb64 Dec 04 '11 at 21:12
@davidethell, you could just add the `disabled` attribute to your hidden button. Answer updated. – Rich O'Kelly Dec 04 '11 at 21:34

Why can't I change the type of an input element to submit?

7 Answers7

javascript:

Jquery:

Linked