通过添加动态文本框填充文本框的值

时间:2014-05-05 05:44:51

标签: php jquery html

所以我试图添加动态生成的所有文本框以获取小计。

这是我生成框的代码:

<table id="billing-table">
            <tr>
                <th>Service</th><th>Price</th><th>Subtotal</th>
            </tr>
            <?PHP
             $aService = $_POST['service'];
             $N = count($aService);


         for($i=0; $i < $N; $i++)
         {
              $services=MYSQLI_QUERY($con, "SELECT * FROM `Service` WHERE Service_ID = '$aService[$i]'")or die(mysqli_error($con));
              $getservices = mysqli_fetch_array($services);
              $serviceid = $getservices['Service_ID'];
              $servicedesc = $getservices['Service_Type'];
              $serviceprice = $getservices['Service_Cost'];
      echo'<tr>
                <td><input type="text" name="service" value="'. $servicedesc. '"></td>
                <td><input type="text" name="price" id="price'.$i.'" value="'. $serviceprice. '"></td>
                <td><input type="text" class="qty" value="'. $serviceprice. '"></td>

           </tr>';
    } ?>


            <tr>
                <td style="position:absolute;left:5%;">Subtotal</td>
                <td></td>
                <td><input type="text" id="total" value=""></td>

            </tr>
        </table>

我试图使用jquery来完成这个小提琴:http://jsfiddle.net/LJKjR/478/

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
       $('input.qty').change(function() {   

    // Loop through all input's and re-calculate the total
    var total = 0;
    $('input.qty').each(function(){
        total += parseInt(this.value);
    });

    // Update the total
    $('#total').val(total);
});
    </script>
</head>

我有一切都没有错误,但在我的小计文本框中没有合并所有价格的总价值?我做错了什么?

2 个答案:

答案 0 :(得分:1)

您必须将脚本放在document.ready function

$(document).ready(function(e) {

    // Commenting the below line because you want in on the fly
    //$('input.qty').change(function() {  

        // Loop through all input's and re-calculate the total
        var total = 0;
        $('input.qty').each(function(){
            total += parseInt(this.value);
        });

        // Update the total
        $('#total').val(total);


    //});

});

如果你也想要小数,那么你应该使用 parseFloat 来代替parseInt。

答案 1 :(得分:0)

你的问题是你正在计算change事件,而事件只会在变化时发生。而是删除更改功能并将其包装在$(document).ready(function(){ });

对于小数值,它未被保留,因为在计算总计时,您将其转换为int parseInt()。而是使用 parseFloat().

<强> DEMO