Question

I have the following code, which works fine in FF, but the .append() function s cauding an error in IE. Is anyone able to tell me if there is anything wrong with my code, or if this is an IE problem?

The purpose is to add a hidden field to a form (will be different depending on what the user clicks), and I then submit the form.

$(function(){

    $('a.js-make-profile-image').click(function(){
        $('.append-here').append('<input type="hidden" name="action-type" value="profile-image" />');
        document.forms['attachment-action-form'].submit();
    });

});

The IE debugger is giving the error Unexpected call to method or property access, and this text is being hightlighted within jQuery by the debugger – this.nodeType===1&&this.appendChild(a).

Answer 1

1) you have an extra ;

$('a.js-make-profile-image').click(function(){;

at the end of this line.
if this don’t solve your problem please update your question with the error reported by IE

2) I think you could also have a conflict due to the value of your name attribute.

You have both a type attribute and name="type":
since you can usually access to a DOM element also via <element>.<name> what exactly <input>.type should returns? The element type attribute value or a reference to the input element into the DOM?

so try to change the name attribute value

3) if nothing has changed yet just try to change the code

$('.append-here').append('<input type="hidden" name="type" 
                           value="profile-image" />');

in

$('<input />').attr({
    "type"  : "hidden",
    "name"  : "action-type",
    "value" : "profile-image"
}).appendTo($('.append-here'));

and, as you discovered, be sure that the element append-here is not an empty element.