How do I get user input through html to MKR 1010?

Hello, I followed the simple IoT tutorial to control LED through html on MKR 1010 and that works great. Now I want to try getting some user string or int value from html to control motor speed with MKR 1010.

I've added a html snippet like this

client.print("Input: <input type = \"text\" name = \"input\" value = \"Value\"><br>");
client.print("<input type=\"submit\" value = \"Submit\">");

and it displays exactly what I want on the browser, a text box to enter a value and submit button once the value is entered. But I can't figure out a way to grab these values and onto arduino. I've looked at the html string values being sent to arduino and it's no different than from original tutorial code, and pushing submit button doesn't seem to send any new request to arduino either. What am I missing to get values?

I've looked for similar example and I found some for ESP arduino that has methods like server.arg("value_name") to grab the values but looks like these methods are missing on MKR. I'm fairly ok with embedded programming, but I have 0 knowledge of web programming so maybe this is something obvious, or maybe I'm going at it completely wrong. Any advice would be great!

why did you post this in "IoT Cloud"category?
"IoT Cloud" is a service by Arduino. how is it related to your post?

Changed tag

This is more a question how "html" and a HTTPD implementation works (requests):
Try to figure out how a POST and a GET response will look like (e.g. "GET ...").

I use this approach to have "forms" and to handle it in my MCU HTTPD (server):
easiest way is to use "GET" for the "form method":

Here is what happens behind the scene:

  1. you provide a web form from MCU to user (visible in web browser):
    he will enter in browser e.g.: "mcu" (where mcu can be its IP address or with NetBios the device name),
    or you enter: "10.11.12.13/index.html" (index.html is default when not given as web page after IP address)
  2. it will create an incoming request on MCU as:
    "GET index.html"
    So, you send back this index.html file which contains a form, this <input type...
    name="input" ... (your HTML page with form)
    The user fills all the form elements, provides something in "input" field and presses there "Reply" (submit) button (in order to send back this filled form)
  3. What happens is:
    You get back a similar request for this "index.html" but now it comes in as:
    "GET index.html?input=blablabla"
    --> see that the web page is now augmented with the ? and following stuff
  4. I assume here, you use "GET" method to let send a form: it means: the form elements are now part of your URL GET request: you can see, after the ? the names of form elements and their values assigned to it.
  5. What you have to do is "just":
    parse the URL (all comes in as ASCII string): if you find a ? : it is the form element name (related to name=...) and the value (as ASCII text, what the user has entered in form)
  6. parse the URL string and you get the values for the form elements (more than one possible, but GET is a bit limited by the max. URL string length, e.g. 2048 characters in total), all via GET method is the URL string itself
    (with POST: the content would be inside the page content you get, you had to process the page content, not just the URL: a bit more complicated)

It is just understanding GET and POST, URLs and how a new page (e.g. after submit of a form) is requested: by parsing URL (with GET method) - you will see all in URL string, sent as a request for a new web page.

So:
I get in my HTTPD always something like this:
"GET index.html" : the user has just entered request the main form
"GET index.html?input=blablabla; input2=otherBlablabla" : when user sends me back the filled form (with GET method)

You can parse the URL string, extract all this stuff after ? and figure out which form element (name) has which (ASCII) value (after the =).

1 Like

Not sure, but I think if form has more than one element, you get back:
"GET index.html?input=blablabla&input2=otherBlablabla"

Anyway: just trace and log your URLs you get as request and try to use GET method (if not so much data returning back).
You will understand by what you see as URL requests...

Sorry for the late reply.

This was exactly what I was looking for and the basic information I was lacking that I needed to understand, start learning. Thank you!

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.