Javascript spinner control (up/down buttons)
This is just a quick example of how you can control a text box
with two buttons and allow the user to increase or decrease the value
in the box by clicking the up and down buttons.
Here's the HTML form we will be using. I've added an HTML table to it
to format the buttons and keep them where I want them.
Example Code |
---|
<form>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td rowspan="2"><input type="text" name="number" value="45" style="width:50px;height:23px;font-weight:bold;" /></td>
<td><input type="button" value=" /\ " onclick="this.form.number.value++;" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" ></td>
</tr>
<tr>
<td><input type=button value=" \/ " onclick="this.form.number.value--;" style="font-size:7px;margin:0;padding:0;width:20px;height:12px;" ></td>
</tr>
</table>
</form>
|
The Javascript for this is actually embedded in the example above in the onclick events for the
form input elements.
Here is what this looks like:
|