ewok
ewok

Reputation: 21463

How to add to the value of a text field

I have the form below. Using the buttons, the value in the text field should be increase or decreased. the decrease button works fine, but the increase button simply appends a '10' to the end of the number, so 100 will become 10010, rather than 110. Can someone let me know how to fix this?

<form name="hello" id="hello">
<table border=0>
<tr>
<td width=200>
<input type=text id="input" style="height: 30px; width: 200px" name=amount value=5>
</td>
<td>
<table border=0>
<tr height=12><td width=20>
<input type=button value="+" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value+=10;">
</td></tr>
<tr height=12><td width=20>
<input type=button value="-" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value-=10;">
</td></tr>
</table>
</td>
</tr>
</table>
</form>

Upvotes: 0

Views: 1411

Answers (6)

Ninja
Ninja

Reputation: 5152

You need to typecast this.form.amount.value to Integer, else it will be treated as a String. Use parseInt() for this.

Upvotes: 0

CoffeeRain
CoffeeRain

Reputation: 4522

Javascript is interpreting the value of the text field as a string. You can use parseInt() to have the value turned into a number.

javascript:this.form.amount.value=parseInt(this.form.amount.value, 10)+10;

Upvotes: 0

sathishkumar
sathishkumar

Reputation: 1816

parseInt() is required.

Use this

    <form name="hello" id="hello">
<table border=0>
<tr>
<td width=200>
<input type=text id="input" style="height: 30px; width: 200px" name=amount value=5>
</td>
<td>
<table border=0>
<tr height=12><td width=20>
<input type=button value="+" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript: this.form.amount.value = parseInt(this.form.amount.value) + 10;">
</td></tr>
<tr height=12><td width=20>
<input type=button value="-" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value-=10;">
</td></tr>
</table>
</td>
</tr>
</table>
</form>

Upvotes: 1

Nathan Taylor
Nathan Taylor

Reputation: 24606

Here's some code that will work:

<form name="hello" id="hello">
<table border=0>
<tr>
<td width=200>
<input type=text id="input" style="height: 30px; width: 200px" name=amount value=5>
</td>
<td>
<table border=0>
<tr height=12><td width=20>
<input type=button value="+" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value=parseInt(this.form.amount.value,10)+10;">
</td></tr>
<tr height=12><td width=20>
<input type=button value="-" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value=parseInt(this.form.amount.value,10)-10;">
</td></tr>
</table>
</td>
</tr>
</table>
</form>

Upvotes: 1

Paul d&#39;Aoust
Paul d&#39;Aoust

Reputation: 3209

The code for the onClick event should read: javascript:this.form.amount.value=Number(this.form.amount.value)+10;

Javascript doesn't have a string concatenation operator like PHP, so you have to cast it as a number before you do any arithmetic on it.

Upvotes: 0

Brandon
Brandon

Reputation: 69993

Your javascript is treating it like a string concatenation. Parse the value into an int, do the math, and then set the value.

The onClick for your + button

onClick="javascript: this.form.amount.value = parseInt(this.form.amount.value, 10) + 10;"

Upvotes: 2

Related Questions