IE10/11でjqueryのajaxで正しくフォームが送れない

jqueryのajaxを使ってformのsubmitを使っていたら、
エラーが出るユーザーがいるとのことだったので、調べたところ
Internet Explorer10/11を使っているときのバグだったようです。

formはこんな感じで組んでいました。

<form accept-charset="UTF-8" action="/test" method="post">
<input class="datepicker form-control" id="test" name="test[dates_attributes][201510000][date]" placeholder="日付を選択してください" readonly="readonly" type="text" value="2015-10-23" />
<input id="dates_attributes_201510007__destroy" name="test[dates_attributes][201510000][_destroy]" type="checkbox" value="1" />
<a class="save-dates-btn">更新</a>
</form>

ajax部分もよくある形で組んでいました。

      $(document).on("click", '.save-dates-btn', function(event) {
        var form = $(this).parents('form:first');
        var formData = new FormData( form[0] );
        $.ajax({
          type: "POST",
          url: "#{update_dates_path}.json",
          data: formData,
          processData: false,
          contentType: false,
          error: function(data){
            console.log("error");
          },
          success: function (data) {
            console.log("success");
          }
        });
      });

サーバーはrailsを使っていて、以下のエラーが出ていました。

!! Unexpected error while processing request: bad content body

調べていったところ、
IE10/11ではformの中の最後のinputがチェックボックスで、それに対してチェックボックスがついてないときに、
ajaxで送るformDataの値がおかしくなるようです。

対策としてはcheckboxが最後にならないようにすればよいようで、
最後にhiddenでもよいのでダミーのパラメータを追加して対応しました。

<input name="dummy" type="hidden" value="1" />

参考URL
https://blog.yorkxin.org/posts/2014/02/06/ajax-with-formdata-is-broken-on-ie10-ie11/