• Skip to main content
  • Skip to primary sidebar

RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

  • Courses
  • Forum
    • Forum
    • Ask Question
  • Shop
  • Account
  • Blog
  • Login

Submit clears button states

Q&A Forum › Category: ESP32 › Submit clears button states
0 Vote Up Vote Down
Ron Kreymborg asked 2 years ago

Hi Folks
Congratulations on your “Build Web Servers” book. I refer to it almost every day.
I have a question perhaps you could help me with.
My application is a single page containing several buttons and alpha and numeric inputs. They control a stepper motor driving a small machine where the buttons provide start/stop left/right type commands. The alpha/numerics provide for configuration settings for both the motor and other settings associated with the action buttons. One of the buttons is the standard html Submit button for the alpha/numerics. Pressing this writes the current alpha/numerics into SPIFFS storage and confirms the changes in the display. All other buttons are implemented as “push-on/push-off” and must respond immediately to being pressed.
With the help of your book and the web this is all mostly working – the buttons perform their actions on demand and the parameters are successfully changed by the alpha/numerics.
However, my problem is the Submit button – pressing this will clear all buttons back to their html default value (typically all off). Note it does not change the associated output pin state (so very confusing for the user). Here is the Submit html.
<input type=”submit“, value =”SUBMIT“>
 
To track this down I have created a small project consisting of a button, a numeric input, and the submit button to try various remedies:
I have tried many changes and configurations of the html, json and working code looking for a simple solution. I even considered using two html files.
My last effort added a json handler for the Submit button itself.
window.addEventListener(‘submit‘, getButtonState);
function getButtonState(button) {
   var xhr = new XMLHttpRequest();
   var state;
   state = document.getElementById(OUTPUT_PORT_1).value;
   console.log(state);
   xhr.open(“GET“, “/button?“ + state, true);
   xhr.send();
}
This passes to the c++ code the current value of the action button before the numeric value is sent. This means at the point in the c++ code where the numeric value is being processed and where subsequently the state of the action button will be reset, I have available the previous state of the button.
   server.on(“/button“, HTTP_GET, [](AsyncWebServerRequest *request) {
      AsyncWebParameter* p;
      int params;
      Serial.println(“/button“);
      params = request->params();
      p = request->getParam(0);
      Serial.printf(“%d\n”, params);
      Serial.printf(“%s\n”, p->name());
      buttonState = p->name();
      Serial.printf(“%s\n”, buttonState);
      request->send(200, “text/plain“, “OK“);
   });
 This solution would be fine if I knew some way to change the default state of the button in the html! The standard submit could then proceed and I subsequently update the button state. Here is its html.
<input type=”button“, class=”control“, id=”2“, value=”START“>
Even if I can find a way to alter the button update this seems an overly complicated way to do it. I am sure there must be some other, simpler way to solve this.
Any suggestions would be welcome. I can send you a zip of the whole test project (platformio) if necessary.
Best regards,
Ron Kreymborg

1 Answers
0 Vote Up Vote Down
Sara Santos Staff answered 2 years ago

Hi.
 
If you could send me some print screens of what exactly is happening, it would be better to understand. To share a printscreen, you can can upload your pictures to google drive, imgur or dropbox and then share a link to the files.
 
This example: https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/
uses sliders, but you can easily adapt it to use buttons. The sliders maintain their position and label even after the webpage is refreshed. So, I think you can use the same strategy with your buttons. Read the section “How it works” to see if that solution could be suitable for you.
 
 
Regards,
Sara

Primary Sidebar

Login to Ask or Answer Questions

This Forum is private and it’s only available for members enrolled in our Courses.

Login »

Latest Course Updates

  • [eBook Updated] Learn Raspberry Pi Pico/Pico W with MicroPython eBook – Version 1.2 May 26, 2025
  • [New Edition] Build ESP32-CAM Projects eBook – 2nd Edition April 16, 2025

You must be logged in to view this content.

Contact Support - Refunds - Privacy - Terms - MakerAdvisor.com - Member Login

Copyright © 2013-2025 · RandomNerdTutorials.com · All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.