Question

When dynamically creating a checkbox array with JQuery and appending to a DOM element, IE 8 doesn’t submit the checkbox array as part of the form. It works perfectly fine with Firefox and Chrome. I’m using the MVC 3 framework on the server side. Any ideas for a work-around to get this working with IE 8? I would definitely appreciate any advice.

MODEL:

public int[] SelectedTemplateRequirements { get; set; }

VIEW:

HTML:

<label for="requirementsTemplateDetail">Requirements:</label><br />
<div id="requirementsTemplateDetail"></div>

JQUERY:

<script type="text/javascript">
    /* Fills up the textarea */
    function fillTextArea(ctrlName, list) {
        // clear div
        $('#requirementsTemplateDetail').empty();

        $.each( list, function (index, itemData) {
            // alert(itemData.Id );
            $(ctrlName).append(
                $(document.createElement('input')).attr({
                    name: 'SelectedTemplateRequirements',
                    value: itemData.Id,
                    type:  'checkbox',
                    checked: 'checked'
                })
            ).append(itemData.Name + '<br/><br/>');
        })
    }

  function fillRequirementsDropdown(response) {
    fillTextArea("#requirementsTemplateDetail", response.Reqs);
  }

function postFormRequirementsByTemplateID(ctrlName) {
    var theForm = $(ctrlName).parents('form');

    $.ajax({
        type: "POST",
        url: '@Url.Action("GetRequirementsByTemplateID")',
        data: theForm.serialize(), 
        error: function (xhr, status, err) {
            alert("An error occurred while saving\n\n" + err);
        },
        success: function (response) {
            fillRequirementsDropdown(response);
        }
    });
    return false;
}

function auditType_SelectionChanged() {
    postFormRequirementsByTemplateID("#AuditTemplateId");
}

$(document).ready(function () {
    $("#ClassTypeId").change(function () {
        ClassType_SelectionChanged();
    });
    $("#AuditTemplateId").change(function () {
        auditType_SelectionChanged();
    });
    $('#templateSearchID').click(function () {
        auditTemplateButtonPressed();
    });
    $('#templateAllID').click(function () {
        auditTemplateAllPressed();
    });
});

</script>

CONTROLLER:

public class AuditController : ComplianceController
{
    [HttpPost]
    public ActionResult Create(string submit, AuditDocument document )
    {
            // Inserts into AuditRequirementDetail table
            m_activeContract.insertAuditTemplateRequirements(document, myuser);
    }
}

What happens is that IE 8 fails to bundle up the SelectedTemplateRequirements array since it shows up as NULL by the time it gets returned to the post action method on the controller. Would really appreciate any advice on this since IE 8 still has a large user base.

Answer 1

I think the issue may lie within the way you are creating and appending your checkboxes to your DOM elements.

For instance, let’s say you have the following code:

// Append an input element built from a single string
for (var i = 0; i < 10; i++) {
    $('<input type="checkbox" name="test" value="' + i + '" checked="checked" />').appendTo('#form1');
}

// Append an input element build using DOM and jQuery attribute manipulation
for (var i = 0; i < 10; i++) {
    $(document.createElement('input')).attr({
        name: 'test',
        value: i,
        type: 'checkbox',
        checked: 'checked'
    }).appendTo('#form2');
}

alert($('#form1').serialize());
alert($('#form2').serialize());

If you examine the alert() results in Chrome or Firefox, you will have this from #form1:

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

and this from #form2:

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

They are identical, and support your results of having expected behavior in Chrome and Firefox. However, IE does NOT behave the same. The same code in IE8 and IE9 produces this from #form1:

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

and this from #form2:

test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on

From this brief examination of your code, I would question the method you are using to dynamically create and append the checkboxes to your DOM elements. I don’t know how MVC handles the case where every POST variable is identical, but it may be part of your issue.

Another cross-browser way of appending your checkboxes:

for (var i = 0; i < 10; i++) {
    $('<input type="checkbox" />').attr({
        name: 'test',
        value: i
    }).prop('checked', true).appendTo('#form3');
}

You need to make sure that the type is specified before you add the attributes. Also, properly setting the “checked” property is crucial to jQuery serializing the values, not the states, of the checkboxes in IE.

JSFiddle of above.