-->
Page 1 of 1

ESP8266 hide webpage button based on Boolean status

PostPosted: Fri Mar 11, 2022 5:32 am
by dbacon2201
I am new to the ESP8266 and have limited knowledge of html.

I am using NodeMCU ESP8266 ESP-12E

I have a webpage which is hosted on the ESP8266 where I am sending email and other information into the program - this is all working ok apart from being able to hide the html button based on a condition; when the email is sent a Boolean is set to true in the program (mail_send) and I am using this in an if statement to change the button attribute to hidden, but it is not working and I cannot see why.

Any help appreciated - apologies if it is a dumb question or if I misunderstand how to code it correctly.

void handleRoot() {
snprintf ( htmlResponse, 3000,
"<!DOCTYPE html>\
<html lang=\"en\">\
<head>\
<style>\
body {background-color: rgb(160, 0, 53);}\
h3 {color: white;text-align:center;}\
p {color: white; text-align:center;}\
div {color: white; text-align:center;}\
ID {text-align:center;}\
input {text-align:center;}\
</style>\
<meta charset=\"utf-8\">\
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\
</head>\
<body>\
<h3>\<canter>Remote Lock</canter>\</h3>\
<p>\<canter>Please type your Email Address</canter>\</p>\
<div><input type='text' name='user_email' id='user_email' align='center' size=30 autofocus></div> \
<div>\
<br><button id=\"send_mail\" type=\"button\" onclick=\"alert('Email Sent!');\">Send mail</button>\
</p>\
<div>Enter OTP: <input type='text' name='OTP_code' id='OTP_code' align='center' size=6 autofocus></div> \
<div>\
<br><button id=\"Lock_button\">Lock</button>\
<div>\
<script>\
if (mail_send == true) { \
let element = document.getElementById(\"send_mail\"); \
let hidden = element.getAttribute(\"hidden\");\
if (hidden) { \
element.removeAttribute(\"hidden\");\
} else {\
element.setAttribute(\"hidden\", \"hidden\");\
}\
} \
</script>\
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\
<script>\
var pass;\
$('#send_mail').click(function(e){\
e.preventDefault();\
pass = $('#user_email').val();\
$.get('/save?pass=' + pass, function(data){\
console.log(data);\
});\
});\
</script>\
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\
<script>\
var OTPcode;\
$('#Lock_button').click(function(e){\
e.preventDefault();\
OTPcode = $('#OTP_code').val();\
$.get('/save?OTPcode=' + OTPcode, function(data){\
console.log(data);\
});\
});\
</script>\

Re: ESP8266 hide webpage button based on Boolean status

PostPosted: Sat Mar 12, 2022 1:00 pm
by quackmore
The HTMLElement property hidden is a boolean value which is true if the element is hidden; otherwise the value is false.

and in your code:
Code: Select all
let hidden = element.getAttribute(\"hidden\");\
if (hidden) { \
element.removeAttribute(\"hidden\");\
} else {\
element.setAttribute(\"hidden\", \"hidden\");\
                                     ^
                                     +-- this is a string value, not a boolean value
}\

Re: ESP8266 hide webpage button based on Boolean status

PostPosted: Sun Mar 13, 2022 6:02 am
by Inq720
I've used the hidden property as well. It works fine, but I already had this written up years ago.

Code: Select all 
function visible(el, show)
{
    // el = document.getElementById(id)
    // show = true/false
    if (show)
        el.style.display = "block";
    else
        el.style.display = "none";
};