ESPAsyncWebServer using input type="button"

Q&A Forum › Category: ESP32 › ESPAsyncWebServer using input type="button"

0 Vote Up Vote Down

Yves BOURDON asked 5 years ago

hello Sarah.

Again I need your help !

I am working on my project witch uses Ruis thermostat web server as a basis.

I want to add a button that will call myFunction().

I have created the button using:

<form action="/get">
WiFi_password <input type="password" name="password" value=%WifiPassword% minlength="14" maxlength="16" size="10">
&nbsp&nbsp&nbsp<input type="submit" value="Valide"><br><br>
Efface tout&nbsp<input type="button" onclick="alert('Clear EEPROM')" value="ClearEEPROM">
</form>

my problem is how to detect this when I receive an HTTP Get request.

As a button has “no Param” I guess I can’t use if (request->hasParam(PARAM_INPUT_x)) { to detect the button ?
I am not sure I am very clear, but if you understand my question I would appreciate your answer.

Thank you so much in advance.

Yves

3 Answers

0 Vote Up Vote Down

Sara Santos Staff answered 5 years ago

Hi Yves.

You need to create a “normal” button, that when clicked calls a javascript function that makes a get request. For example, add the button as follows.

<button type="button" onclick="EEPROMRequest();">Efface tout</button>

Then, add the following to the HTML text to include the javascript function.This function will make a request on the /eraseEEPROM URL, when you click on the button.

<script>
function EEPROMRequest () {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "/eraseEEPROM", true);
  xhttp.send();
}
</script>

Then, on the ESP32, you need to handle what happens when you receive a request on the /eraseEEPROM URL, for example:

 server.on("/eraseEEPROM", HTTP_GET, [](AsyncWebServerRequest *request){
   eraseEEPROM = true;
  });

I tested this using an HTML file and it worked well. I haven’t tested on the ESP32, but I think it should work.

I hope this helps.

Regards,
Sara

0 Vote Up Vote Down

Yves BOURDON answered 5 years ago

Dear Sara,
Thank you so much, everything is ok !
I have spent many hours on the web to find a solution and yours is the perfect one !
I am sure this will help other amateurs who are starting out with HTML and Javascript.
I just have to add CSS code to improve the aesthetics of my web server and I can publish my full project.
I hope you and your family are well. Take care of yourself ! Sincerely. Yves

0 Vote Up Vote Down

Sara Santos Staff answered 5 years ago

Hi again.

I’m glad everything is working well.

Here, we are all fine. I hope everything is well with you and your loved ones.
Regards,
Sara