IE10 Input box not taking input

Question

I have this input box being created in a js file that in IE10 does not take the input. Is this an ie issue that i can fix? The rental rate and the square footage inputs are the ones that will not let me enter any number or text.

<div id="POItablediv" class="hideDynamicTableClass add-table" data-property-type="Commercial" style="clear: left;"> 
                    @*<input type="button" onclick="tableToJson('CommercialTable');" value="Get JSON Commercial Data" />*@
                    <p><span class="lb1"></span><input type="button" id="add" value="Add" onclick="insCommercialRow()"/></p>
                    <table id="CommercialTable">
                    <tr>
                    <!--<td>Sno</td>-->
                    <td id="TypeOfSpace">Type Of Space</td>
                    <td id="SquareFeet">Square Footage</td>
                    <td id="Occupancy">Occupancy</td>
                    <td id="TenantName">Tennant Name</td>
                    <td id="RentalRate">Rental Rate</td>
                    <td id="LeaseLength">Lease Length</td>
                    </tr>
                    </table>

                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("CommercialSpace", "-1", false), new { @id = "CommercialTypeOfSpace", @style = "display:none;" })
                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("NumberOfAmenities", "-1", false), new { @id = "OtherDynamicBeds", @style = "display:none;" })
                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("NumberOfAmenities", "-1", false), new { @id = "OtherDynamicBaths", @style = "display:none;" })
                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("NumberOfAmenities", "-1", false), new { @id = "OtherDynamicGarage", @style = "display:none;" })
                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("CaseOccupant", "-1", false), new { @id = "OtherDynamicOccupied", @style = "display:none;" })
                @Html.DropDownList("filterDomain", OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("CaseOccupant", "-1", false), new { @id = "CommercialOccupancy", @style = "display:none;" })
            @*    @(Html.Telerik().CurrencyTextBox()
                        .Name("CommercialRentalRate")
                        .InputHtmlAttributes(new {id ="CommercialRentalRate" ,style="width:100% display :none!important", placeholder="$"})
                        //.MinValue(0)       

                        .Spinners(false)       
                        .EmptyMessage(string.Empty)
              )*@
                </div>

This is the javascript that creates the input boxes.

