Hide and show input fields |
Hide and show input fields |
Caruban |
Sep 20 2019, 09:39 PM
Post
#1
|
Group: Members Posts: 2 Joined: 20-September 19 Member No.: 26,997 |
Hi All,
Hope everyone is well. This is my first forum post so please bear with me. As mentioned in the title, I wanted to cycle between two input fields (in the same position) upon selecting a value from a <Select> drop down. My code is as follows: <body> Calculator: <select id = "Calc_type" onchange="hideField(Calc_type.value);"> <option value="1">mV to T</option> <option value="2">T to mV</option> </select><br> <div id="div_mv"> Voltage (mV): <input type="number" id="mv_read"> </div> <div id="div_temp"> Temperature (℃): <input type="number" id="temp_amb" value="25"> </div> <br><br> <input type="button" id="calc_btn1" value="Calculate"> <script type="text/javascript"> function hideField(Calc_type) { var Ctype = document.getElementById(Calc_type).value; if (Ctype == "1") { document.getElementById(div_mv).style.display="block"; document.getElementById(div_temp).style.display="none"; } else { document.getElementById(div_mv).style.display="none"; document.getElementById(div_temp).style.display="block"; } } </script> </body> If I place style="display:none;" in any of the divs, it hides the field. But using it in javascript (or jQuery) doesn't work. If possible, I would like to avoid using jQuery. I appreciate you taking the time to read through this. Kind regards, Caru |
Christian J |
Sep 21 2019, 06:10 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Hi All, Hope everyone is well. This is my first forum post so please bear with me. Hi and welcome! Everything is under control. QUOTE onchange="hideField(Calc_type.value);"> "Calc_type" above is not defined (MSIE browsers may assume that it's an ID, but don't rely on that). Use this instead: CODE onchange="hideField(this.value);"> QUOTE function hideField(Calc_type) To avoid name collisions it's perhaps safest not to use the same varaible or function parameter name as an existing ID. Let's call it "foo" instead: CODE function hideField(foo) (without quotes). QUOTE var Ctype = document.getElementById(Calc_type).value; The above is incorrect: it looks for the ID of the variable "Calc_type", but that variable is not an ID value --it's the chosen SELECT menu value from the onchange event. QUOTE document.getElementById(div_mv).style.display="block"; The ID here is a string, not a variable, so it needs to be quoted: CODE document.getElementById('div_mv').style.display="block"; (same applies to all four in the IF/ELSE conditions). QUOTE If I place style="display:none;" in any of the divs, it hides the field. That's the easiest method, the disadvantage is that the field stays permanently hidden if the user has disabled javascript. A more complex yet reliable method might be to hide it with javascript as well: CODE window.addEventListener('DOMContentLoaded', function() { document.getElementById('div_temp').style.display='none'; }); |
Christian J |
Sep 21 2019, 06:11 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Here's the whole thing:
CODE Calculator: <select id = "Calc_type" onchange="hideField(this.value);"> <option value="1">mV to T</option> <option value="2">T to mV</option> </select><br> <div id="div_mv"> Voltage (mV): <input type="number" id="mv_read"> </div> <div id="div_temp"> Temperature: <input type="number" id="temp_amb" value="25"> </div> <br><br> <input type="button" id="calc_btn1" value="Calculate"> <script type="text/javascript"> function hideField(foo) { if (foo == "1") { document.getElementById('div_mv').style.display="block"; document.getElementById('div_temp').style.display="none"; } else { document.getElementById('div_mv').style.display="none"; document.getElementById('div_temp').style.display="block"; } } window.addEventListener('DOMContentLoaded', function() { document.getElementById('div_temp').style.display='none'; }); </script> |
Caruban |
Sep 21 2019, 08:07 AM
Post
#4
|
Group: Members Posts: 2 Joined: 20-September 19 Member No.: 26,997 |
Here's the whole thing: CODE Calculator: <select id = "Calc_type" onchange="hideField(this.value);"> <option value="1">mV to T</option> <option value="2">T to mV</option> </select><br> <div id="div_mv"> Voltage (mV): <input type="number" id="mv_read"> </div> <div id="div_temp"> Temperature: <input type="number" id="temp_amb" value="25"> </div> <br><br> <input type="button" id="calc_btn1" value="Calculate"> <script type="text/javascript"> function hideField(foo) { if (foo == "1") { document.getElementById('div_mv').style.display="block"; document.getElementById('div_temp').style.display="none"; } else { document.getElementById('div_mv').style.display="none"; document.getElementById('div_temp').style.display="block"; } } window.addEventListener('DOMContentLoaded', function() { document.getElementById('div_temp').style.display='none'; }); </script> Wow! Never have I encountered a more detailed explanation on coding. Thank you very much Christian! |
Christian J |
Sep 21 2019, 12:48 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
You're welcome!
|
Lo-Fi Version | Time is now: 26th April 2024 - 09:11 AM |