Hide and show input fields - HTMLHelp Forums

Welcome Guest ( Log In | Register )

Hide and show input fields

Options

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