Javascript Jquery追加函数赢得'；如果数据中包含小数，则不起作用

因此，我正在制作一个简单的购物车来学习HTML/JQUERY。您添加项目名称、id、价格等，它会将其添加到购物车中。我有两个函数，它们从输入字段创建对象，然后将其附加到表中。我注意到，如果我有一个十进制值作为项目成本，它不会将新行追加到表中。如果是整数值，则可以正常工作

HTML:

采购项目

JS:

$（文档）.ready（函数（）{
var mainlelement=document.getElementById（'shoppingCart'）；
//用于从输入创建对象的序列化窗体
函数序列化形式（）{
var inputFields=$（main元素）.find（'form:input'）；
var result={}；
$.each（输入字段、函数（索引、值）{
if（$（value）.attr（'name'））{
结果[$（值）.attr（'name'）]=$（值）.val（）；
}
});
返回结果；
}
$（main元素）。查找（'input[type=“submit”]”）。单击（函数（evt）{
evt.preventDefault（）；
if（$（evt.target）.parents（'form'）[0].checkValidity（））{
var shoppingItem=serializeForm（）；
var html=''+shoppingItem.itemID+''+
''+shoppingItem.name+''中+
''+shoppingItem.description+''中+
''+购物项目.数量+''+
''+购物项目.单价+''+
''+购物项目.成本+''
$（'table tbody'）.append（html）；
$（main元素）.find（'input[type=“text”]'））.val（“”）；
//$（计算单位）；
}
});

}))

---

calculateSum调用是对另一个函数的调用，该函数计算运费、总价、税费成本，并使用这些成本更新其他输入字段

在checkValidation（）中显示，如果存在小数，则输入类型“number”返回为false，包括步骤=“any”在标签中，允许在输入和验证中使用小数位。

您需要修改您的div以获得以下成本：

<div class="form-group">
  <input type="number" class="form-control" id="cost" 
  name="cost" placeholder="Cost" step="any" required>
</div>

看起来这就是你要找的

    $(document).ready(function () {
    var mainElement = document.getElementById('shoppingCart');

//Serialization form to create object from inputs
function serializeForm() {
    var inputFields = $(mainElement).find('form :input');
    var result = {};
    $.each(inputFields, function (index, value) {
        if ($(value).attr('name')) {
            result[$(value).attr('name')] = $(value).val();
        }
    });
    return result;
}


$(mainElement).find('input[type="submit"]').click(function (evt) {
    evt.preventDefault();
   if ($(evt.target).parents('form')[0].checkValidity()) {


        var shoppingItem = serializeForm();
        var html = '<tr><td>' + shoppingItem.itemID + '</td>' +
                   '<td>' + shoppingItem.name + '</td>' +
                   '<td>' + shoppingItem.description + '</td>' +
                   '<td>' + shoppingItem.quantity + '</td>' +
                   '<td>' + shoppingItem.unitPrice + '</td>' +
                   '<td class="cost">' + shoppingItem.cost + '</td></tr>'

        $('table tbody').append(html);
        $(mainElement).find('input[type="text"]').val('');

        //$(calculateSum);
    }

});

<div class="form-group">
  <input type="number" class="form-control" id="cost" 
  name="cost" placeholder="Cost" step="any" required>
</div>

if ($(evt.target).parents('form')[0].checkValidity())