jQuery: Dynamic Form Creation/Submission – IE8 Bug

Jun27

I noticed a problem with IE8 today. I dynamically created a form and submitted it with jQuery. The form did not submit in IE8, but worked in all the other browsers that were tested (Firefox, Chrome, Safari). The code is quite simple:

?View Code JAVASCRIPT
jQuery('#btn_cancel_template').click(function() {
	var id = jQuery('#product_id').val();
	jQuery('#content').append(
		jQuery('<form></form').attr({'name': 'frmReturnToProductPages', 'id': 'frmReturnToProductPages', 'action': '/provisioning/product-pages', 'method': 'post'}).append (
			jQuery('<input></input>').attr({'type': 'hidden', 'id': 'product-pages-product-id', 'name': 'product-pages-product-id'}).val(id)
	));
});

Again, this worked fine in other browsers. Upon further inspection, I found that the IE8 seemed to strip the quotes from around the form attributes:

?View Code HTML
<form name=frmReturnToProductPages id=frmReturnToProductPages action=/provisioning/product-pages />

To fix the problem, I decided to add the form attributes after appending the form to the page.

?View Code JAVASCRIPT
jQuery('#btn_cancel_template').click(function() {
	var frm = jQuery('<form></form>').appendTo(jQuery('#content'));
	jQuery(frm).attr({'name': 'frmReturnToProductPages', 'id': 'frmReturnToProductPages', 'action': '/provisioning/product-pages', 'method': 'post'}).append (
		jQuery('<input></input>').attr({'type': 'hidden', 'id': 'product-pages-product-id', 'name': 'product-pages-product-id'}).val(id)
	).submit();
});

I tested this with the IE8 developer tools and the form submitted successfully. Enjoy.

Share