Question

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

HTML：

<form role="form" id="shoppingcart">
                <br style="clear:both">
                <h3 style="margin-bottom: 25px; text-align: center;">Purchase Item</h3>
                <!-- Div for date -->
                <div class="form-group">
                    <input type="date" class="form-control" id="date" name="date" placeholder="Date" required>
                </div>
                <!-- Div for Item ID -->
                <div class="form-group">
                    <input type="number" class="form-control" id="itemID" name="itemID" placeholder="Item ID" required>
                </div>
                <!-- Div for name -->
                <div class="form-group">

                    <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
                </div>
                <!-- Div for description -->
                <div class="form-group">
                    <textarea class="form-control" type="textarea" id="description" name="description" placeholder="description" maxlength="25" rows="7"></textarea>
                </div>
                <!-- Div for quantity -->
                <div class="form-group">
                    <input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity" required>
                </div>
                <!-- Div for unit price -->
                <div class="form-group">
                    <input type="number" class="form-control" id="unitPrice" name="unitPrice" placeholder="Unit Price" required>
                </div>
                <!-- div for cost -->
                <div class="form-group">
                    <input type="number" class="form-control" id="cost" name="cost" placeholder="Cost" disabled="disabled" required>
                </div>

                <label><span>&nbsp;</span><input class="addrow" type="submit" value="Add to Cart" /></label>
            </form>
        </div>
    </div>

JS：

    $(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);
    }

});

}）;

calculateSum调用是另一个计算运费，总额，税费以及用它们更新其他输入字段的函数

Answer 1

结果显示checkValidation（）输入类型＆＃34;数字＆＃34;如果有小数则返回false，包括step =＆＃34; any＆＃34;在标签中允许在该输入中使用小数位并验证。

Answer 2

您需要将div修改为：

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

注意步骤=“任何”属性值。

当你没有提供任何值时，该值会增加1.即使在任何值中，也会增加1但如果你提到3.2，它将增加到4.2等。额外的好处是这个if条件会通过：

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

看起来这就是你要找的东西？

如果数据中包含小数，则Jquery附加函数不会起作用

2 个答案: