发表新帖
发表新帖

How to increase the value of a quantity field with jQuery?

前端 未结
关注
8 963
北荒
北荒 2021-01-07 05:25

I have a form with some quantity field and a plus and minus sign on each side,

    

        product1
相关标签:
8条回答
  • 执笔经年
    2021-01-07 05:43

    This is the improved response of the first aswer:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
    $(".add").click(function()
    {
        var currentVal = parseInt($(this).next(".qty").val());
        if (currentVal != NaN)
        {
            $(this).next(".qty").val(currentVal + 1);
        } 
    });

    $(".minus").click(function()
    {
        var currentVal = parseInt($(this).prev(".qty").val());
        if (currentVal != NaN)
        {
            $(this).prev(".qty").val(currentVal - 1);
        }
    });
});

</script>
</head>

<body>
    <form id="myform">
        product1
        <input type="button" value="+" id="add1" class="add" />        
        <input type="text" id="qty1" value="-1" class="qty" />        
        <input type="button" value="-" id="minus1" class="minus" /><br /><br />

        product2
        <input type="button" value="+" id="add2" class="add" />        
        <input type="text" id="qty2" value="-10" class="qty" />        
        <input type="button" value="-" id="minus2" class="minus" />

    </form>

</body>

    I hope they serve.... :D

    0 讨论(0)
  • 太阳男子
    2021-01-07 05:43

    Thanks so much for everyone who got involved. All I drew upon and was able to come up with this in the end, that served the site very well (it was just the css that was a pain!)

    HTML:

    <div id="qtybox"><label for="qty">
<venda_text id=site.quantity>
</label><input name="qty" id="qty" type="text" value="1" size="3" maxlength="2"></input>
<button id="qtyplus" onclick="return false"></button>
    <button id="qtyminus" onclick="return false"></button>

</div>

    js:

    jQuery(function(){
    jQuery("#qtyplus").click(function(){     
     jQuery(":text[name='qty']").val( Number(jQuery(":text[name='qty']").val()) + 1 );
    });
    jQuery("#qtyminus").click(function(){
     if(jQuery('#qty').val()>1)
      jQuery(":text[name='qty']").val( Number(jQuery(":text[name='qty']").val()) - 1 );

    });
  });

    CSS:

    #qtybox button#qtyplus {
    background: url("../images/social_icons/elements.png") no-repeat scroll -268px -223px   
    transparent;
    border: medium none;
    cursor: pointer;
    display: block;
    float: right;
    height: 23px;
    width: 23px;
}

    As you can see, I removed the values of the +'s and -'s - hated how it was rendered!

    0 讨论(0)
  • 予麋鹿
    2021-01-07 05:51

    I think this should do it:

    $('#add').click(function (e) {
    var quant = $(this).next('input');
    quant.val(parseInt(quant.val(), 10) + 1);
};
$('#minus').click(function (e) {
    var quant = $(this).prev('input');
    quant.val(parseInt(quant.val(), 10) - 1);
    if (parseInt(quant.val(), 10) < 0)
    { quant.val(0); }
};

    This does however depend on the relative positioning of the controls not changing.

    0 讨论(0)
  • 别那么骄傲
    2021-01-07 05:58

    I'm a rookie, but I did it like this for integers...

    <div class="quantityInput" min="-32" max="32">
    <input type="text" class="quantityText">
    <input type="button" value="+" class="quantityPlus">
    <input type="button" value="-" class="quantityMinus">
</div>

    min and max attributes are optional. Then, inside jQuery(document).ready(...

    $(".quantityMinus").live("click", function() {
  var qInput = $(this).parents(".quantityInput");
  var qText = qInput.find(".quantityText");
  var qValue = parseInt((qText.val())? qText.val() : 0);
  qText.val(Math.max(qValue - 1, (qInput.attr("min"))? qInput.attr("min") : -0xffff));
});

$(".quantityPlus").live("click", function() {
  var qInput = $(this).parents(".quantityInput");
  var qText = qInput.find(".quantityText");
  var qValue = parseInt((qText.val())? qText.val() : 0);
  qText.val(Math.min(qValue + 1, (qInput.attr("max"))? qInput.attr("max") : 0xffff));
});
    0 讨论(0)
  • 野的像风
    2021-01-07 05:59

    Your html isn't quite valid, you have multiple elements with the same id, it should be unique. But lets say you only had one set of inputs/buttons:

    $("#add").click(function(){
  var newQty = +($("#qty1").val()) + 1;
  $("#qty1").val(newQty);
});

$("#minus").click(function(){
  var newQty = +($("#qty1").val()) - 1;
  if(newQty < 0)newQty = 0;
  $("#qty1").val(newQty);
});
    0 讨论(0)
  • 面向向阳花
    2021-01-07 06:00

    First, at minus buttons, you need to have type="submit", not type="submit, but I assume that is typing mistake ;)

    If you want to do that, you should change plus and minus button ids to something like 'minus-qty1', 'add-qty1', etc. to identify which input you'd like to update.

      <form id="myform">
    product1
    <input type="button" value="+" id="add-qty1" onclick="increase(this)">
    <input type="text" id="qty1">
    <input type="button" value="-" id="minus-qty1" onclick="decrease(this)">
    product2
    <input type="button" value="+" id="add-qty2" onclick="increase(this)">
    <input type="text" id="qty2">
    <input type="button" value="-" id="minus-qty2" onclick="decrease(this)">

  </form>

function increase(button)
{
 var id = $(button).attr('id');
 var fname = id.substr(3);

 var newval = parseInt($("#"+fname).val()) + 1;
 $("#" + fname).val(newval);
}


function decrease(button)
{
 var id = $(button).attr('id');
 var fname = id.substr(5);

 var newval = parseInt($("#"+fname).val()) - 1;
 $("#" + fname).val(newval);
}

    I hope it works, I didn't try it :)

    0 讨论(0)
 看不清?
提交回复
热议问题