press button and value increases in text box

Question

So when the page loads the text box will contain a stored value. I want the user to press the '+' button and the value in the text box will increase by one. Im guessing this is done with JQuery...Any ideas on where to get started so far I have...

<input type="text" name="BoqTextBox" id="BoqTextBox" value="0" />  
    <input type="Button" value="+" onclick="AddOne(document.getElementById('BoqTextBox').value)" />

    <script>
        function Add(data) {
            //so the current digit is passed to here, where I need to do some funky code
            //where it increments the current digit by one and stores it in BoqTextBox - replacing the old digit.

            //Also to note if the text box contains 124.54 for example and + is pressed
            //then new value will be 125.54
        }
    </script>

Any assistance with this would be great.

Thank you

...something like data = data + 1, but then how do I return the value into the text box?

score 6 · Accepted Answer · edited Mar 22 '13 at 20:06

6

You can use jQuery's val() to fetch and set a value. In this case the code you need could look like this (demo):

<input type="text" name="BoqTextBox" id="BoqTextBox" value="0" />
<input type="Button" id='AddButton' value="+" />
<script>
$('#AddButton').on('click', function () {
    var input = $('#BoqTextBox');
    input.val(parseFloat(input.val()) + 1);
})
</script>

edited Mar 22 '13 at 20:06

Matt Ball

354,903
100
647
710

answered Mar 22 '13 at 17:50

Jason Sperske

29,816
8
73
124

function called is AddOne and your function is Add.. do you really think this will work ??? – bipen Mar 22 '13 at 17:57
Yeah I had caught that when trying to set up a JSFiddle. Should be fixed :) – Jason Sperske Mar 22 '13 at 17:57
@JasonSperske Only problem with this is that if I set the value in the text box to a decimal no. 1.14 and press the + button the value jumps to 2. I need it to change to 2.14 thanks for the reply. any ideas on this one? – Mick Mar 22 '13 at 18:06
You could replace `parseInt` with `parseFloat` – Jason Sperske Mar 22 '13 at 18:08
@Mick, just a head up there is more to dealing with `parseFloat()` than meets the eye: http://stackoverflow.com/questions/15578841/why-does-parsefloat-in-javascript-produce-consisant-but-unitinutive-results – Jason Sperske Mar 22 '13 at 20:06
[`parseFloat()` does not accept a radix parameter.](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseFloat) – Matt Ball Mar 22 '13 at 20:06
Opps, I had `parseInt()` in my first draft, and changed it too quickly – Jason Sperske Mar 22 '13 at 20:07
@JasonSperske that's great man thanks for going the extra mile. – Mick Mar 26 '13 at 14:09

thecodeparadox · Answer 2 · 2013-03-22T18:09:55.147

2

$('input[type="button"]').on('click', function() {  // bind click event to button
   $('#BoqTextBox').val(function() {      // change input value using callback
      return ++parseFloat( this.value, 10); // make value integer and increment 1
   })
});

edited Mar 22 '13 at 18:09

answered Mar 22 '13 at 17:52

thecodeparadox

86,271
21
138
164

I like that `++parseInt()` approach – Jason Sperske Mar 22 '13 at 17:56

bipen · Answer 3 · 2013-03-22T18:10:13.183

1

you are callin Addone function inline so that means your function should be AddOne()

try this

function AddOne(obj){
    var value=parseFloat(obj) + 1;
    $('#BoqTextBox').val(value);  
}

edited Mar 22 '13 at 18:10

answered Mar 22 '13 at 17:50

bipen

36,319
9
49
62

A_m0 · Answer 4 · 2014-09-12T12:19:53.343

1

 $("#buttonId").click(function()
 {        
    var txtBox = $("#boqtextbox"); 

    if(!isNaN(txtBox.val()))
    {
       txtBox.val(parsFloat(txtBox.val())+1) ;

    }else 
    {
       //do validation or set it to 0
       txtBox.val(0);
    }|

 });

edited Sep 12 '14 at 12:19

answered Mar 22 '13 at 17:53

A_m0

974
2
17
45

press button and value increases in text box

4 Answers4

Linked