Using Javascript to make certain fields disappear depending on dropdown value

Question

I'm currently taking a beginner's course on Javascript. I just started coding about a week ago, and was given this prompt to use what I know so far to get data from forms etc.

I've run into a block, and the instructor told me I had to figure it out on my own but… I've been stuck on it for hours, just glancing at the materials and trying to search the internet for answers!! I know I have to use onchange, but I'm completely lost on the rest. I did the best that I could at this stage, but I'd really appreciate some help! Sorry for the super beginner/extra long question!

For the prompt, I was given a form and told to recreate it. After sorting out all the HTML, I have to:

1. Make sure everything starts out with no values.
2. Make sure the reset button works.
3. When choosing "male" in the "gender" category, the "hobby" row with "dance", "travel", and "photography" is hidden. The background color of the "soccer" and "futsal" row becomes blue.
4. When choosing "female" in the "gender" category, the "soccer" and "futsal" lines are hidden, and the background color of the "dance", "travel", "photography" line turns yellow.
5. When choosing "blank" from the "gender" category, both lines of "hobby" should be displayed, and the background color should be white.

Note: I don't think my HTML shows the rows for the "hobby" correctly, but it should be like:
- Soccer - Futsal
-Dance - Travel -Photography

<style>
  h1 {
    text-align: center;
  }

  .pink {
    background-color: pink;
  } 

  body {
    border: 2px;
  }

</style>

<script>
  function clr() {
    var t1 = document.info.lfname.value="";
    var t2 = document.info.gender.value="";
    var t3 = document.info.hobby.value="";
   }


<p>Last name (Chinese)：</p>
<form name="info">
  <input type="text" name="lfname">

First name (Chinese)： 
  <input type="text" name="lfname"><br>

<p>Last name (alphabet)：</p>

  <input type="text" name="lfname">

First name (alphabet)：
  <input type="text" name="lfname"><br><br>

Gender：

<select name="gender" onchange="hide()">
<option value=""></option>
<option value="man">Male</option>
<option value="woman">Female</option><br>
</select>

<p>Hobbies:</p>

  <input type="checkbox" name="hobby" value="soccer">Soccer
  <input type="checkbox" name="hobby" value="futsal">Futsal
  <input type="checkbox" name="hobby" value="dance">Dance
  <input type="checkbox" name="hobby" value="travel">Travel
  <input type="checkbox" name="hobby" value="photo">Photography<br><br><br>

  <input type="reset" class="pink" value="Reset" onclick="clr()">
  <input type="submit" class="pink" value="Submit">

</form> 

Answer 1

I'm avoiding giving you the full solution, so you can learn yourself but I have a few tips to put you in the right direction.

First you should make a css class hidden. This contains the following css

.hidden {
  display:none
}

This is just to make your life a little easier.

You can get any element in javascript by adding an id as attribute, so for example:

HTML:

<input type="checkbox" name="hobby" value="soccer" id="soccer">

Javascript:

var HTMLelement = document.getElementById('soccer');

You can also add classes to elements in javascript

HTMLelement.classList.add("hidden");

As last tip, you can check whether the checked value is true or false. Based on this if structure add the class or not.

if ( HTMLelement.checked == true) {
 do something 
}

I hope this helps you, I will answers your comments if u have questions

Good luck!

Answer 2

Welcome to StackOverflow!

As it is for your course. It is intended to teach you something. So don't expect ready solution. I will give you some hints instead:

1. As someone mentioned in comments, you have missing closing HTML tags <script>...your code here...</script>

   As @ths mentioned, input is already self closing tag.

2. It is good practice (it sometimes depends on technology but for pure JS/HTML it is really good practice) to give HTML elements some unique IDs:

   <input id="soccer" type="checkbox" name="hobby" value="soccer">Soccer

3. You can use

   const soccerCheckbox = document.getElementById("soccer");

   to obtain reference for some HTML elements, which you will use for further operations.

4. The easiest way to hide an element:

   soccerCheckbox.hidden = true;

   @Wimanicesir provided more elegant solution: https://stackoverflow.com/a/52630428/1944056

5. To append event listener:

   const genderSelect= document.getElementById("gender");
genderSelect.onchange = function () {
//here you can show/hide appropriate elements
}

   Another possibility: https://stackoverflow.com/a/4029360/1944056

6. To get the current value of dropdown:

   document.getElementById("gender").value

7. It is important to enclose all your Javascript code into:

   document.onload = function () {
...
}

   To wait until all HTML elements are accessible

Good luck for your course!

Answer 3

