How to call a user function from a HTML code

Projects Programming
1

Hi, I really need your support and I hope you can find a minute to help me calling a user function from this HTML code (the OTA WebUpdater example), replacing the "window.open('/serverIndex')" line statement:

const char* loginIndex = 
 "<form name='loginForm'>"
    "<table width='20%' bgcolor='A09F9F' align='center'>"
        "<tr>"
            "<td colspan=2>"
                "<center><font size=4><b>ESP32 Login Page</b></font></center>"
                "
"
            "</td>"
            "
"
            "
"
        "</tr>"
        "<td>Username:</td>"
        "<td><input type='text' size=25 name='userid'>
</td>"
        "</tr>"
        "
"
        "
"
        "<tr>"
            "<td>Password:</td>"
            "<td><input type='Password' size=25 name='pwd'>
</td>"
            "
"
            "
"
        "</tr>"
        "<tr>"
            "<td><input type='submit' onclick='check(this.form)' value='Login'></td>"
        "</tr>"
    "</table>"
"</form>"
"<script>"
    "function check(form)"
    "{"
    "if(form.userid.value=='admin' && form.pwd.value=='admin')"
    "{"
    "window.open('/serverIndex')"
    "}"
    "else"
    "{"
    " alert('Error Password or Username')/*displays error message*/"
    "}"
    "}"
"</script>";

The function I need to call is taken from the G6EJD's Tech Note 087 code and is called HomePage():

void HomePage() {
  SendHTML_Header();
  webpage += F("<a href='/download'><button>Descargar</button></a>");
  webpage += F("<a href='/upload'><button>Cargar</button></a>");
  webpage += F("<a href='/stream'><button>Stream</button></a>");
  webpage += F("<a href='/delete'><button>Borrar</button></a>");
  webpage += F("<a href='/dir'><button>Directorio</button></a>");
  append_page_footer();
  SendHTML_Content();
  SendHTML_Stop();
}

I am very inexperienced and I have not gotten it to work.

Oslaf

2

The first snippet contains a javascript script. One of the things that javascript scripts can do is to open a new window (dialog). That command appears to open some kind of file dialog.

What you want to do makes no sense in the context of when that script is called. By the time the page is loaded, and the script poised to do anything, the server is completely done sending the web page to the client.

What you appear to want to do is to have the client add more stuff to the web page that is is displaying when the user clicks the check box item. And that makes no sense.

3

Hi PaulS, actually I want to open a new web page by calling the function HomePage(). I use the G6EJD's code for accessing the SD card in my ESP32 project and I had added the user/password code from the OTA WebUpdater example, so, when the ESP32 server receive a request from a client it first returns the user/password web page and if the entered parameters are correct it should open the G6EJD's web home page. That's is why I'd like to open the home page from the HTML user/password code.

4

Hi PaulS, actually I want to open a new web page by calling the function HomePage()

The browser can not generate the home page. The server does that. The button on your initial form should be a regular submit but, and there should be NO javascript in the file. The credentials entered should be sent to the server, encrypted, for validation, and, if valid, the server should return a different page.

5

Thank you PaulS, finally I do it. In the G6EJD's code I changed server.on("/", HomePage); to server.on("/homepage", HomePage); and in the HTML code I changed "window.open('/serverIndex')" to "window.open('/homepage')".
The initial web page now is the "user/password" page from the OTAWebUpdater example, and when the user and password data is entered it jumps now to the G6EJD's web home page.
It seems now easy but I could not do it before. G6EJD's suggested me the way to do it.