How to create a form toggle switch as a replacement for a submit button?

Question

How would one create a form element/button that can be styled/scripted to behave as a sliding/toggle button, similar to:

example toggle gif

By clicking on the arrow, it would submit the form and change the status to "on" if it was off, or "off" it was on, updating the visual representation accordingly.

Answer 1

the simplest way: use an image instead of a button to submit the form.

example: http://www.webdevelopersnotes.com/tips/html/using_an_image_as_a_submit_button.php3

<input type="image" src="butup.gif" alt="Submit button">

then all you need to do is change the image. you can even ajax enable it if you so wish.

-

as noted bellow, if you should arrive at problems with using type=image you can still use the plain ol' button just style it correctly with css.

Answer 2

You can have an image when clicked on that you can postback the form. At the server side after the action is completed you can change the url of the image to the new one.

Use a plain img tag and in the onclick handler make a postback call like

__doPostBack ( parameter , argument );

Do not use input type="image". It will cause multiple postbacks.