How can I make this jQuery work in IE explorer?

Question

Working with the following code to dynamically change the submit buttons to image based buttons.

marker2 = jQuery('<span class="marker"> </span>').insertBefore('input#ResetDatesButton');
jQuery('input#ResetDatesButton').detach().attr('type', 'image').attr('src',theme_folder+'/style/images/ResetDatesButton.png').insertAfter(marker2);
marker2.remove();

This works beautifully in FF, Chrome and Safari but fails totally in IE6, 7 and 8. Then button is removed, but not replaced. How can I achieve the same result in IE?

I have edited the question to show current position clearer. — Mild Fuzz, May 03 '11 at 15:24
I am creating a new element, not selecting any one element in particular. — Mild Fuzz, May 03 '11 at 15:35
@Mild Fuzz, you isn't creating a new element. You is *detaching* the button (wich removes it from the DOM, but don't destroy it data from memory), changing it type (**wich causes the problem, since IE doesn't allow it**), changing it image `src` and again reinserting it to the DOM. — Erick Petrucelli, May 03 '11 at 17:21

score 3 · Accepted Answer · answered May 03 '11 at 15:37

3

IE doesn't allow you to dynamically change the type attribute of form inputs. The only option you have is to delete the element and replace it with a new one of the correct type,

answered May 03 '11 at 15:37

herostwist

3,362
1
22
32

I thought that was what, for all intents and purposes, this was doing? – Mild Fuzz May 03 '11 at 15:39
1

Like I pointed, he had other options using CSS only or both CSS with jQuery to put something that you trigger the input click while the input stays hidden. – Erick Petrucelli May 03 '11 at 15:40
@Mild Fuzz - in your code your removing the element from the dom, editing it and then adding it back. for ie, you will need to delete the element, create a completely new one and then insert that. – herostwist May 03 '11 at 21:41
here's a working example of changing type text to password: http://jsfiddle.net/9Bhya/ – herostwist May 03 '11 at 21:55

score 1 · Answer 2 · edited May 23 '17 at 10:24

1

Internet Explorer doens't allow input[type] changes on the fly. Here is another thread discussing it: change type of input field with jQuery

Then, jQuery can do nothing to it works.

You will to:

Use CSS on your input[type=button] to show the image you want and hide the text.
Or hide the input, put an a tag with the image you want and set the click() to call the input.click().

EDIT:

Here is a little sample showing how to replace the input[type=button] with another control (you can use CSS to show it how you want) and then trigger the button click as well.

edited May 23 '17 at 10:24

Community

1
1

answered May 03 '11 at 15:35

Erick Petrucelli

12,410
7
58
77

1

Also, is a good pratice to leave comments when downvoting, show to the question's author why this answer is incomplete. – Erick Petrucelli May 03 '11 at 15:50

How can I make this jQuery work in IE explorer?

2 Answers2