Handling POSTed data from forms

You are reading a single comment by @user92178 and its replies. Click here to read the full conversation.

•

allObjects

@92178, give code below - version 1 - a shot (changes marked/commented with // ##### ....).

var WIFI_NAME = "";
var WIFI_KEY = "";
var wifi;

// ##### globals to hold on to posted data and use it in page rendering
var led1 = 0;
var led2 = 0;

// This serves up the webpage
function onPageRequest(req, res) {
  var a = url.parse(req.url, true);
  if (a.pathname=="/") {
    // handle the '/' (root) page...
    // If we had a POST, handle the data we're being givem
    if (req.method=="POST" && 
        req.headers["Content-Type"]=="application/x-www-form-urlencoded")
      handlePOST(req);
    // Otherwise write the main page. We're using
    // ES6 Template Literals here to make the HTML easy
    // to read.
    res.writeHead(200, {'Content-Type': 'text/html'});
    // ##### use expressions in template to un/check checkboxes
    res.end(`
<html>
 <body>
  <form action="#" method="post">
    <label for="mytext">Some text to send:</label>
    <input type="text" id="mytext" name="mytext" value="Testing"/><br/>
    <label for="led1">LED1 (red):</label>
    <input type="checkbox" id="led1" name="led1" value="1"${(led1)?" checked":""}><br/>
    <label for="led2">LED2 (green):</label>
    <input type="checkbox" id="led2" name="led2" value="1"${(led2)?" checked":""}><br/>
    <button>Submit</button>
  </form>
 </body>
</html>`); // render with variables
  } else {
    // Page not found - return 404
    res.writeHead(404, {'Content-Type': 'text/plain'});
    res.end("404: Page "+a.pathname+" not found");
  }
}

// This handles any received data from the POST request
function handlePOST(req) {
  var data = "";
  req.on('data', function(d) { data += d; });
  req.on('close', function() {
    // closed - now handle the url encoded data we got
    var postData = {};
    data.split("&").forEach(function(el) {
      var els = el.split("=");
      postData[els[0]] = decodeURIComponent(els[1]);
    });
    // finally our data is in postData
    console.log(postData);
    // do stuff with it!
    // ##### updated the globals for led statuses and used it in turning them on/off
    led1 = postData.led1;
    led2 = postData.led1;
    console.log("We got sent the text ", postData.mytext);
    digitalWrite(LED1, led1);
    digitalWrite(LED2, led2);
  });
}

// .... rest of the code

This is one way to do it... another one - version 2 - would be to read the status of the leds right in the expressions in the template, which would then be the only change to the code, such as:

...
    <label for="led1">LED1 (red):</label>
    <input type="checkbox" id="led1" name="led1" value="1"${(digitalRead(LED1))?" checked":""}><br/>
    <label for="led2">LED2 (green):</label>
    <input type="checkbox" id="led2" name="led2" value="1"${((digitalRead(LED1))?" checked":""}><br/>
...

Version 2 though works only when the LED1 and LED2 pins are set to some of output... In other words, if it is not working, add these two lines before line function onPageRequest(req, res) {...:

pinMode(LED1,"output");
pinMode(LED2,"output");

The reason that both versions works is due to the fact that get and post have the same code path to respond to the request and therefore respond with the same html. Just before the response is created, post data is processed is conditionally invoked (if (req.method=="POST" && ...) in order to set variables / LED statuses to be consumed in the response (html) creation.

•

user92178 in reply to @allObjects

Thank you, allObjects. I greatly appreciate your guidance and time and will try the changes you suggest. I am not much of a programmer and only barely know enough to keep my nose above water, but now and then I manage to get my code working. Kind of.

Handling POSTed data from forms

About

Espruino