Function not working in IE, please help

JavaScript
1

Hi Guys!

This function I wrote is working fine in FireFox and Chrome, but does not work in IE. Any ideas what could be wrong?

The error I get in IE is:

Message: This command is not supported


function saveloc(postcode,display,mode,type)
{
	if(mode == '2')
	{
		if(type == 'postcode')
		{
			$("<input />").attr("id","pc_hidden").attr("type","hidden").attr("name","postcode").attr("class","savedloc").val(postcode).appendTo("#saved_locations");
			$("#location_ajax_search").val(display);
			$("#location_results").hide();
			$("#location_ajax").val("");
		} else
		{
			$("<input />").attr("id","county_hidden").attr("type","hidden").attr("name","county").attr("class","savedloc").val(display).appendTo("#saved_locations");
			$("#location_ajax_search").val(display);
			$("#location_results").hide();
			$("#location_ajax").val("");
		}
	} 
	else
	{
		var hiddenfields = $(".savedloc").length;
		
		if ($('#pc_hidden_' + postcode).length) 
		{ 
			alert("You have already selected this postal area.");
			$("#location_results").hide();
			$("#location_ajax").val("");
			return false;
		}
		if(hiddenfields < 5)
		{
			$("<input />").attr("id","pc_hidden_" + postcode).attr("type","hidden").attr("name","location[]").attr("class","savedloc").val(postcode).appendTo("#saved_locations");
			$("<input />").attr("id","pc_html_" + postcode).attr("type","hidden").attr("name","display_location[]").val(postcode + "|" + display).appendTo("#saved_locations_html");
			$("#location_results").hide();
			$("#saved_locations_html").append('<div class="sl_block" id="pc_display_' + postcode + '">' + display + ' <a onClick="removeloc(\\'' + postcode + '\\')">(remove)</a></div>');
			$("#location_ajax").val("");
		} else
		{
			alert("You can only add a maximum of 5 locations.");
			$("#location_results").hide();
			$("#location_ajax").val("");
			return false;
		}
	}
}
2

Could you please explain the error a little more as what you posted doesn’t help as to where the error is occurring, on another note the code above is very redundant as your chaining a lot of your attr methods which can be merged into one method with an object as the value. See the below code which is a little longer but is more efficient:

function saveloc(postcode, display, mode, type)
{
    if (mode == 2)
    {
        if (type == 'postcode')
        {
            var id   = 'pc_hidden',
                name = 'postcode',
                val  = postcode;
        }
        else
        {
            var id   = 'country_hidden',
                name = 'country',
                val  = display;
        }

        $('<input />', {
            id      : id,
            type    : 'hidden',
            name    : name,
            'class' : 'savedloc'
        }).val(val)
          .appendTo('#saved_locations');
        
        $('#location_ajax_search').val(display);
        $('#location_results').hide();
        $('#location_ajax').val('');
    } 
    else
    {
        var hiddenfields = $('.savedloc').length;

        if ($('#pc_hidden_' + postcode).length) 
        { 
            alert('You have already selected this postal area.');
            $('#location_results').hide();
            $('#location_ajax').val('');
            return false;
        }

        if (hiddenfields < 5)
        {
            $('<input />', {
                id      : 'pc_hidden' + postcode,
                type    : 'hidden',
                name    : 'location[]',
                'class' : 'savedloc'
            }).val(postcode)
              .appendTo('#saved_locations');
            
            $('<input />', {
                id      : 'pc_html' + postcode,
                type    : 'hidden',
                name    : 'display_location[]',
                'class' : 'savedloc'
            }).val([postcode, display].join('|'))
              .appendTo('#saved_locations_html');
            
            $('#saved_locations_html').append(
                '<div class="sl_block" id="pc_display_' + postcode + '">' + display + ' <a onclick="removeloc(\\'' + postcode + '\\')">(remove)</a></div>'
            );

            $('#location_results').hide();
            $('#location_ajax').val('');
        }
        else
        {
            alert('You can only add a maximum of 5 locations.');
            $('#location_results').hide();
            $('#location_ajax').val('');
            return false;
        }
    }
}
3

This is not my area but isn’t the problem that you can’t change the type attribute of inputs in IE.

http://api.jquery.com/attr/
http://webbugtrack.blogspot.com/2007/09/bug-237-type-is-readonly-attribute-in.html

4

Yes that is correct, IE doesn’t allow that. At least legacy IE doesn’t, I haven’t tried it in newer versions yet.

The way around this is to create a new input element and copy the values you need fro the original element to the new one, and then remove the old one.

5

Thanks Remon - I thought I was on the right track :slight_smile:

6

The above code is actually creating input elements on the page, I’m aware of the IE issues surrounding input types which I more then likely would have explained if the code were trying to change the type attribute.

Isn’t JS fun :slight_smile:

Sent from my iPhone using Tapatalk