The Netlobo logo - a Nevada desert landscape

Internet Explorer form.submit() Error

Invalid syntax error when using form.submit() to submit a form in IE using javascript

Published Apr 1, 2006 by lobo235
Last updated on Jul 3, 2007

I ran into a problem the other day that took me quite a while to figure out. I had a very large form with about 90 checkboxes and some other fields. I used javascript to validate the form and then submit the form using the form.submit() javascript method. This was all working fine in Mozilla Firefox but when I tested it in Internet Explorer I got an "Invalid Syntax" error every now and then.

The error would pop up if I selected all or most of the checkboxes in the form. Come to find out, there is a limit in IE to the number of characters it will send in a "GET" request. I found this Microsoft support article that explains what the limits are. In short, the maximum URL size in IE is 2,083 characters. If you are using the "GET" method in your HTML form then you are limited to 2,048 characters minus the length of the "path" part of the URL. So if your URL was http://www.somedomain.com/process_form.php which is 42 characters long then your max query value would be 2,048 - 42 or 2,006 characters.

So the reason for the "Invalid Syntax" javascript error in IE is that the form's key=value pairs exceed the maximum character limit that Internet Explorer imposes. Other browsers such as Mozilla Firefox are a bit more forgiving and that is why you don't get the same error.

The most obvious solution to this problem is to use the "POST" method for your form instead of the "GET" method as there is no limit to the size of the "POST" data in IE. Another solution would be to break your form up into multiple steps. Put some of the form on one page and then have it submit and save the data and then take the user to another page that has the rest of the form. Using "POST" is the wiser choice as it is a simpler solution that would require the least amount of time to implement. It also allows for more room for your form to grow should you decide to add some new fields to it in the future.

14 comments for this article.

del.icio.us logo add this article to del.icio.us! Other great Web Development and Programming articles on Netlobo.com:
Showing and Hiding a DIV using CSS and Javascript
Javascript document.getElementsByClassName
A DIV Border Using line.gif