User avatar
Posts: 140
Joined: Wed Dec 19, 2012 4:56 pm

html on/off buttons JavaScript(?)

Sat Dec 29, 2012 11:52 pm

Hey All,
I tried to do this with Arduino a couple of years ago and failed. I'm trying to make on/off toggle buttons to use on html pages. Here's the functionality I'm after

Submit button - Could be text but prefer an image "Off"
When I hit that button it links to a shell script <a href="">
Stays on the same page
Changes image to "On"
Changes link to <a href="">

Anyone know how to do this?

The solution at the bottom of this page is the closest thing I've found. I'd tweak it but my JavaScript isn't that strong. ... 15361.html

How can I do swap the images and include swapping hyperlinks?

Any help is appreciated.


Posts: 3
Joined: Mon Dec 31, 2012 1:09 am
Location: Germany

Re: html on/off buttons JavaScript(?)

Mon Dec 31, 2012 1:17 am

Hey you can to this with php and ajax. With ajax and php (combination) you can check lets say every 2 seconds for the status of the pi. The when the status change you can display a different image with a different link. I must be all doable with php and ajax. You should have a look at the and documentation. A good site i recommend for asking programming questions like this is:

Hope i could help you a little bit ;)

Posts: 271
Joined: Wed Feb 01, 2012 4:44 pm
Contact: Website

Re: html on/off buttons JavaScript(?)

Wed Jan 02, 2013 11:47 pm

You don't even need to use PHP, there are python libraries that can handle serving HTML pages up and handing the response. Saves on installing yet another runtime!

It's all in the education manual posted on the front page of the main site recently, have a gander.

User avatar
Posts: 140
Joined: Wed Dec 19, 2012 4:56 pm

Re: html on/off buttons JavaScript(?)

Fri Jan 04, 2013 9:31 pm

Cool, I'll check this out next time I get some Pi time :P :P


Posts: 9
Joined: Sat Jan 05, 2013 12:37 pm

Re: html on/off buttons JavaScript(?)

Sat Jan 05, 2013 4:56 pm

A simpler primer for your javascript/html would be to have a look at document.getelementbyid() and then manipulate the dom, aka replace the href value and img src.
My javascript foo is a bit rusty, so you have to look up the correct functionnames and parameters yourself.

Code: Select all

<img src="off.png" id="buttongfx">
<a href="" id="link">
you would then do something like this:

Code: Select all

button = document.getElementById("buttongfx");
// do something with this element (change the src to "on.png")
link = document.getElementById("link");
// change href to

I'd highly recommend you to have a look at jQuery and Ajax, as you can not "just" run a shellscript in a browser. php for example has the possibility to run scripts with the shellexec command.

Posts: 1316
Joined: Thu Nov 01, 2012 12:12 pm
Location: Dublin, Ireland

Re: html on/off buttons JavaScript(?)

Mon Jan 07, 2013 3:02 pm

For switching the button images the link in the original post is a very nice solution. This should work as is in a 'self-contained' HTML page - maybe you tried it already...

But are you aware that for calling the 'on/off' scripts, you will need web-server (either a full server like Apache or your own app in Python)?!

As per your requirement 'stay on the same page', learn to do AJAX calls and preferably do NOT use <a> tags (well, you can tweak these too, but any other elements can handle 'onclick's much cleaner). You could just extend the 'togglestyle' function in that code from the link to do the AJAX calls in addition to switching the images. - Low-level graphics and 'Coding Gold Dust'

Return to “General programming discussion”