ESP32 Async Webserver, Updating Variables with Buttons and Radio Buttons

Hello everyone,

i use this tutorial as basis for my program. It works pretty well.

My problem is i want to use "Refresh" Buttons to update some variables from the main-code to the html code and also use Radio Buttons (or similar input) to change some variables in the main-code

I read about AJAX/jQuery but i am really new into this so this is what i tried.

Since my HTML code is pretty long im going to post the necessary bits and if wanted i can post everything

<!DOCTYPE HTML>
<html>
<head>
  <title>ESP Input Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>    

  </style>
  </head>
  <body>
  <h2>Musik f&uuml;r Geh&ouml;rlose</h2>
  
  <h3><u>Generelle Einstellungen:</u></h3>
  
  <form action="/get" class="radio">
    <h4>DC-Offset (current value %dcOffset%)</h4>
    <input type="button" value="Measure" onclick="measure()">
    <input type="button" value="Kalibieren" onclick="kalibieren()">

  </form>
  
  
  <h4>Zeige Peaks:</h4>
  <form action="/get" class="radio">
    <input type="radio" id="on" name="show_peaks" value="on">
    <label for="on">An</label>
    <input type="radio" id="off" name="show_peaks" value="off">
    <label for="off">Aus</label>

    <input type="submit" value="Speichern" onclick="return RadioValidator()>
  </form>
  

  <script>
    function RadioValidator() {
      if(document.getElementById('on').checked) {
        show_peaks = true;  
      }
      else if(document.getElementById('off').checked) {
        show_peaks = false; 
      }
    }
  </script>
  
</body>
</html>

With the script function RadioValidator i want to change the variable in the code but its not really working.

The %DC_Offset% variable should be changed via a the Measure Button which maybe could work similar to the script function.

I also tried to change the %DC_Offset% variable like this which should search for the variable and replace it (but it didnt work):

String processor(const String& var){
  //Serial.println(var);
  if(var == "dcOffset"){
    return "changed_dcOffset";
  }
  return String();
}

If there are any questions, feel free to ask.
Thanks for your help

Greetings,

Xenoshell

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.