Develop Reference

Using Javascript to make certain fields disappear depending on dropdown value

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:
Make sure everything starts out with no values.
Make sure the reset button works.
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.
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.
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>

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!

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.

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:
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.
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
You can use
const soccerCheckbox = document.getElementById("soccer");
to obtain reference for some HTML elements, which you will use for further operations.
The easiest way to hide an element:
soccerCheckbox.hidden = true;
#Wimanicesir provided more elegant solution: https://stackoverflow.com/a/52630428/1944056
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
To get the current value of dropdown:
document.getElementById("gender").value
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!

Selected value of Radio Button doesn't change

In the view, I have these two radio buttons:
#Html.RadioButtonFor(c => c.CampaignType, "Exclusive")<label>Exclusive</label>
#Html.RadioButtonFor(c => c.CampaignType, "Shared")<label>Shared</label>
The value for Model.CampaignType is set in the controller before the page loads. All of this works fine. If Exclusive is what's saved in the DB, then we get this rendered in the HTML:
<input checked="checked" id="CampaignType" name="CampaignType" type="radio" value="Exclusive"><label>Exclusive</label>
<input id="CampaignType" name="CampaignType" type="radio" value="Shared"><label>Shared</label>
So far, all's well.
But, inside an onclick() event for a button, if I do this:
var values =
{
"CampaignType": $('#CampaignType').val()
}
alert(values.CampaignType);
The alert always comes up as `Exclusive', even if I have changed the selection to 'Shared'.
What do I need to do so that values.CampaignType reflects the what is selected on the page, and not what was set when the page was loaded?

So you can do start with these:
Remove the invalid ids - multiple ids are invalid in CSS. For getting the value of the checked radio button you can use:
$('input[name=CampaignType]:checked').val()
or
$('input[type=radio]:checked').val()
For the label to work you have to link it with the corresponding radio button using the for attribute.
See demo below:
function submit() {
var values = {
"CampaignType": $('input[name=CampaignType]:checked').val()
}
console.log(values.CampaignType);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input checked="checked" id="CampaignType1" name="CampaignType" type="radio" value="Exclusive">
<label for="CampaignType1">Exclusive</label>
<input id="CampaignType2" name="CampaignType" type="radio" value="Shared">
<label for="CampaignType2">Shared</label>
<br/>
<button onclick="submit()">click here</button>
All the best!

how to validate form validation based on radio button

i have two radio buttons, one is for fruits and dry fruits. For every radio button i display two text fields, i want to validate these text fields based on the radio button( means based on user which radio button we select).
I hardly working from morning, any idea.

Consider following just as example and will help you to sort out your problem
Below code will be part of your HTML
<input name="radio_" type="radio" value="fruit" id="fruitRadio" />
<input name="radio_" type="radio" value="dryfruit" id="dryfruitRadio" />
<input name="inputforfruitradio" type="text" value="fruit" id="fruitRadioInputText" />
<input name="inputfordryfruitradio" type="text" value="dryfruit" id="dryfruitRadioInputText" />
Above HTML code will need Javascript to work as required
$("#fruitInputText").hide();
$("#dryfruitInputText").hide();
$('input[name="radio_"]').on('change', function() {
var checked_radio = $(this).prop('id');
var inputText_id_to_be_shown = "#" + checked_radio + "InputText" ;
$(inputText_id_to_be_shown).show();
});

css metro-ui not able to show focus on check-box

Hi i have a check box using metro-ui
<label class="text_blue small_text">
<input name="enterprise_admin_session[remember_me]" type="hidden" value="0"><input tabindex="3" type="checkbox" value="1" name="enterprise_admin_session[remember_me]" id="enterprise_admin_session_remember_me">
<span class="check border_radius_zero"></span> Keep me logged in </label>
when i use tab and focus on this check-box , i am not able to identify the checkbox is focused. Don't know what i am missing
Or if there is any way from jquery to catch the focus event on the checkbox input and then change the css of <span class ="check border_radius_zero"></span>
Please help me to fix it, Thanks

I'm not really sure what your problem is, but if you want to do it with jQuery here is an example of how you can do it.
$("input[type='checkbox']").focus(function(){
var span_element = $(this).next("span.check.border_radius_zero");
// Change background color
span_element.css("background","red");
// Or Toggle class
span_element.toggleClass("className");
// Or Whatever you want to do with that span
span_element.DoWhateverYouWantWithMe();
});
If you need to discard that changes you made on focus, you can attach a blur event handler.
$("input[type='checkbox']").blur(function(){
var span_element = $(this).next("span.check.border_radius_zero");
// Change background color
span_element.css("background","initial");
// Or Toggle class
span_element.toggleClass("className");
// Or Whatever you want to do with that span
span_element.UnDoWhateverYouWantWithMe();
});
I personaly prefer do it with a class so you can simplify the code, even use the same handler! For example, you can do this.
$("input[type='checkbox']").focus(function(){
var span_element = $(this).next("span.check.border_radius_zero");
span_element.addClass("className");
}).blur(function(){
var span_element = $(this).next("span.check.border_radius_zero");
span_element.removeClass("className");
});
With the same handler:
var focus_blur_event_handler = function(){
var span_element = $(this).next("span.check.border_radius_zero");
span_element.toggleClass("className");
}
$("input[type='checkbox']").bind("focus",focus_blur_eventHandler);
$("input[type='checkbox']").bind("blur",focus_blur_eventHandler);

No need of Javascript or Jquery. You can style using CSS by simply adding this to your stylesheet.
input[type="checkbox"]:focus ~ .check{
/*Your style goes here*/
}
For reference, how to use general sibling selector(~) follow this link http://www.sitepoint.com/web-foundations/general-sibling-selector-css-selector/
Here's the fiddle:
https://jsfiddle.net/6a14tfd0/1/
input[type="checkbox"]:focus ~ .check{
color:red
}
<label class="text_blue small_text">
<input name="enterprise_admin_session[remember_me]" type="hidden" value="0">
<input tabindex="3" type="checkbox" value="1" name="enterprise_admin_session[remember_me]" id="enterprise_admin_session_remember_me">
<span class="check border_radius_zero">***</span> | Keep me logged in </label>

If radio button checked add new form element using dom?

How do I use DOM in Javascript to check if a radio button is checked and then if so add new form elements to datesettings?
//Radio buttons
<input type="radio" id="dateoption" name="dateoption" value="1">
<input type="radio" id="dateoption" name="dateoption" value="2">
//Add new form elements
<span id="datesettings"></span>
Im currently reading a Javascript book but its not helping me understand. If someone could help me with this example then maybe the penny will drop. Thanks for your time.

Check out this page:
It explains the process so you understand why you're doing it a certain way, AND it gives good example code.
http://www.webdevelopersnotes.com/tips/html/finding_the_value_of_a_radio_button.php3

You would write a function to do the check, like this:
function CheckDateOptions() {
var o1 = document.getElementById("dateoption1");
var o2 = document.getElementById("dateoption2");
var eSettings = document.getElementById("datesettings");
if(o1.checked) {
eSettings.appendChild(...);
}
else if(o2.checked) {
eSettings.appendChild(...);
}
}
But, you have to make sure to assign your radio buttons unique id values. You can duplicate names to group the radio buttons, but for any element, the id should be unique.
<form id="TestForm">
<!-- //Radio buttons -->
<input type="radio" id="dateoption1" name="dateoption" value="1">Text 1</input>
<input type="radio" id="dateoption2" name="dateoption" value="2">Text 2</text>
<!-- //Add new form elements -->
<span id="datesettings"></span>
</form>