starred/WiFiManager

Fork 0

mirror of https://github.com/tzapu/WiFiManager.git synced 2026-04-27 00:55:52 +03:00

[GH-ISSUE #78] Any Way to add Custom Fields to be saved #54

New issue

Closed

opened 2026-02-28 01:23:07 +03:00 by kerem · 11 comments

kerem commented

2026-02-28 01:23:07 +03:00

Owner

Originally created by @yomasa on GitHub (Jan 19, 2016).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/78

I want to save the "mqtt_server" , "mqtt_port", "mqtt_user","mqtt_password" ?

Thanks
Jorge

Originally created by @yomasa on GitHub (Jan 19, 2016). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/78 I want to save the "mqtt_server" , "mqtt_port", "mqtt_user","mqtt_password" ? Thanks Jorge

kerem closed this issue

2026-02-28 01:23:07 +03:00

kerem commented

2026-02-28 01:23:07 +03:00

Author

Owner

@Jorgen-VikingGod commented on GitHub (Jan 20, 2016):

there is already support for custom fields:
https://github.com/tzapu/WiFiManager/blob/master/examples/AutoConnectWithFSParameters/AutoConnectWithFSParameters.ino#L73-L93

@Jorgen-VikingGod commented on GitHub (Jan 20, 2016): there is already support for custom fields: https://github.com/tzapu/WiFiManager/blob/master/examples/AutoConnectWithFSParameters/AutoConnectWithFSParameters.ino#L73-L93

kerem commented

2026-02-28 01:23:08 +03:00

Author

Owner

@tzapu commented on GitHub (Jan 20, 2016):

thanks Jorgen , mentioned in docs here https://github.com/tzapu/WiFiManager#custom-parameters

@tzapu commented on GitHub (Jan 20, 2016): thanks Jorgen , mentioned in docs here https://github.com/tzapu/WiFiManager#custom-parameters

kerem commented

2026-02-28 01:23:08 +03:00

Author

Owner

@Jorgen-VikingGod commented on GitHub (Jan 20, 2016):

@tzapu Wow, did not see the updated doc yet.
Awesome work - really like what you did

@Jorgen-VikingGod commented on GitHub (Jan 20, 2016): @tzapu Wow, did not see the updated doc yet. Awesome work - really like what you did

kerem commented

2026-02-28 01:23:08 +03:00

Author

Owner

@tzapu commented on GitHub (Jan 20, 2016):

thanks, could not have done it without all your guy's help

@tzapu commented on GitHub (Jan 20, 2016): thanks, could not have done it without all your guy's help

kerem commented

2026-02-28 01:23:08 +03:00

Author

Owner

@drvpn commented on GitHub (Jun 21, 2022):

I would love to see an example where a custom field input type was password. I have figured out how to add the field to the webpage but I cannot figure out how to store the password in a variable. custom_field.getValue() doesn't work.

Below is snippet of code how I added the field.

const char* custom_mpass_str = "<br/><label for='pwd'>MQTT Password:</label><input type='password' id='pwd' name='pwd'>";
new (&custom_field) WiFiManagerParameter(custom_mpass_str); // custom html input

wm.addParameter(&custom_field);

Does anyone know how I can get the pwd's value and store it in variable?

Thanks!

@drvpn commented on GitHub (Jun 21, 2022): I would love to see an example where a custom field input type was password. I have figured out how to add the field to the webpage but I cannot figure out how to store the password in a variable. custom_field.getValue() doesn't work. Below is snippet of code how I added the field. ``` const char* custom_mpass_str = "<br/><label for='pwd'>MQTT Password:</label><input type='password' id='pwd' name='pwd'>"; new (&custom_field) WiFiManagerParameter(custom_mpass_str); // custom html input wm.addParameter(&custom_field); ``` Does anyone know how I can get the pwd's value and store it in variable? Thanks!

kerem commented

2026-02-28 01:23:08 +03:00

Author

Owner

@tablatronix commented on GitHub (Jun 21, 2022):

See the fs examples, spiffs etc

@tablatronix commented on GitHub (Jun 21, 2022): See the fs examples, spiffs etc

kerem commented

2026-02-28 01:23:08 +03:00

Author

Owner

@drvpn commented on GitHub (Jun 21, 2022):

Thanks @tablatronix but unfortunately that example doesn't help. Below is all the parameters that is configured in https://github.com/tzapu/WiFiManager/blob/master/examples/Parameters/SPIFFS/AutoConnectWithFSParameters/AutoConnectWithFSParameters.ino and this method only works to create input type="text" not input type="password". I am looking to input an actual password, so people cannot shoulder surf and see the password.

WiFiManagerParameter custom_mqtt_server("server", "mqtt server", mqtt_server, 40);
WiFiManagerParameter custom_mqtt_port("port", "mqtt port", mqtt_port, 6);
WiFiManagerParameter custom_api_token("apikey", "API token", api_token, 32);

Since I cannot use the above method to create a field with input type="password" I have found that I can add a password field like this:

const char* custom_mpass_str = "<br/><label for='pwd'>MQTT Password:</label><input type='password' id='pwd' name='pwd'>";
new (&custom_field) WiFiManagerParameter(custom_mpass_str); // custom html input
wm.addParameter(&custom_field);

This works but I cannot figure out how to get the value out of the webpage and into a variable. This follow method won't work:

strcpy(mqtt_server, custom_field.getValue());

So looks like I am stuck here unless I can find a way to retrieve the input value, when the form is submitted, and store it in a variable. Any ideas?

@drvpn commented on GitHub (Jun 21, 2022): Thanks @tablatronix but unfortunately that example doesn't help. Below is all the parameters that is configured in https://github.com/tzapu/WiFiManager/blob/master/examples/Parameters/SPIFFS/AutoConnectWithFSParameters/AutoConnectWithFSParameters.ino and this method only works to create input type="text" not input type="password". I am looking to input an actual password, so people cannot shoulder surf and see the password. ``` WiFiManagerParameter custom_mqtt_server("server", "mqtt server", mqtt_server, 40); WiFiManagerParameter custom_mqtt_port("port", "mqtt port", mqtt_port, 6); WiFiManagerParameter custom_api_token("apikey", "API token", api_token, 32); ``` Since I cannot use the above method to create a field with input type="password" I have found that I can add a password field like this: ``` const char* custom_mpass_str = "<br/><label for='pwd'>MQTT Password:</label><input type='password' id='pwd' name='pwd'>"; new (&custom_field) WiFiManagerParameter(custom_mpass_str); // custom html input wm.addParameter(&custom_field); ``` This works but I cannot figure out how to get the value out of the webpage and into a variable. This follow method won't work: `strcpy(mqtt_server, custom_field.getValue());` So looks like I am stuck here unless I can find a way to retrieve the input value, when the form is submitted, and store it in a variable. Any ideas?

kerem commented

2026-02-28 01:23:08 +03:00

Author

Owner

@tablatronix commented on GitHub (Jun 21, 2022):

you can just add type='password' to the custom html parameter? not sure if there is another way to add password to an input.

@tablatronix commented on GitHub (Jun 21, 2022): you can just add `type='password'` to the custom html parameter? not sure if there is another way to add password to an input.

kerem commented

2026-02-28 01:23:08 +03:00

Author

Owner

@drvpn commented on GitHub (Jun 21, 2022):

Thanks again @tablatronix I found a solution in an example that used radio buttons. It used the follow code and it seems to work with my custom password field as well. Here is the function that was required:

String getParam(String name) {
  //read parameter from server, for customhmtl input
   String value;
  if (wm.server->hasArg(name)) {
    value = wm.server->arg(name);
  }
  return value;
}

Here is the link to the solution I found: https://github.com/tzapu/WiFiManager/issues/1158#issuecomment-1047708779

Thanks so much for all your time!

@drvpn commented on GitHub (Jun 21, 2022): Thanks again @tablatronix I found a solution in an example that used radio buttons. It used the follow code and it seems to work with my custom password field as well. Here is the function that was required: ``` String getParam(String name) { //read parameter from server, for customhmtl input String value; if (wm.server->hasArg(name)) { value = wm.server->arg(name); } return value; } ``` Here is the link to the solution I found: https://github.com/tzapu/WiFiManager/issues/1158#issuecomment-1047708779 Thanks so much for all your time!

kerem commented

2026-02-28 01:23:08 +03:00

Author

Owner

@tablatronix commented on GitHub (Jun 21, 2022):

  WiFiManagerParameter custom_input_type("input_pwd", "input pass", "", 15,"type='password'"); // custom input attrs (ip mask)

adding to the SUPER example

@tablatronix commented on GitHub (Jun 21, 2022): ```C++ WiFiManagerParameter custom_input_type("input_pwd", "input pass", "", 15,"type='password'"); // custom input attrs (ip mask) ``` adding to the SUPER example

kerem commented

2026-02-28 01:23:08 +03:00

Author

Owner

@drvpn commented on GitHub (Jun 21, 2022):

@tablatronix That works like a charm and is far more intuitive than the getParam solution. Today you are my code hero, thanks so much! 🥇

@drvpn commented on GitHub (Jun 21, 2022): @tablatronix That works like a charm and is far more intuitive than the getParam solution. Today you are my code hero, thanks so much! 🥇

kerem referenced this issue

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

[PR #54] [MERGED] Do not show clear text password in form input field #1570