[GH-ISSUE #1280] Alternative for getting values from custom HTML params #1097

New issue

Open

opened 2026-02-28 01:28:30 +03:00 by kerem · 3 comments

kerem commented

2026-02-28 01:28:30 +03:00

Owner

Originally created by @witnessmenow on GitHub (Aug 17, 2021).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1280

I'm not sure if this is interesting to people, but I had a thought that it is possible to use a couple of lines of javascript to save the output of Custom HTML parameters to regular field, and just hide that field.

I'm not sure it's anymore useful than the existing way to get values out, but just thought I would share it as an option.

  //Select menu (custom HTML)
  // The custom html options do not get handled the same way as other standard ones
  // but im using some javascript trickery here to save the output of the drop down
  // into a standard WM field that im hiding
  // Not sure if it's better or worse than the standard way

  int day = 3;
  char * daysOfWeek[] = { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" };

  const char* day_select_str = R"(
  <br/><label for='day'>Custom Field Label</label>
  <select name="dayOfWeek" id="day" onchange="document.getElementById('key_custom').value = this.value">
    <option value="0">Monday</option>
    <option value="1">Tuesday</option>
    <option value="2">Wednesday</option>
    <option value="3">Thursday</option>
    <option value="4">Friday</option>
    <option value="5">Saturday</option>
    <option value="6">Sunday</option>
  </select>
  <script>
    document.getElementById('day').value = "%d";
    document.querySelector("[for='key_custom']").hidden = true;
    document.getElementById('key_custom').hidden = true;
  </script>
  )";

  char bufferStr[700];
  // The sprintf is so we can input the value of the current selected day
  // If you dont need to do that, then just pass the const char* straight in.
  sprintf(bufferStr, day_select_str, day);

  Serial.print(bufferStr);
  
  WiFiManagerParameter custom_field(bufferStr);
  sprintf(convertedValue, "%d", day); // Need to convert to string to display a default value.

  WiFiManagerParameter custom_hidden("key_custom", "Will be hidden", convertedValue, 2);

  wm.addParameter(&custom_hidden);
  wm.addParameter(&custom_field);

  // Do your autoConnect or whatever here

  day = atoi(custom_hidden.getValue());
  Serial.print("Selected Day: ");
  Serial.println(daysOfWeek[day]);

Originally created by @witnessmenow on GitHub (Aug 17, 2021). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1280 I'm not sure if this is interesting to people, but I had a thought that it is possible to use a couple of lines of javascript to save the output of Custom HTML parameters to regular field, and just hide that field. I'm not sure it's anymore useful than the existing way to get values out, but just thought I would share it as an option. ```JS //Select menu (custom HTML) // The custom html options do not get handled the same way as other standard ones // but im using some javascript trickery here to save the output of the drop down // into a standard WM field that im hiding // Not sure if it's better or worse than the standard way int day = 3; char * daysOfWeek[] = { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" }; const char* day_select_str = R"( <br/><label for='day'>Custom Field Label</label> <select name="dayOfWeek" id="day" onchange="document.getElementById('key_custom').value = this.value"> <option value="0">Monday</option> <option value="1">Tuesday</option> <option value="2">Wednesday</option> <option value="3">Thursday</option> <option value="4">Friday</option> <option value="5">Saturday</option> <option value="6">Sunday</option> </select> <script> document.getElementById('day').value = "%d"; document.querySelector("[for='key_custom']").hidden = true; document.getElementById('key_custom').hidden = true; </script> )"; char bufferStr[700]; // The sprintf is so we can input the value of the current selected day // If you dont need to do that, then just pass the const char* straight in. sprintf(bufferStr, day_select_str, day); Serial.print(bufferStr); WiFiManagerParameter custom_field(bufferStr); sprintf(convertedValue, "%d", day); // Need to convert to string to display a default value. WiFiManagerParameter custom_hidden("key_custom", "Will be hidden", convertedValue, 2); wm.addParameter(&custom_hidden); wm.addParameter(&custom_field); // Do your autoConnect or whatever here day = atoi(custom_hidden.getValue()); Serial.print("Selected Day: "); Serial.println(daysOfWeek[day]); ``` ![image](https://user-images.githubusercontent.com/1562562/129795193-d27e3063-b1af-4b6d-92b4-12edacf83fca.png)

kerem added the

Discussion

Documentation

labels

2026-02-28 01:28:30 +03:00

kerem commented

2026-02-28 01:28:31 +03:00

Author

Owner

@tablatronix commented on GitHub (Aug 17, 2021):

Good idea!, I have been meaning to expand on the param child class with input types, but then there needed to be custom getters for the values and then that led to another issues with param ids... and I kind of gave up on it for now.

But this helps and is a pretty standard solution for things like color pickers already.

@tablatronix commented on GitHub (Aug 17, 2021): Good idea!, I have been meaning to expand on the param child class with input types, but then there needed to be custom getters for the values and then that led to another issues with param ids... and I kind of gave up on it for now. But this helps and is a pretty standard solution for things like color pickers already.

kerem commented

2026-02-28 01:28:31 +03:00

Author

Owner

@G-Pereira commented on GitHub (Apr 28, 2022):

@tablatronix is this still the only way to achieve value parsing from a custom HTML parameter? (embedding custom JS)

@G-Pereira commented on GitHub (Apr 28, 2022): @tablatronix is this still the only way to achieve value parsing from a custom HTML parameter? (embedding custom JS)

kerem commented

2026-02-28 01:28:31 +03:00

Author

Owner

@tablatronix commented on GitHub (Apr 28, 2022):

I added this for testing,

#1365

https://github.com/tzapu/WiFiManager/tree/feature_statichtmlparams

@tablatronix commented on GitHub (Apr 28, 2022): I added this for testing, #1365 https://github.com/tzapu/WiFiManager/tree/feature_statichtmlparams