Mar 28, 2016

Tales of an Internet Explorer: Form Submission

Kelleigh Maroney

Kelleigh Maroney

Default image background

Long ago, we lived in an age where we used VHS tapes to watch movies, CD players to listen to music, and Internet Explorer 9 and below to browse the Internet. Alas, these simple days have long passed. While antiquated technology like VHS tapes and CD players have been replaced with BluRays and iPods and phones, there still exist people who live in the dark-ages when it comes to their Internet browser. Modern web developers are forced to combat old versions of Internet Explorer on a daily basis.

My latest IE9 nightmare was with form submission. If you need to submit a form and you must support IE9, hopefully this post will lessen your pain and drastically reduce your development time.

First things first, IE9 does not support the modern concept of FormData. “The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to “multipart/form-data”.” – Mozilla FormData documentation

If you don’t need to support IE9, FormData is definitely the way to go for submitting forms to your API. But if you are supporting IE9, don’t bother; it won’t work.

Another issue to note with IE9 forms is the file input. In IE9, you cannot access the files the user has inputted from your JavaScript code. This means you also cannot see the size of the files inputted. Your API will have to do all the file validation for you. Plan on this when writing your front-end and API endpoints.

IE9 leaves us with no other option than to submit our forms the old-fashioned way. Below is a simple example of a form that is submitted through an iframe. The iframe is used to handle getting the response from the API call. No JavaScript code is required. Note that any other information you want to send to the API is most easily passed using hidden inputs on the form. Also take note of how an array of values is sent through an input.


<div> <script type="text/javascript"> var responseContent = ''; document.getElementById('submit-form-iframe').onload = function() { responseContent = document.getElementById('submit-form-iframe').contentWindow.document.body.innerHTML; // Your code for handling the response } </script> <iframe id="submit-form-iframe" name="submit-form-iframe" style="height:0px; width:0px; border:none"></iframe> <form id="submitBudgetsForm" name="submitBudgetsForm" method="post" action="/your/api/endpoint" target="submit-form-iframe" enctype="multipart/form-data"> <div> <input type="hidden" value="{{vm.username}}" name="username"/> <input type="hidden" ng-repeat="value in vm.arrayOfValuesToSend" value={{value}} name="values[]"/> <input type="file" name="spreadsheet" ng-required=true accept=".csv"/> </div> <div class="form-group"> <button type="submit">Upload</button> </div> </form> </div>


@RequestMapping(value="/your/api/endpoint", method=RequestMethod.POST, headers = "content-type=multipart/form-data") @ResponseBody public ResponseEntity uploadBudget(@RequestParam("spreadsheet") MultipartFile spreadsheet, @RequestParam("values[]") String[] values, @RequestParam("username") String username){   if(spreadsheet == null){ logger.warn("Received empty spreadsheet on upload request"); return ResponseEntity.ok("Failure: Spreadsheet is required"); }   if(ArrayUtils.isEmpty(values)){ logger.warn("Received empty values array upload request"); return ResponseEntity.ok("Failure: Values array is required"); }   if(StringUtils.isEmpty(username)){ logger.warn("Received empty username on upload request"); return ResponseEntity.ok("Failure: Username is required"); }   return ResponseEntity.ok().build();   }

This API call looks a bit strange. Why would we return a response of OK if the request failed? Because of yet another failing of IE9. When an iframe returns a non-200 status code, IE9 replaces it with its own error response – the cross-domain access denied 500 error – thereby erasing any special failure message you set and preventing you from reading the response in the iframe. The somewhat-hacky solution is to just respond to everything with a 200, and give very specific messages to indicate successes and failures.

Supporting IE9 can make web development difficult, but it can still be done. Form submission is a fairly common example of this.  Be on the lookout for future blog posts in this series (Tales of an Internet Explorer) that will describe how to overcome more hurdles in Internet Explorer versions 9 and below.

Resources/Further Reading:

Conversation Icon

Contact Us

Ready to achieve your vision? We're here to help.

We'd love to start a conversation. Fill out the form and we'll connect you with the right person.

Searching for a new career?

View job openings