douyuan6490
douyuan6490
2014-05-05 05:44
浏览 121

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

So I'm attempting to add all textboxes that are dynamically generated to get a subtotal.

here is my code that generates the boxes:

<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>

I'm attempting to use jquery to do this based off of this fiddle: 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>

I have everything in place with no errors, but no total value of all prices combined in my subtotal textbox? what am i doing wrong?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • drrog9853
    drrog9853 2014-05-05 06:03
    已采纳

    You have to put your script inside 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);
    
    
        //});
    
    });
    

    And if you want the decimals too, then you should use parseFloat instead if parseInt.

    点赞 评论
  • doumicheng6732
    doumicheng6732 2014-05-05 06:24

    Your problem was that you are calculating on the change event which will ofcourse fire only on change. Instead remove the change function and wrap it inside $(document).ready(function(){ });

    As for the decimal value, it's not being preserved because while calculating total, you are converting it into int with parseInt(). Instead use parseFloat().

    DEMO

    点赞 评论

相关推荐