As I see, most of the answers are giving you some hints, and that's ideal in your case as you supposed to do your homework by yourself, so I tried to push it further by giving you a working example, i'll comment each line of code to let you understand, but keep in mind I'll be using some advanced JavaScript stuff that requires digging into the JavaScript language in order to get more familiar with, and also you'd really have to search by yourself for how the methods/attributes that'll be using work in order to, firstly and most importantly to get some more knowledge in this language, and secondly to have answers for your teachers questions when they, probably, ask what do these things do.

Sorry for being little bit aggressive, here's a demo on how you'll get your job done.

// select the dropdown, male and female hobbies sections based on the IDs that we already gave to each one.
var gender = document.getElementById('gender'),
maleHobbies = document.getElementById('male-hobbies'),
femaleHobbies = document.getElementById('female-hobbies');

// adding change event listener to the dropdown.
gender.addEventListener('change', function() {
  if(this.value === 'man') {
/**
* when 'Male' is selected on the dropdown(based on the value of the relevant checkbox):
*     1. add 'hidden' class to the female hobbies section to hide it.
*     2. remove the 'hidden' class from the male hobbies section to show it if it was hidden.
      3. add the 'blue' class from the male hobbies section.
**/
femaleHobbies.classList.add('hidden');
maleHobbies.classList.remove('hidden');
maleHobbies.classList.add('blue');
  } else if(this.value === 'woman') {
/**
* when 'Female' is selected on the dropdown(based on the value of the relevant checkbox):
*     1. add 'hidden' class to the male hobbies section to hide it.
*     2. remove the 'hidden' class from the female hobbies section to show it if it was hidden.
      3. add the 'yellow' class from the female hobbies section.
**/
maleHobbies.classList.add('hidden');
femaleHobbies.classList.remove('hidden');
femaleHobbies.classList.add('yellow');
  } else {
/**
* when the empty option is selected:
*     remove the 'hidden' class from both the male and female hobbies sections.
*     remove the 'blue' and 'yellow' classes from the male and female hobbies sections respectively.
**/
maleHobbies.classList.remove('blue', 'hidden');
femaleHobbies.classList.remove('yellow', 'hidden');
  }
});

.pink {
  background-color: pink;
}
/* 'hidden' class is used to hide an element by giving it a 'display' property of 'none'. */
.hidden {
  display: none;
}
/* 'blue' class is used to make the male hobbies section background as blue */
.blue {
  background-color: blue;
}
/* 'blue' class is used to make the female hobbies section background as yellow */
.yellow {
  background-color: yellow;
}

<!--
  I made some changes to your HTML:
- surrounded each checkbox inputs in a label tag with for attribute pointing to the corresponding input, soand you can click the text and the checkbox will check/uncheck.
- Added an ID to each checkbox input
- surrounded the corresponding checkboxes in a div, thus making row for male hobbies and row for female hobbies, each row(div tag) has a unique ID.
-->
<p>Last name (Chinese)：</p>
<form name="info">
  <input type="text" name="lfname" />
First name (Chinese)： 
  <input type="text" name="lfname" /><br>
<p>Last name (alphabet)：</p>
  <input type="text" name="lfname" />
First name (alphabet)：
  <input type="text" name="lfname" /><br><br>
Gender：
<select name="gender" id="gender">
  <option value=""></option>
  <option value="man">Male</option>
  <option value="woman">Female</option>
</select>
<p>Hobbies:</p>
  <div id="male-hobbies">
  <label for="soccer"><input type="checkbox" name="hobby" id="soccer" value="soccer" />Soccer</label>
  <label for="futsal"><input type="checkbox" name="hobby" id="futsal" value="futsal" />Futsal</label>
  </div>
  <div id="female-hobbies">
  <label for="dance"><input type="checkbox" name="hobby" id="dance" value="dance" />Dance</label>
  <label for="travel"><input type="checkbox" name="hobby" id="travel" value="travel" />Travel</label>
  <label for="photography"><input type="checkbox" name="hobby" id="photography" value="photo" />Photography</label>
  </div>
  <input type="reset" class="pink" value="Reset" />
  <input type="submit" class="pink" value="Submit" />
</form> 

Some hints for you:

• you don't need to create a function that resets each input field as the input[type="reset"](input with the type of reset) will do it for you.

• In order to make my demo work for you you have to either: paste the JavaScript code in a script tag and put that script just before </body>, or you can paste it in a seperate file then include it and again put the script tag that has the src to the file(that has the JavaScript code with .js extension) just before </body>.

And here are some useful links that may(indeed they'll do) help you:

Learn more more about getElementById method.

Learn more more about addEventListener method.

Learn more more about classList attribute and its methods(add, remove and more).

Hope I pushed you further.