Develop Reference

Using JQuery to change CSS value of all divs with same class but only if a contained checkbox is checked

I'm new to this world and finding myself on a very steep learning curve.
I've managed to sort all issues so far by looking through this site but this one has me stumped! I've given it a full day and can't progress so i'm hoping someone can help.
I've 2 roles, student and assessor.
Student completes their work and then the assessor marks it and a checkbox is ticked if the answer is sufficient.
Student then looks at their work and should see a green background to the answer with the checked checkbox, no background to those with unchecked.
At the moment my code is changing the background colour of all divs with the same class regardless of if the checkbox is checked or not.
Any help as to where i'm going wrong would be very much appreciated.
A sample question within a HTML form:
$(document).ready(function() {
$('.answer').each(function() {
if ($(this).find('input.cb:checked').prop('checked')) {
$('.answer').css("background-color", "#a5de76");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-left">1. Describe the procedures in place when a steward supervises spectator entry.</div>
<p></p>
<div class="answer"><textarea id="U1Q1" name="U1Q1" rows="5" cols="70"><?php echo htmlspecialchars($row['U1Q1'])?></textarea>
<?php echo '<input class="cb" type="checkbox" name="n" class="hidden" value="v"' . ($row['U1Q1R']==1 ? ' checked="checked"' : '') . '>';?>
<input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="<?php echo htmlspecialchars($row['U1Q1F'])?>" readonly />
</div>
This is how it currently looks on screen (the checkboxes will be hidden once I have the code working:
student page

You just need to use the current context this and change:
$('.answer').css("background-color", "#a5de76");
to
$(this).css("background-color", "#a5de76");
So, that only current checked answer background color is changed.
Full Code:
$(document).ready(function() {
$('.answer').each(function() {
if ($(this).find('input.cb').prop('checked')) {
$(this).css("background-color", "#a5de76");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-left">1. Describe the procedures in place when a steward supervises spectator entry.</div>
<p></p>
<div class="answer">
<textarea id="U1Q1" name="U1Q1" rows="2" cols="70"></textarea>
<input class="cb" type="checkbox" name="n" class="hidden" value="v" checked>
<input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="" readonly />
</div>
<div class="answer">
<textarea id="U1Q1" name="U1Q1" rows="2" cols="70"></textarea>
<input class="cb" type="checkbox" name="n" class="hidden" value="v">
<input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="" readonly />
</div>
<div class="answer">
<textarea id="U1Q1" name="U1Q1" rows="2" cols="70"></textarea>
<input class="cb" type="checkbox" name="n" class="hidden" value="v" checked>
<input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="" readonly />
</div>

Force Focusing on Sibling Input

I'm currently working with a contact form plugin through Wordpress and so the outputted HTML and JS looks like the following:
$('.form .form--field label').click(function() {
$(this).parents('.form--field').addClass('form--field--focus');
$('input').filter(':first').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label for="firstname" class="form--field__label">First Name</label>
<span>
<input type="text" name="firstname">
</span>
</div>
The design has caused me to get a bit hacky with it but in any event, I'm trying to figure out how to force focus on the respective input whenever the user clicks on a label. At the moment, this is where I'm at with it. If anyone has any input or suggestions, that would be greatly appreciated.

the for attribute on a <label> looks for an id not a name. Example below should work without JavaScript
<div class="form--field form--field__firstname">
<label for="firstname" class="form--field__label">First Name</label>
<span>
<input type="text" id="firstname" name="firstname">
</span>
</div>
Although if you really want to do this with JavaScript/JQuery and not be tied down to using a label you can do it this way using $(this).next().children().focus();
$('.form--field__label').click(function() {
$(this).next().children().focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label class="form--field__label">First Name</label>
<span>
<input type="text">
</span>
</div>
<div class="form--field form--field__secondname">
<!-- using a span instead of label as an example !-->
<span class="form--field__label">Second Name</span>
<span>
<input type="text">
</span>
</div>

set input id="firstname" because you want focus on label click. This is builtin feature in html.
<input type="text" id="firstname" name="firstname">
More details here https://www.w3schools.com/tags/tag_label.asp
for multiple input you can use it like this
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
If you still persist you can use it like this
$('.form--field label').click(function() {
//It will look next sibling which is span and then find input in it and then focus it
//so it doesn't focus on other children elements
$(this).next('span').find('input').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label class="form--field__label">First Name</label>
<span>
<input type="text" name="firstname">
</span>
<br>
<label class="form--field__label">Last Name</label>
<span>
<input type="text" name="lastname">
</span>
</div>

DOM changes with javascript aren't working

I'm trying to make a simple drop down menu which will have two elements: "male" and "female". I'm using a button to have these elements become visible. The problem is that they become visible but only for a fraction of a second and go back to being hidden.
Here's my code:
<html>
<head>
<title>
Validation Form
</title>
</head>
<body>
<h1>
Validation Form
</h1>
<form id="contactForm" action="" >
<fieldset>
<legend>Validation</legend>
<p>
<label for="firstname">First Name</label>
<input id="firstname" name="firstname" type="text"/>
</p>
<p>
<label for="lastname">Last Name</label>
<input id="lastname" name="lastname" type="text" />
</p>
<p>
<label for="gender">Gender</label>
<input id="gender" name="gender" type="text" />
</p>
<div class="dropdown">
<button id="btn_drop" onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" style="display: none">
<p id="drop_male">Male</p>
<p id="drop_female">Female</p>
</div>
</div>
<p>
<label for="website">Website</label>
<input id="website" name="website" type="text" />
</p>
<p>
<input type="button" id="submit" name="submit" value="Submit" />
<input type="reset" value="clear" />
</p>
</fieldset>
</form>
<script>
var dropBtn = document.getElementById("btn_drop");
dropBtn.onclick = function () {
// show all elements on clicking submit!
var drop = document.getElementById("myDropdown");
drop.style.display = 'block';
}
</script>
</body>
</html>

Look at you browser console. I assume you have an error because you didn't declare myFunction.
Please read this URL: http://www.w3schools.com/jsref/event_onclick.asp and use one of described approaches.

you can make this without javascript live fiddle with css
<p>
<label for="gender">Gender</label>
<select id="gender" name="gender" type='select' >
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>

how do i hide elements without using the visibility function [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to write a code that gives the user more options whenever a button is clicked.
for example say i have a page with two buttons, one "search for books" and another "search for events". If a user clicks on "search for books" button, on the same page right beneath the search button i want different options to appear. I tried using the css visibility:hidden function and switching it back to visibility:visible using a javascript function. It did work but a huge space from the screen was reserved for the hidden elements. The main window buttons were far apart from each other. on one side there was the "search for books" button and far from it there was the "search for events" button.
Here is part of the code
</head>
<div class ="buttons">
<div id="visible">
<input type="button" value="Click To Search Faculty Members" onclick="swapform()" class="button">
</div>
</div>
<div class = "form" id="theform" style="visibility: hidden">
<form name = "type" value="fm" action="http://localhost:8080/278Project/search.php" method="post" onsubmit="return goto();">
<table>
<span style="box-shadow: 0 0 0 1px white inset;">
<select name="type" >
<option value="fm"> Faculty Members Search </option>
</select>
<tr><td><label class ="textClick">List all Faculty Members<input type="radio" name="select" value=1 ></label>
<div>
<label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label>
<input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
<div>
<label class="textClick">List By First Name <input type="radio" name="select" value=3 ></label>
<input class="text" type="text" placeholder="Insert Name" name="list" >
</div>
<div>
<label class="textClick">List By Last Name<input type="radio" name="select" value=4 ></label>
<input class="text" type="text" placeholder="Insert Last Name" name="lname" >
</div>
</div>
<!-- <input type="button" value="Hide" onclick="swapform2()" class="button"> !-->
<input type="submit" value="Get Info">
</table>
</div>
</span>
</form>
<!-- Book Search !-->
<div class="buttons">
<div id="bvisible">
<input class ="button" type="button" value="Click To Search Books" onclick="swapbooks()" class="button">
</div>
</div>
<div id="thebookform" style="visibility: hidden">
<form name = "type" value="ch" action="http://localhost:8080/278Project/search.php" method="post" onsubmit="return goto();">
<table>
<select name="type">
<option value="ch"> Search for Books</option>
</select>
<tr><td><label class ="textClick">List all available Books<input type="radio" name="select" value=1 ></label>
<div>
<label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label>
<input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
<div>
<label class="textClick">List By Publishers name <input type="radio" name="select" value=3 ></label>
<input class="text" type="text" placeholder="Insert Name" name="list" >
</div>
<div>
<label class="textClick">List Books by year<input type="radio" name="select" value=4 ></label>
<input class="text" type="text" placeholder="Insert Last Name" name="lname" >
</div>
</div>
<input type="submit" value="Get Info">
</table>

Use this instead
display : none
This does the same thing, except the empty space the element takes up.
And looking at the tags, you have jQuery there. You can use .hide() and .show() instead.

How to focus on the text in top of page

I have a simple form which has has to be accessible. If someone misses a mandatory field, the a error should show on the top of the page where I placed a div tag. Now, after I click the submit button, it should show an error message on the top of page and then have a focus so that the screen reader can read it without refreshing the page. I am just not being able to focus on that error. Any suggestion would be really appreciated.
Thanks
My code looks like this
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
function myFunction() {
document.getElementById("errors").innerHTML = "ERROR ON THE FORM";
}
function getfocus() {
document.getElementById("errors").focus();
}
function printnfocus() {
if (myFunction()) {
getfocus();
}
}
</script>
</head>
<body>
<div id="errors"></div>
<fieldset>
<legend>Eligibility</legend> <input type="checkbox" id="citizen"> <label for="citizen">I am a U.S. citizen</label><br>
<input type="checkbox" id="18"> <label for="18">I am a 18 years old</label>
</fieldset>
<p>
<br>
</p>
<form id="sex" name="sex">
<fieldset>
<legend>Sex:</legend> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br>
<br>
</fieldset>
</form>
<fieldset>
<legend>Personal Information</legend>
<form>
<label for="lname">Last Name</label> <span title="lblAstrisk" class="asterisk" style="color:red">*</span> <input type="text" name="lname" id="lname" required=""><br>
<br>
</form>
</fieldset>
<p>
<button type="button" onclick="printnfocus()">Submit</button>
</p>
</body>
</html>

You are looking for window.scrollTo(). You can get the location of the errors div with this:
document.getElementById('errors').offsetTop