- Fri Mar 11, 2022 5:32 am
#93884
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>\
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>\
