My JS/JQuery wont update my text field value

StackOverflow https://stackoverflow.com/questions/23686960

  •  23-07-2023
  •  | 
  •  

Question

Hey guys I'm still fairly new to js and JQuery so I really need some help. I've tried several ways to do this. I basically need the value of my text box increased by 1 when a user clicks the plus button, and decreased by 1 when they click the minus button. I haven't coded for the minus as I haven't figured out the plus. My $('#itemQuant1').val(+1); call works, but stops at 1. Here is my js:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">       </script>

<script>
$(document).ready(function(){
    var current_count = $('#itemQuant1').val();
    var plus_count = current_count + 1;
    var minus_count = current_count - 1;
    //var minusCount = document.getElementById('minusItem').value; 

    $("#plusItem1").on('click', function(){

         current_button = $(this);

        if (current_button.attr('id') == "plusItem1")
        {
            $('#itemQuant1').val(+1);
            //current_count.val() + plus_count;
            //plus_count.val() + 1;
            //$('#itemQuant1').value = current_count.value + 1;

        }

    });

    });
</script>

Here is the html:

<body>
<div>
    <table style= "border:solid;border-width:thin;">
        <tr>
            <td style= "border:solid;border-width:thin;"><p><input       class"comfirmItem" type="checkbox">1-FLUE CONNECTOR ASSEMBLY PACKAGE (0005812) +$665.10<button id="plusItem1" class="more_Item" style="float:right;">+</button><button id="minusItem" class="less_Item" style="float:right;">-</button><input id="itemQuant1" class"itemCount" type="textbox" value=0 style="width:30px;text-align:center;margin-left:5px;margin-right:5px;float:right;"></p></td>
        </tr> 
        <tr>
     <td style= "border:solid;border-width:thin;"><p><input class"comfirmItem" type="checkbox">2-DUCT BOX ASSEMBLY (0005875) +$305.01<button id="plusItem" class="more_Item" style="float:right;">+</button><button id="minusItem" class="less_Item" style="float:right;">-</button><input id="itemQuant2" class"itemCount" type="textbox" style="width:30px;text-align:center;margin-left:5px;margin-right:5px;float:right;"></p></td>
        </tr>
    </table>
</div>
</body>
</html>
Was it helpful?

Solution

You just need to do this - http://jsfiddle.net/jayblanchard/rCM5d/

 $('#itemQuant1').val( parseInt($('#itemQuant1').val()) + 1);

OTHER TIPS

For up and down buttons it might be an idea to wrap all the button logic together like so: http://jsbin.com/kikitule/1/edit

Your HTML would look like this:

<button class="items-button" data-sum="1" data-target="#itemQuant1">+</button>
<button class="items-button" data-sum="-1" data-target="#itemQuant1">-</button>
<input id="itemQuant1" class="itemCount" type="textbox" value=0>

And JQuery like this:

$(document).ready(function(){

  $(".items-button").on('click', function(){
    var $button = $(this);
    var $quantity = $($button.attr('data-target'));
    var sum = parseInt($button.attr('data-sum'), 10);
    var total = parseInt($quantity.val(), 10) + sum;

    if (total < 0) {
      total = 0;
    }

    $quantity.val(total)
  });

});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top