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

  <title>ESP Input Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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()">

  <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()>

    function RadioValidator() {
      if(document.getElementById('on').checked) {
        show_peaks = true;  
      else if(document.getElementById('off').checked) {
        show_peaks = false; 

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){
  if(var == "dcOffset"){
    return "changed_dcOffset";
  return String();

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