HTML onclick= to perform void function()

Projects Networking, Protocols, and Devices
1

Can a button action call a void function()? The page loads fine, I get no action from the button. I'll incorporate F-Makro after I get this working correctly. :wink:

void checkForClient()
{
  EthernetClient client = server.available();

  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (readString.length() < 100) {
          readString += c;
        }
        if (c == '\n')
        {
          client.println("HTTP/1.1 200 OK");
          client.println("<!DOCTYPE html>");
          client.println("<html lang='en-US'>\n");
          client.println("Content-Type: text/html");
          client.println();
          client.println("<html>");
          client.println("<head>");
          client.println("<title>Get Buttons Working</title>");
          client.println("</head>");
          client.println("<body>");
          client.println("<h1>Getting the Buttons to do something!</h1>");
          client.println("<form action=submit method=post>");
          client.println("<input type=button onclick=LockPlay() value= Lock Play >"); <--Nothing happens
          client.println("<input type=button onclick=EnblPlay() value=Unlock Play>"); <--Nothing happens
          client.println("</form>");
          client.println("
");
          client.println("</body>");
          client.println("</html>");

          delay(1);
          //stopping client
          client.stop();
          readString = "";
          /////////////////////
        }
      }
    }

    client.stop();
  }
}

void LockPlay()
{
  PlayLock[0] = 0x01;
  PlayLock[1] = 0x01;

  SendTypeR(PlayLock, 2);
  Serial1.readBytes(GSMACKNACK, 1);

}

void EnblPlay()
{
  PlayEnbl[0] = 0x01;
  PlayEnbl[1] = 0x02;

  SendTypeR(PlayEnbl, 2);
  Serial1.readBytes(GSMACKNACK, 1);

}
2

peasoup:
Can a button action call a function()?

Yes, but not the one in your Arduino sketch! You must create Javascript functions LockPlay() and EnblPlay(), and embed them in the HTML-code you're sending to the client. Remember, Javascript runs (in the browser) on the client computer!

Also: "form action=submit" is not valid HTML. After "action=" an URL is expected, like this:

form action="/action_page.php"
3

Erik_Baas:
Yes, but not the one in your Arduino sketch! You must create Javascript functions LockPlay() and EnblPlay(), and embed them in the HTML-code you're sending to the client. Remember, Javascript runs (in the browser) on the client computer!

Also: "form action=submit" is not valid HTML. After "action=" an URL is expected, like this:

form action="/action_page.php"

Thanks for the info. Appreciate it.

4

either send/request a dedicated page to activate your function
or send (POST) parameter to indicate which function should be activated.

If you need an working example try Arduino Webserver Receive POST Data and Parameters

5

noiasca:
either send/request a dedicated page to activate your function
or send (POST) parameter to indicate which function should be activated.

If you need an working example try Arduino Webserver Receive POST Data and Parameters

I used that webpage to get my html code started. I guess my next step is just load just the example and see how it works with the POST aspect because I missed something somewhere.

6 
          client.println("HTTP/1.1 200 OK");
          client.println("<!DOCTYPE html>");
          client.println("<html lang='en-US'>\n");
          client.println("Content-Type: text/html");
          client.println();
          client.println("<html>");
          client.println("<head>");
          client.println("<title>Get Buttons Working</title>");

btw:
that can't be correct: the first line is part of the HTTP header.
DOCTYPE is already part of the HTML document --> it's not a HTTP header field, it belongs to the HTTP Body
html lang ... is part of the HTML document --> HTTP Body

"Content-Type" is a HTTP Header Field. So this belongs up into the HTTP header.

7

I've read through the recommended websites and have done the suggested changes. I've tried to run dozens of examples that don't compile or end up not doing anything. I've searched for how to write Javascript in relation to calling a function on an Arduino. I've found plenty on how to make LEDs go blinky and how to find pin states through Javascript, but absolutely nothing on how to call a function inside the program from Javascript in index.htm and/or a code generated webpage. There are no examples or tutorials that I've found that can assist me how to create this script. When I can find a resource that actually shows you how to call a function from a webpage, I'll be back to share the nuclear launch codes.

8

When I can find a resource that actually shows you how to call a function from a webpage

filed.

see

download the sketch.

Find the line:

if (!strcmp(uri, "/") || !strcmp(uri, "/index.htm"))
  sendPage(client);

THIS WILL CALL THE FUNCTION sendPage().

Q.E.D. And now, please post the nuclear launch codes.

in other words:
The only way you can "call an [ARDUINO] function from JavaScript" is to

  • let JavaScript do a REQUEST to the ARDUINO webserver,
  • on the Arduino read this REQUEST
  • on the Arduino react on this call and start the function on the Arduino

if you have found an example how to switch on a LED - THAT WOULD BE A PERFECT EXAMPLE, because instead of a digitalWrite(LEDPIN, HIGH) - which is function! - call your EnblPlay().

And now the big surprise: for this you don't even need one single line of JavaScript.

  • POST a form or
  • call a page or
  • send GET parameters.

.. all these are plain HTTP methods and can be processed on the Arduino to call a function on the Arduino.

if you still insist on JavaScript: let your JavaScript do a call to your Webserver.

9

Noiasca,

I've tried just switching the names, but was unsuccessful. I'll try your example and do exactly what you say to do. I may post launch codes by the morning. :wink:

10

Noiasca,

I don't know what is different, but 2 days ago the example wouldn't compile for me to test. It looks like there may have been an update yesterday? Anyway, I can upload and it functions. Thank you.

I'm assuming in these lines:

        if ( strncmp( postParameter + 5, "=On", 3) == 0 ) {
          digitalWrite(pin, 1);
        }
        else if ( strncmp( postParameter + 5, "=Off", 4) == 0 ) {
          digitalWrite(pin, 0);

This would be where I would call my functions since it is calling for the Arduino to digitalWrite()?

I was stuck on Javascript because that was the only answer I could find.

Now, the launch codes are: 8, 6, 7, 5, 3, 0, 9 :wink: