Posted by: Caruban Sep 20 2019, 09:39 PM
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
Posted by: Christian J Sep 21 2019, 06:10 AM
QUOTE(Caruban @ Sep 21 2019, 04:39 AM)
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';
});
Posted by: Christian J Sep 21 2019, 06:11 AM
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>
Posted by: Caruban Sep 21 2019, 08:07 AM
QUOTE(Christian J @ Sep 21 2019, 09:11 PM)
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!