# Make simple web button to send string command to photon

**URL:** <https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591>\
**Category:** Getting Started\
**Created:** [August 21, 2015, 1:02pm UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591 "2015-08-21T13:02:17Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![robbye91](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/robbye91/32/6553_2.png) [@robbye91](https://community.particle.io/u/robbye91)\
**Post date:** [August 21, 2015, 1:02pm UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/1 "2015-08-21T13:02:17Z")

</div>

I’ve set up and got working the standard make a web connected LED. But now I want to tweak the code so it uses buttons instead of a form.

The main reason for this is simplicity but I also want to get rid of the api feedback confirmation screen it sends.

My current code looks like this

```
 <body>
  <center>
  <form action="https://api.particle.io/v1/devices/00000/led?access_token=00000" method="POST">
    <input type="radio" name="args" value="flash"> Flash LED
    <br>
    <input type="radio" name="args" value="flash"> Make a sound
    <br>
    <input type="radio" name="args" value="flash"> Spin umbrella
    <br>
    <input type="submit" value="Do it!">
  </form>
  </center>
  </body>

```

How do I make this into 3 buttons I can then style myself.

---

<div class="post-metadata">

**Author:** ![bko](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/bko/32/20704_2.png) [@bko](https://community.particle.io/u/bko)\
**Post date:** [August 21, 2015, 1:04pm UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/2 "2015-08-21T13:04:17Z")

</div>

Have you seen my tutorial here that uses a pair of buttons and a slider to control a servo:

> [@Tutorial: Spark Variable and Function on One Web Page](https://community.particle.io/t/tutorial-spark-variable-and-function-on-one-web-page/4181):
>
> Let’s say you have a Spark core with both a Spark variable and a Spark function. In my case, I have the world’s simplest servo control sketch, using the nice miniature servo in the Spark Maker Kit. Using these parts, we will build a servo that you can control from a web page anywhere and monitor the position of the servo too! Here’s a preview of the finished tutorial: [image] There is a coarse adjust slider, two fine adjust buttons, and the current position of the servo is displayed. That…

You could adapt that to your needs.

---

<div class="post-metadata">

**Author:** ![robbye91](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/robbye91/32/6553_2.png) [@robbye91](https://community.particle.io/u/robbye91)\
**Post date:** [August 21, 2015, 1:16pm UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/3 "2015-08-21T13:16:29Z")

</div>

I have and it did help a lot. However my HTML knowledge is quite limited. I’ve got something working using the following code, however I don’t want to see the return API confirmation

```
 <body>
<FORM METHOD="POST" ACTION="https://api.particle.io/v1/devices/0000/led?access_token=0000">
<INPUT TYPE="submit" name="args" VALUE="flash">
</FORM>
</body>
```

---

<div class="post-metadata">

**Author:** ![bko](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/bko/32/20704_2.png) [@bko](https://community.particle.io/u/bko)\
**Post date:** [August 21, 2015, 2:09pm UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/4 "2015-08-21T14:09:18Z")

</div>

You should switch to Javascript as in the tutorial, I think. It is not that hard–instead of using a form and POST, you use button click callbacks and some AJAX style code.

---

<div class="post-metadata">

**Author:** ![Moors7](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/moors7/32/588_2.png) [@Moors7](https://community.particle.io/u/Moors7)\
**Post date:** [August 21, 2015, 2:10pm UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/5 "2015-08-21T14:10:16Z")

</div>

This uses the [javascript library:](https://docs.particle.io/reference/javascript/)

```auto
<html>
  <head>
      <title>Spark function buttons Example</title>
  </head>

  <body>
    
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 1</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 2</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 3</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 4</button>
    
    
    
    <script src="http://cdn.jsdelivr.net/sparkjs/1.0.0/spark.min.js"></script>
    <script>
      //you can use your accesstoken, or your email/passsword to log in. Uncomment accordingly below.

      var accessToken = "accesstoken here";
      var deviceID = "deviceID here";
      
      spark.on('login', function(response) {   
        
        console.log(response);
        
      });

      // callback to be executed by each core
      var callback = function(err, data) {
        if (err) {
          console.log('An error occurred while getting core attrs:', err);
        } else {
          console.log('Core attr retrieved successfully:', data);
        }
      };
      
      function functionCall(functionName, functionArgument){
        // The function needs to be defined in the firmware uploaded to the
        // the Spark core and registered to the Spark cloud, same thing we do
        // with variables. You pass along the name of the function and the params.
        spark.callFunction(deviceID, functionName, functionArgument, callback);  
      }
      
      // Uncomment a line below depending on your preferred log-in method.   
      //spark.login({ username: 'email@example.com', password: 'password' });  
      spark.login({ accessToken: accessToken });
      
    </script>
  </body>
</html>

```

Edit the values accordingly, and you should be able to trigger your functions. It works for me. Let me know if you face any troubles.

---

<div class="post-metadata">

**Author:** ![robbye91](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/robbye91/32/6553_2.png) [@robbye91](https://community.particle.io/u/robbye91)\
**Post date:** [August 22, 2015, 2:00pm UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/6 "2015-08-22T14:00:04Z")

</div>

This work perfectly! Thanks!

---

<div class="post-metadata">

**Author:** ![robbye91](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/robbye91/32/6553_2.png) [@robbye91](https://community.particle.io/u/robbye91)\
**Post date:** [August 27, 2015, 11:47pm UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/7 "2015-08-27T23:47:26Z")

</div>

If you guys are interested, check out the end result here [http://www.morrama.com/content/2015/8/24/iot-connected-flag](http://www.morrama.com/content/2015/8/24/iot-connected-flag)

---

<div class="post-metadata">

**Author:** ![webjedi](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/webjedi/32/3410_2.png) [@webjedi](https://community.particle.io/u/webjedi)\
**Post date:** [October 8, 2015, 9:39am UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/8 "2015-10-08T09:39:43Z")

</div>

Good stuff - thanks for sharing your project

---

<div class="post-metadata">

**Author:** ![DrDjaevel](https://avatars.discourse-cdn.com/v4/letter/d/22d042/32.png) [@DrDjaevel](https://community.particle.io/u/DrDjaevel)\
**Post date:** [October 10, 2015, 5:42pm UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/9 "2015-10-10T17:42:14Z")

</div>

Thank you!  
I’m just starting up and this was a good example to start with.

---

<div class="post-metadata">

**Author:** ![demented](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/demented/32/10716_2.png) [@demented](https://community.particle.io/u/demented)\
**Post date:** [November 11, 2015, 9:18am UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/10 "2015-11-11T09:18:20Z")

</div>

The amount of love I have for that post is remarkable!

---

<div class="post-metadata">

**Author:** ![mjwilson.ee](https://avatars.discourse-cdn.com/v4/letter/m/b9e5f3/32.png) [@mjwilson.ee](https://community.particle.io/u/mjwilson.ee)\
**Post date:** [December 11, 2015, 12:59am UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/11 "2015-12-11T00:59:03Z")

</div>

This getting started tutorial is awesome!

Now I’m trying to figure out how to use this same Javascript/Ajax method to read variables being published.

---

<div class="post-metadata">

**Author:** ![bko](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/bko/32/20704_2.png) [@bko](https://community.particle.io/u/bko)\
**Post date:** [December 11, 2015, 1:26am UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/12 "2015-12-11T01:26:36Z")

</div>

Hi @mjwilson.ee

Check the Tutorial category here in the forum–there are tutorials for both reading variables and dealing with published event data.

---

<div class="post-metadata">

**Author:** ![Moors7](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/moors7/32/588_2.png) [@Moors7](https://community.particle.io/u/Moors7)\
**Post date:** [December 11, 2015, 10:12am UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/13 "2015-12-11T10:12:12Z")

</div>

> [@mjwilson.ee](#):
>
> variables being published.

Just to clear that up, variables aren't pushed, they're requested. You need to contact the API to tell it that you'd like a variable returned.  
SSEs are pushed, to which you only have to subscribe.  
There's a big difference between the two, and each has its pros and cons. Check the tutorials by @bko to find out how to use either 😄

---

<div class="post-metadata">

**Author:** ![ScruffR](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/scruffr/32/6952_2.png) [@ScruffR](https://community.particle.io/u/ScruffR)\
**Post date:** [December 11, 2015, 1:56pm UTC](https://community.particle.io/t/make-simple-web-button-to-send-string-command-to-photon/14591/14 "2015-12-11T13:56:12Z")

</div>

And to clear it up a bit more:  
`Particle.variables()` are **_exposed_** (_made public_) by the device (by use of the `Particle.variable()` function) to be **_requested_** via the cloud (by use of an appropriately formatted GET request) 😉