MiroPython + HTML: modify form based on user input

General discussions and questions abound development of code with MicroPython that is not hardware specific.
Target audience: MicroPython Users.
Post Reply
Anonymmm
Posts: 9
Joined: Sat Jun 13, 2020 11:32 am

MiroPython + HTML: modify form based on user input

Post by Anonymmm » Mon Jun 15, 2020 2:28 pm

Hello forum,
I am working on a simple wi-fi server using the ESP32 dev module. The goal is to have a html webpage with forms, where the user can input a time at which something turns on/off (a pin starts/stops outputting power). The form will be something like this:

Code: Select all

<form action="/action_page.php">
    <input type="text" id="fname" name="fname" value="09" maxlength="2" size="2">
    :
    <input type="text" id="lname" name="lname" value="00" maxlength="2" size="2">
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <input type="text" id="fname" name="fname" value="13" maxlength="2" size="2">
    :
    <input type="text" id="lname" name="lname" value="00" maxlength="2" size="2">
    <br>
    <br>
    <input type="text" id="fname" name="fname" value="14" maxlength="2" size="2">
    :
    <input type="text" id="lname" name="lname" value="00" maxlength="2" size="2">
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <input type="text" id="fname" name="fname" value="18" maxlength="2" size="2">
    :
    <input type="text" id="lname" name="lname" value="00" maxlength="2" size="2">
    <br>
    <br>
    <input type="submit" value="Save">
    <input type="submit" value="Add line">
    <input type="submit" value="Delete line">

  </form>
Which looks like this in a browser:

Image

However, I would like to make the interface look nice by adding the buttons at the end of my code - "Add line" and "Delete line", so if someone wants their device to only turn on in the morning and turn off in the evening, they will make it so that there only is one line of forms for this (two forms for hour and minute when it should turn on, and two for when it should turn off). Then, if someone else wants their device to turn on and off multiple times a day, they press the "Add line" button a few times to get new forms for new times to be filled. The trouble is, I have no idea how to do this (the add/delete line function). Could anyone perhaps write a small example, or direct me to a tutorial or project that uses something like this? I am very new to this, so any help is very much appreciated.

Post Reply