使用jquery

Question

我有一张表格。在这个表单上，当我添加行项目时，我保存输入值，然后将其添加到表单中。这部分有效。请记住，表单未提交我只是动态添加到dom

在我保存的表单部分中有一个价格输入。我使用jquerypriceformat插件将价格格式化为价格格式。例如111变为1.11美元。如果我不使用该插件，它的工作原理。该插件确实按预期工作。我认为我的问题是，在我输入后，值被更改，我需要以某种方式保留该值。

这是一个小提琴 https://jsfiddle.net/ks2z5mdo/7/

我认为小提琴将更好地展示问题所在。基本上，当您键入描述类型的数量和价格时，价格会被格式化，然后点击添加按钮，除了价格之外，所有数据都会被保存。

我该如何解决这个问题？

首先是表格

<div class="form-row">
    <strong>Line Items:</strong>
    <br>
    <div class="line-items">
        <div class="line-item">
            <div class="line-item-box description">
                <label>Description:</label>
                <textarea name="description" id="description"></textarea>
            </div><!--
         --><div class="line-item-box quantity">
                <label>Quantity:</label>
                <input type="text" name="quantity" id="quantity">
            </div><!--
         --><div class="line-item-box price">
                <label>Price:</label>
                <input type="text" name="price" id="price">
            </div>
            <button class="btn add-item">Add Item</button>
        </div>
    </div>  
</div>

然后是jquery

$(document).ready(function() {
    $('#price').priceFormat();
    $('.add-item').click(function() {
        if ($('description, #quantity, #price').filter(function() { return $(this).val(); }).length > 0) {
            var description = $('#description').val();
            var quantity = $('#quantity').val();
            var price = $('#price').val();
            $('.line-items').prepend('<div class="line-item"><div class="line-item-box description">' + description + '</div><div class="line-item-box quantity">' + quantity + '</div><div class="line-item-box price">' + price*quantity + '</div><button class="btn remove-btn">Remove</button></div>');
             return false;
         } else {
             alert('Line item empty');
         }
    });
    $(document).on('click', '.remove-btn', function() {
        $('.line-item').remove();
    });
});

Answer 1

您的var price = $('#price').val();会在您尝试获取的实际值前面添加$和空格。因此，一种解决方案是获取此值的子字符串以删除$：

var price = $('#price').val().substring(2);

这会将值保留为数字而不是最初生成的字符串。这是一个有效的fiddle。