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!
Related
Can't uncheck radio buttons after cloning a html element. Can anyone help me with this?
I tried .reset() .remove() and .checked=false but somehow it doesn't work.
<form>
<fieldset id="firstFieldset">
<legend>An advertiser wants to know if Shopping ads will appear on YouTube. What should you tell her?</legend>
<input type="radio" id="firstQuestionFirstOption" name="firstQuestion" value="firstQuestionFirstOption"> Shopping ads can only show on pre-roll video ads on YouTube<br>
<input type="radio" id="firstQuestionSecondOption" name="firstQuestion" value="firstQuestionSecondOption">Shopping Ads can only appear on Google.com<br>
<input type="radio" id="firstQuestionThirdOption" name="firstQuestion" value="firstQuestionThirdOption">Shopping ads can appear on Google Search partner websites like YouTube<br>
<input type="radio" id="firstQuestionFourthOption" name="firstQuestion" value="firstQuestionFourthOption">Shopping Ads can only appear on retail websites<br><br>
<button type="button" onclick="checkTheAnswerToTheFirstQuestion()">Show answer</button>
<p id="answerToTheFirstQuestion" onclick="checkTheAnswerToTheFirstQuestion();"></p>
<script>
function checkTheAnswerToTheFirstQuestion() {
if (document.getElementById('firstQuestionThirdOption').checked) {
document.getElementById('answerToTheFirstQuestion').innerHTML = "The answer is true";
} else {
document.getElementById('answerToTheFirstQuestion').innerHTML = "The answer is false";
var fieldset = document.getElementById("firstFieldset");
var newFieldset = fieldset.cloneNode(true);
}
}
</script>
</fieldset>
document.body.appendChild(newFieldset) = false;
</form>
<br><br>
<input type="button" value="Start again?" onClick="location.href=location.href">
You never actually add the thing you clone to the DOM, but the .checked = false method works in my example below. I've used .disabled = true since it seems more useful to show the answer you gave in the context of the response for reviewing what you previously answered.
In case I have made a wrong assumption, I left the .checked = false part commented.
I also cleaned up some of the radio input elements, as the you can simply set the right answer to "true" instead of having to maintain unique strings for all questions and possible answers.
I also made your function to check for answer more dynamic by allowing to give it the fieldset for the question rather being tied to a particular question.
This should give you a good understanding of adding/removing elements dynamically with JavaScript the way I think you are looking for.
<html lang="en">
<head>
<style>
.answerCorrect {
color: green;
}
.answerIncorrect {
color: red;
}
</style>
</head>
<body>
<form>
<fieldset id="firstFieldset">
<legend>An advertiser wants to know if Shopping ads will appear on YouTube. What should you tell her?</legend>
<input type="radio" name="firstQuestion" value="false"> Shopping ads can only show on pre-roll video ads on YouTube<br>
<input type="radio" name="firstQuestion" value="false">Shopping Ads can only appear on Google.com<br>
<input type="radio" name="firstQuestion" value="true">Shopping ads can appear on Google Search partner websites like YouTube<br>
<input type="radio" name="firstQuestion" value="false">Shopping Ads can only appear on retail websites<br><br>
<button class="answerButton" type="button" onclick="checkTheAnswer('firstFieldset')">Answer</button>
</fieldset>
</form>
<form id="answered">
</form>
<br/>
<input type="button" value="Start again?" onClick="location.href=location.href">
<script>
function checkTheAnswer(fieldsetId) {
// get a handle on the fieldset we are checking the answer for by its ID
let fieldset = document.getElementById(fieldsetId)
// was the checked value in the field set "true" (aka - correct)
let isCorrect = fieldset.querySelector("input[type='radio']:checked").value === "true"
// clone the answered fieldset
let newFieldset = fieldset.cloneNode(true)
// unset the radio buttons in a cloned fieldset
//newFieldset.querySelector("input[type='radio']:checked").checked = false
// disable the radio buttons in the 'answered' cloned fielset
let radios = newFieldset.querySelectorAll("input[type='radio']")
radios.forEach(r => r.disabled = true)
// remove the "Answer" button in the new fieldset
let answerButton = newFieldset.querySelector("button.answerButton[type='button']")
newFieldset.removeChild(answerButton)
// show the answer in the new fieldset
let answer = document.createElement("p")
answer.classList.add("answerText")
answer.classList.add(isCorrect ? "answerCorrect" : "answerIncorrect")
let answerText = document.createTextNode(`The answer is ${isCorrect ? "correct" : "incorrect"}.`)
answer.appendChild(answerText)
newFieldset.append(answer)
// get a handle on the form section used to put the cloned/answered fielsets into
let formAnswered = document.getElementById('answered')
// append the answered/reset fieldset into the 'answered' form
formAnswered.appendChild(newFieldset)
}
</script>
</body>
I'm new to web programming, and I have been trying to do a true/false test, and when the answers are submitted, the answers change colors depending if it's correct or not.
At first, I used labels for each input:
<h3>1. Father Christmas and Santa Claus are the same man</h3>
<input type="radio" id="1bon" name="q1" value="Non" >
<label for="1bon" > True </label> <!-- label is for css -->
<input type="radio" id="1non" name="q1" value="Bon">
<label for="1non" > False </label><br/>
And in the css, I used " input[value=Bon] + label" or "input[value=Non] +label" with a "background color : blue ", and in a JS, I used label[i].style.background to change the color. It's does change the color, but only of the radio button, and when not checked, which is exactly what I'm trying to do. It comes from the fact I don't know how to select the label of a precise input[x=y]:selector.
So I rewrote the whole thing without any labels
<h3>1. Father Christmas and Santa Claus are the same man </h3>
<input type="radio" class="input" id="1bon" name="q1" value="Non"> True
<input type="radio" class="input" id="1non" name="q1" value="Bon"> False
With new css:
.input {
background-color: #fff;
display:inline-block;
width:5%;
padding:10px;
border:1px solid #ddd;
margin-bottom:10px;
cursor:pointer; /* new selectoon type */
}
.input:checked{
background-color: #4876ff;
}
So, when just checked, it is blue, but when the answers are submitted, depending of the value of the input, it change the color of the class:checked.
It there any way do modify the style of a class with a selector in javascript ?
Also, if the user decides to change his answer for a question, the checked have to go back to being color neutral.
Thank you for your help.
You can use this function to change class of element as you explained earlier. But changing color of checkbox is not possible without using third party plugin or customized elements. Please check this link
function Test2($this){
var radios = document.getElementsByName('q1');
for(i=0; i< radios.length; i++){
var element = radios[i];
element.classList.remove("correctAnswer");
element.classList.remove("wrongAnswer");
}
if($this.value === "Non"){//Assume "Non" is correct answer
$this.classList.add("correctAnswer");
}else{
$this.classList.add("wrongAnswer");
}
}
Obviously checkboxes can be selected in whatever order you want but I'm having issues with this breaking. I cannot get checkbox C to appear when I select in the following order: A-D-C or D-A-C. If you select in order or reverse order it works fine AND it always works in Firefox for some reason. You can view this anomaly Click here for weird fiddle.
Why is this? How can I work around it?
HTML
<input type="checkbox" id="Abox" data-info-id="infoa">
<label for="Abox"> Checkbox A</label><BR>
<input type="checkbox" id="Bbox" data-info-id="infob">
<label for="Bbox"> Checkbox B</label><BR>
<input type="checkbox" id="Cbox" data-info-id="infoc">
<label for="Cbox"> Checkbox C</label><BR>
<input type="checkbox" id="Dbox" data-info-id="infod">
<label for="Dbox"> Checkbox D</label><BR>
CHECK AN ITEM ABOVE IT SHOULD APPEAR BELOW<P>
<div style="background-color:silver;">
<div id="infoa">
<input type="checkbox" id="kwd2" >
<label for="kwd2"> ALPHA</label><BR>
</div>
<div id="infob">
<input type="checkbox" id="fff1">
<label for="fff1"> BETA</label><BR>
</div>
<div id="infoc">
<input type="checkbox" id="zzz3">
<label for="zzz3"> CHARLIE</label><BR>
</div>
<div id="infod">
<input type="checkbox" id="kwd5" >
<label for="kwd5"> DELTA</label><BR>
</div>
</div>
JAVASCRIPT
document.addEventListener('change', function(e) {
var id = e.target.getAttribute('data-info-id');
var checked = e.target.checked;
if (id) {
var div = document.getElementById(id);
if (div) div.style.display = checked ? 'inline' : 'none';
alert("bang");
}
});
CSS
[id^="info"] {
display: none;
}
Weird bug, seems to have something to do with having inline -> block -> inline divs.
Changing the display to "block" instead of "inline" will do the trick though.
if (div) div.style.display = checked ? 'block' : 'none';
It looks like a Webkit (doesn't work in Safari or Chrome) bug displaying the inline divs. C's block is "displayed," it just has 0 width and height. I'm not certain what the spec says about inline divs, but they're not conventional. If you use block instead of inline it works.
(Edit deleted, it was wrong.)
Edit: this appears to be a simple browser redraw bug. You can make the inner part
<span id="infoa">ALPHA<br></span><span id="infob"></span><span id="infoc">CHARLIE</span><span id="infod">DELTA</span>
and it fails the same way. The newline before the non-displayed #infob appears to trigger #infoc's display problem. Seems like this should be reported to the Webkit people.
I have the need to change the name=' ' attribute of a hidden input when one of the radio buttons in a group is selected.
<input type="hidden" name="OptionName2" value="Premium Bundle Addons">
<input type="hidden" name="" value="PremiumBundleAddon">
HBO & Cinemax & Starz Package
<input type="radio" name="OptionValue2" value="3ITEM-HBO-CIN-STAR"><br />
HBO & Cinemax & Showtime Package
<input type="radio" name="OptionValue2" value="3ITEM-HBO-SHO-CIN"><br />
HBO & Showtime & Cinemax & Starz Package
<input type="radio" name="OptionValue2" value="ALL-HBO-SHO-CIN-STAR">
The name="" needs to change to name="ADD" when one of these radio buttons is clicked.
Here is what I have tried but I really struggle with javascript. If anyone could help dumb it down for me that would be amazing!
$(":radio").click(function () {
var inputValue = $this.val();
$(":hidden[name='opt2']").name() = "ADD";
});
});
As far as I see you don't have any hidden element with name opt2. Did you mean OptionName2?
Also, it's not correct the method you're using to change the name.
Try with this
$(":hidden[name='OptionName2']").attr("name", "ADD");
You can use simple javascript for this..
Just add id="changehid" to your hidden field.
Then you can use this function to change it:
function change() {
document.getElementById('changehid').name = "ADD";
}
Cheers
Evert
EDIT
Here's the code : http://jsfiddle.net/hCnyd/3/
I tested it with Safari Inspector, and it adds the name.
http://i.stack.imgur.com/aXjIE.png
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>