从<span>值和<input />值计算价格

时间:2016-02-13 13:15:26

标签: javascript jquery html

今天我尝试从<span>值和<input>值计算价格。然后,将结果放在<span>

我已经尝试过这段代码。这是我的HTML:

<td class="cart-product-price">
    <span id="price" class="amount">19.99</span>
</td>    
<td class="cart-product-quantity">
    <div class="quantity clearfix">
         <input type="button" value="-" class="minus" field="quantity">
         <input type="text" id="quantity" name="quantity" value="2" class="qty" />
         <input type="button" value="+" class="plus" field="quantity">
    </div>
</td>    
<td class="cart-product-subtotal">
    <span id="total" class="amount"></span>
</td>

所以我希望从<span id="price>获取价格,从<input type="text" id="quantity" name="quantity">获取数量,并将结果放入<span id="total" class="amount"></span>

这是我的脚本代码:

<script type="text/javascript">
    var price = parseFloat($('#price').val()) || 0;
    var qty = parseInt($('input[name=quantity]').val());
    var total = price*qty;
    $('#total').text(total);
</script>

注意:我使用JQuery增加/减少数量(加上&减去按钮)

我写错了吗?

谢谢

更新

这是我的增加/减少javascript代码:

<script type="text/javascript">
        jQuery(document).ready(function(){
            // This button will increment the value
            $('.plus').click(function(e){
                // Stop acting like a button
                e.preventDefault();
                // Get the field name
                fieldName = $(this).attr('field');
                // Get its current value
                var currentVal = parseInt($('input[name='+fieldName+']').val());
                // If is not undefined
                if (!isNaN(currentVal)) {
                    // Increment
                    $('input[name='+fieldName+']').val(currentVal + 1);
                } else {
                    // Otherwise put a 0 there
                    $('input[name='+fieldName+']').val(0);
                }
            });
            // This button will decrement the value till 0
            $(".minus").click(function(e) {
                // Stop acting like a button
                e.preventDefault();
                // Get the field name
                fieldName = $(this).attr('field');
                // Get its current value
                var currentVal = parseInt($('input[name='+fieldName+']').val());
                // If it isn't undefined or its greater than 0
                if (!isNaN(currentVal) && currentVal > 0) {
                    // Decrement one
                    $('input[name='+fieldName+']').val(currentVal - 1);
                } else {
                    // Otherwise put a 0 there
                    $('input[name='+fieldName+']').val(0);
                }
            });
        });
    </script>

3 个答案:

答案 0 :(得分:1)

价格&#39;字段是span,没有value属性。相反,您需要从中读取text()。另请注意数量&#39;字段有一个id,因此您最好将其用作选择器,因为它的速度要快得多。试试这个:

var price = parseFloat($('#price').text()) || 0;
var qty = parseInt($('#quantity').val());
var total = price * qty;
$('#total').text(total);

Working example

答案 1 :(得分:0)

// and here is ajax handler 
// authentication with received username, password by ajax call

app.post('/login', passport.authenticate('local'), 
function(req, res, next){
    res.redirect('/');
});

// and here is passport strategy 

    passport.use(new passportLocal.Strategy(function(userid, password, done) {
  Members.findOne({'user_id' : userid}, function(err, user){

    // if user is not exist
    if(!user){

        // *** I want to use 'res.send' here. 
        // *** Like this : 
        // *** res.send('user is not exist');
        // *** If it is possible, the login.ejs display above message.  
        // *** That's what I'm trying to it. How can I do it?

        return done(null, null);
    }

    // if everything OK,
    else {
        return done(null, {id : userid});
    }

  })


}));

.val()方法主要用于获取表单元素的值,例如input,select和textarea

FIDDLE DEMO

答案 2 :(得分:0)

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <style>

            .active {
                color:red;
            }
        </style>
    <script>

        $(document).ready(function () {

            var price = parseFloat($('#price').text()) || 0;
            var qty = parseInt($('input[name=quantity]').val());
            var total = price * qty;
            $('#total').text(total);
        });
    </script>
    </head>

    <body>
        <table>
            <tr>

                <td class="cart-product-price">
    <span id="price" class="amount">19.99</span>
</td>    
<td class="cart-product-quantity">
    <div class="quantity clearfix">
         <input type="button" value="-" class="minus" field="quantity">
         <input type="text" id="Text1" name="quantity" value="2" class="qty" />
         <input type="button" value="+" class="plus" field="quantity">
    </div>
</td>    
<td class="cart-product-subtotal">
    <span id="total" class="amount"></span>
</td>
            </tr>
        </table>

    </body>

    </html>