Tips for extracting information from an HTML input and saving it to a local file for later use

Question

Tips for extracting information from an HTML input and saving it to a local file for later use

Currently, I am in the process of learning about ESP32 and have set myself a project with various objectives:

Successfully setting up ESP32 as a softAP - COMPLETED
Establishing access to ESP32 via WiFi - COMPLETED
Serving an HTML authentication form (index1.html) stored within the flash memory of the ESP32 to request nearby Wireless Network's SSID and Password - COMPLETED
Entering the credentials mentioned above, clicking on a Log-In button, and connecting the ESP32 to the specified Wireless Network
Navigating to a different webpage (index2.html) also located inside the flash memory of the ESP32

Below are the hardware specifications being used for this project:

Board: ESP32 DEVKIT1

Core Installation version: 1.0.1-git link here

IDE name: Arduino IDE

Flash Frequency: 80Mhz

PSRAM enabled: no

Upload Speed: 115200

Computer OS: Linux Mint 19.1 Mate

Although I have conducted thorough research, I have been unable to find applicable information related to my project, hence the creation of this post.

Due to unfamiliarity with posting code correctly (following guidelines found here), I have created gists for reference. Hopefully, they prove useful.

My next objective is to input SSID and Password into their respective fields, click on the "Sign in" button, store these details in a read-only file within the Flash Memory of the ESP32, establish connection to the specified Wireless Network, and serve another webpage from the Flash Memory.

I have not mentioned the use of JavaScript or PhP as I am unsure which one would be suitable or if they can function in this manner.

Alternatively, instead of a read-only file, could there be a small database storing limited Wireless Networks?

Thank you! Apologies for the lengthy post.

html c++css arduino-ide esp32

Answer 1

Answer №1

While I don't have experience with the ESP32 or web services on microcontrollers, my primary work involves writing web services and applications.

If you want to store username and password values by submitting an HTTP request to a separate endpoint, JavaScript can help you achieve this. However, it's worth noting that HTML already has built-in support for forms.

Your current input tags are suitable for working with forms. All you need to do is wrap them in a form element that specifies how to encode and transfer the form values, as well as where to send them. The browser will handle the rest when the submit button is clicked:

<body>
    <div class="login-box">
        <form method="post" action="/login">
            <div class = "box-head">
                <div class = "logo"><img url="logo.png"></div>
                <div class = "network-title"><h1>Network Login</h1></div>
            </div>
            <div class ="textbox">            
                <input type="text" placeholder="Network Name" name="networkName" value="">
            </div>        
            <div class="textbox">            
                <input type="password" placeholder="Password" name="networkPassword" value="">
            </div>        
            <input class="button" type="submit" value="Sign in">
            <input class="button" type="reset" value="Restart">        
        </form>
    </div>    
</body>

This setup would trigger an HTTP POST request to the /login endpoint, containing the form values encoded as

application/x-www-form-urlencoded

.

In this scenario, PHP isn't necessary to handle the request since your logic resides within the AsyncWebServer object in your sketch which acts as the HTTP server.

AsyncWebServerRequest can easily extract form values, simplifying the process of handling form submissions on your server:

server.on("/login", HTTP_POST, [](AsyncWebServerRequest *request) {
  if (!request->hasParam("networkName", true) || !request->hasParam("networkPassword", true)) {
    request->send(400, "Missing fields");
    return;
  }
  const char *networkName = request->getParam("networkName")->value().c_str();
  const char *networkPassword = request->getParam("networkPassword")->value().c_str();
  // Process networkName and networkPassword
  // ...
  // Redirect to another page
  request->redirect("/whatever");
});

Answer 2

While I don't have experience with the ESP32 or web services on microcontrollers, my primary work involves writing web services and applications.

If you want to store username and password values by submitting an HTTP request to a separate endpoint, JavaScript can help you achieve this. However, it's worth noting that HTML already has built-in support for forms.

Your current input tags are suitable for working with forms. All you need to do is wrap them in a form element that specifies how to encode and transfer the form values, as well as where to send them. The browser will handle the rest when the submit button is clicked:

<body>
    <div class="login-box">
        <form method="post" action="/login">
            <div class = "box-head">
                <div class = "logo"><img url="logo.png"></div>
                <div class = "network-title"><h1>Network Login</h1></div>
            </div>
            <div class ="textbox">            
                <input type="text" placeholder="Network Name" name="networkName" value="">
            </div>        
            <div class="textbox">            
                <input type="password" placeholder="Password" name="networkPassword" value="">
            </div>        
            <input class="button" type="submit" value="Sign in">
            <input class="button" type="reset" value="Restart">        
        </form>
    </div>    
</body>

This setup would trigger an HTTP POST request to the /login endpoint, containing the form values encoded as

application/x-www-form-urlencoded

.

In this scenario, PHP isn't necessary to handle the request since your logic resides within the AsyncWebServer object in your sketch which acts as the HTTP server.

AsyncWebServerRequest can easily extract form values, simplifying the process of handling form submissions on your server:

server.on("/login", HTTP_POST, [](AsyncWebServerRequest *request) {
  if (!request->hasParam("networkName", true) || !request->hasParam("networkPassword", true)) {
    request->send(400, "Missing fields");
    return;
  }
  const char *networkName = request->getParam("networkName")->value().c_str();
  const char *networkPassword = request->getParam("networkPassword")->value().c_str();
  // Process networkName and networkPassword
  // ...
  // Redirect to another page
  request->redirect("/whatever");
});

Tips for extracting information from an HTML input and saving it to a local file for later use

index.html

login.css

Arduino IDE Sketch

Answer №1

Similar questions

Error: 'require is not defined' pops up while trying to import into App.js for a React App built with CDN links

Tips for ensuring HTML5 <video> compatibility with CSP in Google Chrome

Extracting particular data from various XML documents and displaying it on an HTML webpage

Refresh your textarea content using the replace method in jQuery

What could be the reason my dropdown menu is not appearing on hover?

Issues arise with HTML and CSS when users begin to scroll the page

Unexpected issue encountered for identifiers beginning with a numerical digit

``There seems to be an issue with disapplying a CSS class using JavaScript

The HTML link is not functioning properly. I included the code "<a href="fileName"></a>" but the link is not working

Using jQuery to choose options and change the background color

Update: "Mui V5 - Eliminate collapse/expand icons in TreeView and reduce TreeItem indentation"

Ways to activate side-to-side scrolling?

Assigning attributes to each letter in a pangram

Leverage the calc() function within the makeStyles method

The react boolean attribute is malfunctioning and the video is not playing automatically

Moving the element from the right side

Creating a website with a seamless image background that fills the entire page

The index.html file seems to be missing from the website's current files

Suggestion for a script that graphs in PHP

Having an issue where the Jquery clone function is only duplicating the content once. Looking to