function fillSellerLeadHandlers() {
    //Use the JSON string on the commercial and the other one to render table
    var dataObj = eval(($("#commercialUnitString").val()));   
    var commTable = document.getElementById('CommercialTable');
    var dynaTable = document.getElementById('DynamicTable');

    if (!isEmpty($("#commercialUnitString").val()))
    {
        $.each(dataObj, function (idx, val) {
            var len = commTable.rows.length;
            var new_row = commTable.insertRow(len);
            //Assign different attributes to the element.
            var cell0 = new_row.insertCell(0) //Type Of Space -- DD
            $('select#CommercialTypeOfSpace').clone().attr('style', 'display:block').attr('id', "id" + len + "0").attr('value', val.TypeOfSpace).appendTo(cell0);
            //cell0.appendChild(createElement("text", "id" + len + "0", val.TypeOfSpace));

            var cell1 = new_row.insertCell(1) //Squarefeet
            var element1 = createElement("text", "id" + len + "1", val.SquareFeet);
            element1.setAttribute('class', "numeric");
            cell1.appendChild(element1);

            var cell2 = new_row.insertCell(2)//Occupancy -- DD
            //cell2.appendChild(createElement("text", "id" + len + "2", val.Occupancy));           
            $('select#CommercialOccupancy').clone().attr('style', 'display:block').attr('id', "id" + len + "2").attr('value', val.Occupancy).appendTo(cell2);

            var cell3 = new_row.insertCell(3)//Tenant Name
            cell3.appendChild(createElement("text", "id" + len + "3", val.TenantName));

            var cell4 = new_row.insertCell(4)//Rental Rate
            var element = createElement("text", "id" + len + "4", val.RentalRate);
            element.setAttribute('class', "numeric");
            element.setAttribute('data-val', 'true');
            element.setAttribute('data-val-number', 'Rental Rate needs to be a number');
            element.setAttribute('placeholder', '$');
            //element.attributes['data-val'] = 'true';
            //element.attributes['data-val-number'] = 'Rental Rate needs to be number.';
            cell4.appendChild(element);

            var cell5 = new_row.insertCell(5)//Lease Length
            cell5.appendChild(createElement("text", "id" + len + "5", val.LeaseLength));
            var element = createElement("button", "id", len + "6", "X");
            element.setAttribute("value", "X");
            element.onclick = function () { // Note this is a function
                deleteRow(this, 'CommercialTable');
            };
            var cell6 = new_row.insertCell(6)
            cell6.appendChild(element);

            commTable.appendChild(new_row);
        });
    }
    //Other tables
        var dataObj = eval(($("#otherDynamicSettingsString").val()));      
        if (!isEmpty($("#otherDynamicSettingsString").val()))
          {  $.each(dataObj, function (idx, val) {
                var len = dynaTable.rows.length;
                var new_row = dynaTable.insertRow(len);

                var cell0 = new_row.insertCell(0)
                cell0.appendChild(createElement("text", "id" + len + "0", val.NumOfUnits));

                var cell1 = new_row.insertCell(1) //Beds - DD
                //cell1.appendChild(createElement("text", "id" + len + "1", val.Bedroom));            
                $('select#OtherDynamicBeds').clone().attr('style', 'display:block').attr('id', "id" + len + "1").attr('value', val.Bedroom).appendTo(cell1);

                var cell2 = new_row.insertCell(2)//Baths --DD
                //cell2.appendChild(createElement("text", "id" + len + "2", val.Bathrooms));
                $('select#OtherDynamicBaths').clone().attr('style', 'display:block').attr('id', "id" + len + "2").attr('value', val.Bathrooms).appendTo(cell2);

                var cell3 = new_row.insertCell(3)//Square Footage
                var element1 = createElement("text", "id" + len + "3", val.SquareFeet)
                element1.setAttribute('class', "numeric");
                cell3.appendChild(element1);

                var cell4 = new_row.insertCell(4)//Rental Rate
                var element1 = createElement("text", "id" + len + "4", val.RentalRate);
                element1.setAttribute('class', "numeric");
                element1.setAttribute('placeholder', '$');
                cell4.appendChild(element1);

                var cell5 = new_row.insertCell(5)//Garage - DD
                //cell5.appendChild(createElement("text", "id" + len + "5", val.Garage));
                $('select#OtherDynamicGarage').clone().attr('style', 'display:block').attr('id', "id" + len + "5").attr('value', val.Garage).appendTo(cell5);

                var cell6 = new_row.insertCell(6) //Occupied - DD
                //cell6.appendChild(createElement("text", "id" + len + "6", val.Occupied));
                $('select#OtherDynamicOccupied').clone().attr('style', 'display:block').attr('id', "id" + len + "6").attr('value', val.Occupied).appendTo(cell6);

                var element = createElement("button", "id", len + "7", "X");
                element.setAttribute("value", "X");
                element.onclick = function () { // Note this is a function
                    deleteRow(this, 'DynamicTable');
                };
                var cell7 = new_row.insertCell(7)
                cell7.appendChild(element);

                dynaTable.appendChild(new_row);
            });
        }
        $(".numeric").keypress(function () {
            return (/\d/.test(String.fromCharCode(event.which)))
        });
}

Answer 1

First things first:

Shouldn't the syntax of createElement be, along the lines of the following (note explicit set of input tag), or have you created your own method by the same name that does that for you?

var cell1 = new_row.insertCell(1); //Squarefeet
var element1 = createElement("input");
element1.setAttribute("id", "id" + len + "1");
element1.setAttribute("type", "text");
element1.setAttribute("class", "numeric");
element1.value = val.SquareFeet;
cell1.appendChild(element1);

Secondly, your numeric event, I believe is your problem. Here is a numeric only plugin I wrote a while back:

(function ($) {
    $.fn.onlynumeric = function () {
        $(this).keyup(function (event) {
            if (event.keyCode != 8) {
                $(this).val($(this).val().replace(/\D/g, ""));
            }
        });
    };
} (jQuery));

And apply it with:

$("input.numeric").onlynumeric();

A few general points re: JavaScript and use of jQuery, I hope you don't mind me overstepping:

1. Eval is Evil. You could use $.parseJSON(string) instead. Why, you ask? Well Eval could execute any hidden code someone had injected into the response/variable by other means, whereas parseJSON will simply deserialize data. You could be tucked up like a kipper otherwise.
2. Your script is syntax heavy, why not use more jQuery selectors, seeing as you have it included $(#idofelement) rather than the full document.getElementById("idofelement")? And .prop() & .data() instead of setAttribute()?
3. You know, I think you could probably do this more efficiently in general with jQuery Templates. See here for a guide. It would then be simply a case of defining the row markup you want beforehand, then applying the relevant JSON data to it. Classic case for it, if you ask me...

I hope this isn't a beating for you. Good luck with your app!