Home | Php | JavaScript | SQL | HTML | Server Admin | Tools

Change Cell Color on Mouseover
Change Background Color
Break out of Frames
Change Cursor
Limit Input Text
Get Object By ID
Up/Down Buttons (Spinner)
Other sites
Image Editor
Top 10 web hosting reviews

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

<table cellpadding="0" cellspacing="0" border="0">
<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>
<td><input type=button value=" \/ " onclick="this.form.number.value--;" style="font-size:7px;margin:0;padding:0;width:20px;height:12px;" ></td>

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:

  <-- Use the up/down buttons to change the value in the box.

Link back to this page

Copy and paste this HTML code into your page to link back to this very page:

Or just link to the WebCodingTech site:

And your link will look like this:
      Inspired by stuff found at www.webcodingtech.com.


Copyright © 2005 WebCodingTech.com Our URL is: http://www.webcodingtech.com