The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Hide and show input fields
post 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:

<select id = "Calc_type" onchange="hideField(Calc_type.value);">
<option value="1">mV to T</option>
<option value="2">T to mV</option>

<div id="div_mv">
Voltage (mV):  <input type="number" id="mv_read">

<div id="div_temp">
Temperature (℃):  <input type="number" id="temp_amb" value="25">
<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")


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,
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
Caruban   Hide and show input fields   Sep 20 2019, 09:39 PM
Christian J   Hi All, Hope everyone is well. This is my first ...   Sep 21 2019, 06:10 AM
Christian J   Here's the whole thing: Calculator: ...   Sep 21 2019, 06:11 AM
Caruban   Here's the whole thing: Calculator: ...   Sep 21 2019, 08:07 AM
Christian J   You're welcome!   Sep 21 2019, 12:48 PM

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 20th January 2020 - 10:19 PM