在for循环中乘以第3个输入字段中的2个输入字段的值

时间:2017-01-02 11:49:24

标签: javascript php jquery html mysql

我有一个小问题。我有一个 For Loop ,我正在创建多个3个输入字段(数量,费率,价格)。我正在使用 Javascript 功能来获取'数量'的ID & '评分'并在第三个输入'价格'中显示产品。我的问题是在for循环中,我只使用Id& amp;获得第一记录的产品。 “价格”输入的其余部分没有捕获各自“数量”和“产品”的产品。 '评分'输入。如何设置使用多个3输入?请帮助我,我将非常感激。

请参阅此处的输入条目

See Input Entry Image Here

HTML代码:

<?php
    $total = $total_entries;
    for($i=0; $i<$total; $i++){
?>
<div class="row">
    <div class="col-md-12">
        <div class="col-md-2">
            <div class="form-group">
                <label for="item">Item</label>
                <input type="text" class="form-control" name="item[]">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="quantity">Quantity</label>
                <input id="quantity" type="number" class="form-control" name="quantity[]">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="rate">Rate</label>
                <input id="rate" type="text" class="form-control" name="rate[]">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="price">Price</label>
                <input id="price" type="number" class="form-control" name="price[]">
            </div>
        </div>

        <?php } ?>

    </div>
</div>

Javascript功能:

<script>
    $('#quantity, #rate').change(function(){
        var rate = parseFloat($('#quantity').val()) || 0;
        var box = parseFloat($('#rate').val()) || 0;
        $('#price').val(rate * box);    
    });
</script>

1 个答案:

答案 0 :(得分:0)

试试这个,

<?php
    $total = $total_entries;
    for($i=0; $i<$total; $i++){
?>
<div class="row">
    <div class="col-md-12">
        <div class="col-md-2">
            <div class="form-group">
                <label for="item">Item</label>
                <input type="text" class="form-control item" name="item[<?php echo $i; ?>]">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="quantity">Quantity</label>
                <input id="quantity_<?php echo $i; ?>" type="number" class="form-control quantity" name="quantity[<?php echo $i; ?>]">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="rate">Rate</label>
                <input id="rate_<?php echo $i; ?>" type="text" class="form-control rate" name="rate[<?php echo $i; ?>]">
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="price">Price</label>
                <input id="price_<?php echo $i; ?>" type="number" class="form-control price" name="price[<?php echo $i; ?>]">
            </div>
        </div>

        <?php } ?>

    </div>
</div>

Javascript功能:

<script>
    $('.quantity, .rate').change(function(){
        var rate = parseFloat($(this).closest(".row").find(".quantity").val()) || 0;
        var box = parseFloat($(this).closest(".row").find(".rate").val()) || 0;
        $(this).closest(".row").find(".price").val(rate * box);    
    });
</script>

您使用了多个元素的公共ID,因此它只考虑一个元素,而不是考虑所需的元素,

Class用于识别类似的元素。

Id是唯一标识元素的标识符。